css学习三：选择器

常用的css选择器分类：

• 元素选择器、标签选择器、element选择器
• id选择器
• class选择器
• *通配符，全局选择器
• 交集选择器
• 并级选择器（群组选择器）
• 后代选择器（包含选择器）
• 子选择器
• 伪选择器

1.标签选择器

语法：

标签 {属性：属性值；属性：属性值；属性：属性值；}

 

让你有的页面标签，都可以作为选择器

使用场景：

• 如果想改变某个元素的默认样式时，使用元素选择器
• 统一文档内某个元素的显示效果

 

2.id选择器

语法：

#id属性值 {属性：属性值；属性：属性值；属性：属性值；}

 

 

说明：

• 使用id选择器时，应该为元素定义id属性，如<div id="top"></div>
• id选择器的语法格式，在id属性值前加#
• id属性值，不能为关键字。所有的标签和属性，都是关键字。
• 一个页面的所有的id属性值，应该是唯一的
• id选择器最大的用处，创建网页的外围结构

 

3.class选择器

语法：

.class类名 {属性：属性值；属性：属性值；属性：属性值；}

 

说明：

使用类选择器时，应该为每个元素定义一个类名称

类选择器的语法格式，在class属性值(或者叫class名称)前面加"."

类名的第一个字符，不能使用数字

场景：

类选择器，更适合定义一类标签的样式

示例：

        <p class="p1">abc</p>
        <p class="p1">123</p>
        <p class="p2">xyz</p>
        <p>456</p>

        <style>
            .p1 {
                background-color: #008000;
            }
            .p2 {
                background-color: blue;
            }
        </style>

 

 

4.*通配符选择器

语法：

* {属性：属性值；属性：属性值；属性：属性值；}

 

*通配符选择器，通常用在样式表的最前面，通常用于标记padding,margin为0

            * {
                padding: 0;
                margin: 0;
            }

 

 

前面这四种选择器，常用。

 

5.交集选择器

语法：

选择器1选择器2 {属性：属性值；属性：属性值；属性：属性值；}

 

说明：

• 同时匹配多个选择器的选择器。即，既要有选择器1，也要有选择2的元素，才能匹配此选择器
• 多个选择器之间不能有空格，必须连续书写
• 标签选择器和类选择器的组合，标签选择器与id选择器的组合，id选择器与类选择器的组合
• 只能有以上三种组合，交集选择器才生效。

示例：

        <p id="p1">abc</p>
        <p class="p2">123</p>
        <p id="p3" class="p4">xyz</p>
        <p id="p5" class="p6">opq</p>
        <p>456</p>

            p#p1 {
                background-color: red;
            }
            p.p2 {
                background-color: green;
            }
            #p3.p4 {
                background-color: blue;
            }
            .p6#p5 {
                background-color: aqua;
            }

 

 

6.并集选择器，也叫群组选择器

语法：

选择器1，选择器2，选择器3 {属性：属性值；}

 

说明：

• 并集选择器之间，使用 ， 分隔
• 只要匹配其中的1个选择器，即匹配此选择器

示例：

            #p1,.p2,#p3 {
                background-color: red;
            }

 

 

7.后代选择器

语法：

选择器1 选择器2 选择器3 {属性：属性值；}

 

说明：

• 选择器之间，使用空格分隔
• 选择器2所在的标签，是含选择器1所在的标签的下级标签

示例：

        <div id="box1">
            <p>xyz</p>
        </div>
        <div id="box2">
            <p>xyz</p>
            <div>
                <p>klj</p>
            </div>
        </div>

 

        <style>
            #box2 p {
                background-color: #008000;
            }
        </style>

 

 

8.子选择器

语法：

选择器1>选择器2 {属性：属性值；}

 

说明 ：

• 子选择器之间，使用>分隔
• 选择器2所在的标签，是选择器1所在标签的下一级标签

使用以上的html标签，示例：

            #box2>p {
                background-color: #008000;
            }

 

9.伪类选择器：

常用的伪类选择器，a标签，它的语法：

a：link {属性：属性值；}   超链接的初始状态
a：visited  {属性：属性值；}   超链接被访问后的状态
a：hover {属性：属性值；}   超链接，在鼠标悬停时的状态
a：active {属性：属性值；}   超链接被激活后的状态，即鼠标按下时，超链接的状态

 

注意：

当这4个超链接伪类选择器，联合使用时，必须要注意它们的顺序，正常顺序为：a:link，a:visited，a:hover，a:active；错误的顺序将使选择器不能生效。

 示例：

            a:link {
                color: red;
            }

            a:visited {
                color: yellow;
            }

            a:hover {
                color: #008000;
            }
            a:active {
                color: blue;
            }

    <a href="#" target="_blank">百度</a>

 

 

选择器的权重：

在css中，会根据选择器的特殊性，来决定所定义的样式规则的顺序，具有更特殊选择器的规则，优先于具有一般选择器的规则。

如果两个规则的特殊性相同，那么后定义的规则优先。

css中，用4位数字表示权重，权重的表达方式，如：0,0,0,0

• 子选择器的权重为0000
• 群组选择器的权重为0000
• 继承样式的权重为0000
• 标签选择器的权重为0001
• class选择器的权重为0010
• 属性选择器的权重为0010
• 伪类选择器的权重为0010
• 伪元素选择器的权重为0010
• id选择器的权重为0100
• 包含选择器的权重：包含选择器的权重之和
• 行内样式的权重为1000

权重的数字越大，优先级越高。

示例：

<div id="box" class="cb">abc</div>

 

        <style>
            div {
                background-color: #008000;
                border: solid black;
            }
            .cb {
                background-color: #FF0000;
            }
            #box {
                background-color: blue;
            }
        </style>

 

注意：同样的属性，会根据权重来选择；不同的属性，不会被覆盖掉。

示例中，div的权重最低，相同的属性background-color，将选择最高权重的#box中的属性。div中border属性，在其它样式中，并没有定义，因此div中的border属性将显示。