CSS（三）— 选择器

来源：互联网发布：win7未识别的网络编辑：程序博客网时间：2024/05/16 00:45

每一条css样式定义由两部分组成，形式如下：选择器{样式}，在”{}”之前的部分就是“选择器”。 “选择器”指明了”{}”中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。以下列出了一些常用的选择器。

通配符选择器

在编写代码时，用”*”（全部）表示通配符选择器，其作用是定义引用该样式文件的页面所有元素（标签）的样式。

通配符样式代码

*{    color: aqua;    margin: 0px;    font-size: 50px;}

HTML代码

<body>    测试通配符选择器01    <div>测试通配符选择器02</div></body>

类选择器

类选择器通过直接引用元素中类属性（标签）的值而产生效果，这个应用前面总是有一个点”.”，这个点用来标识一个类选择器，类名可以随意命名，但最好根据元素的用途来定义一个有意义的名称。
类选择器代码

<!-- 文本格式 -->.text_pattern{    color: aqua;    font-size: 20px;    font-style: normal;}

HTML代码

  <div class="text_pattern">测试类选择器</div>

ID选择器

ID选择器与类选择器极其相似，类选择器是以”.”开头，而ID选择器是以”#”开头。对一个HTML文档来说，其中的每一个标签都可以使用
id=”” 的形式进行指派一个ID选择器，但是需要注意，在HTML文件中，id是唯一不可重复的。

ID选择器代码

<!-- 文本格式 -->#text_pattern{     color: aqua;     font-size: 20px;     font-style: normal; }

HTML代码

<div id="text_pattern">测试类选择器</div>

元素选择器

元素选择器又称为类型选择器（type selector）。

“类型选择器匹配HTML标签的名称。类型选择器匹配文档树中该元素类型的每一个实例。”

元素选择器代码

 div{            background-color: red;            width: 500px;            height: 200px;            font-size: 100px;            color: aquamarine;        }

HTML代码

<div>666</div>

只要和元素选择器的名称一样的标签都会改变样式。

包含选择器

如果用户想对某个对象中的子对象进行样式指派，包含选择器就可以发挥作用了。包含选择器又称后代选择器，因为该选择器是作用在某个标签的子标签之上的，且不仅限于两层标签元素。
有以下HTML代码

 <h1 id="test">        <span>我是span，被包含在h1中</span>  </h1>

想改变test下的span的样式

<!-- 改变了id为test的标签的子标签span的样式 --> #test span{            color: blue;            font-size: 50px;        }

当然父标签和子标签的选择也可以使用其他选择器。

此处，使用了”#test span”可以大于等于2层的任意层嵌套，比如span标签是id为test的标签的子标签的子标签，使用”#test span”也可以。如果只想指向直接子类，可以使用”#test>span”。

群组选择器

群组选择器使用逗号对选择器进行了分割，这样书写的优点在于同样的样式只需要书写一次，减少了代码量，有利于改善CSS的代码结构。

群组选择器代码，让三个标签的颜色相同

div,h3,.span_pattern{            color: red;        }

HTML代码

<div>我是div标签</div><h3>我是div标签</h3><span class="span_pattern">我是span标签</span>

选择器的优先级别

行内样式>ID选择器 > 类选择器 > 元素选择器> 通配符选择器 > 继承 > 浏览器默认属性

阅读全文

0 0