CSS3选择器

blankです

已于 2022-04-22 20:28:57 修改

阅读量538

点赞数

文章标签：前端

于 2022-04-06 17:58:06 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47782618/article/details/123996149

版权

本文详细介绍了CSS3的关系选择器，包括后代选择器、子代选择器、相邻兄弟选择器和通用兄弟选择器。接着讨论了伪类选择器，如:hover、:active、:focus等，以及伪对象选择器如::before和::after。最后，讲解了属性选择器的各种用法，如[attribute]、[attribute=value]等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 关系选择器

1.1 后代选择器

① 定义：选择所有被A元素包含的B元素，连接符号是空格

② 语法：A B{}

<head>
    <style>
        div p{ color:red; }
    </style>
<head>
<body>
    <p>黑色的</p>
    <div>
        <p>红色的</p>
        <p>红色的</p>
        <span><p>红色的</p></span>
    </div>
</body>

1.2 子代选择器

① 定义：选择所有被A元素包含的直接子元素B，对更深层次的B不起作用，连接符号是>

② 语法：A>B{}

<head>
    <style>
        div>p{ color:red; }
    </style>
<head>
<body>
    <p>黑色的</p>
    <div>
        <p>红色的</p>
        <p>红色的</p>
        <span><p>黑色的</p></span>
    </div>
</body>

1.3 相邻兄弟选择器

① 定义：选择紧跟在A元素后的第一个B元素，连接符号是+

② 语法：A+B{}

<head>
    <style>
        h1+p{ color:red; }
    </style>
<head>
<body>
    <p>黑色的</p>
    <div>
        <h1>ok</h1>
        <p>红色的</p>
        <p>黑色的</p>
        <span><p>黑色的</p></span>
    </div>
</body>

1.4 通用兄弟选择器

① 定义：选择紧跟在A元素后的所有B元素，连接符号是~

② 语法：A~B{}

<head>
    <style>
        h1~p{ color:red; }
    </style>
<head>
<body>
    <p>黑色的</p>
    <div>
        <h1>ok</h1>
        <p>红色的</p>
        <p>红色的</p>
        <span><p>黑色的</p></span>
    </div>
</body>

2. 伪类选择器

同一个标签，根据其不同的状态，有不同的样式，这就叫做伪类，伪类用冒号表示。

2.1 :link，:visited，:hover，:active

① :link：链接，超链接点击之前（只适用于a标签）

② :visited：访问过的，链接被访问之后（只适用于a标签）

③ :hover：悬停，鼠标放在标签上的时候（适用于所有标签）

④ :active：激活，鼠标点击标签，但不松手的时候（适用于所有标签）

a:link {color:red;}
a:visited {color:orange;}
a:hover {color:pink;}
a:active {color:green;}

以上四种状态必须按照顺序写。

2.2 :first-child选择器

选择父元素中的第一个子元素（第一个子元素必须是冒号前面指定的元素，否则该选择器不生效）

<head>
    <style>
        p:first-child{ color:red; }
    </style>
<head>
<body>
    <p>红色的</p>
    <div>
        <p>红色的</p>
        <p>黑色的</p>
    </div>
    <div>
        <h1>黑色的</h1>
        <p>黑色的</p>
    </div>
</body>

2.3 :last-child选择器

选择父元素中的最后一个子元素（最后一个子元素必须是冒号前面指定的元素，否则该选择器不生效）

<head>
    <style>
        p:last-child{ color:red; }
    </style>
<head>
<body>
    <div>
        <p>黑色的</p>
        <p>红色的</p>
    </div>
    <div>
        <p>黑色的</p>
        <h1>黑色的</h1>
    </div>
    <p>红色的</p>
</body>

2.4 :nth-child()选择器

选择父元素中的第n个子元素（父元素的第n个元素必须是冒号前的元素，否则选择器失效）

n的取值可以是一个数字，一个关键字（如odd或者even）或者一个公式。

<head>
    <style>
        p:nth-child(2){ color:red; }
    </style>
<head>
<body>
    <p>黑色的</p>
    <div>
        <p>黑色的</p>
        <p>红色的</p>
    </div>
    <div>
        <p>黑色的</p>
        <h1>黑色的</h1>
        <p>黑色的</p>
    </div>
    <p>黑色的</p>
</body>

2.5 :nth-last-child()选择器

结合2.3和2.4理解

2.6 :only-child选择器

选择父元素中唯一的子元素（父元素只能有一个子元素，且该子元素必须为冒号前的元素）

<head>
    <style>
        p:only-child{ color:red; }
    </style>
<head>
<body>
    <div>
        <p>黑色的</p>
        <p>黑色的</p>
    </div>
    <div>
        <p>黑色的</p>
        <h1>黑色的</h1>
    </div>
    <div>
        <p>红色的</p>
    </div>    
</body>

2.7 :first-of-type选择器

选择父元素中第一个冒号前指定的子元素，该元素不一定是父元素的第一个子元素。

<head>
    <style>
        p:first-of-type{ color:red; }
    </style>
<head>
<body>
    <div>
        <p>红色的</p>
        <p>黑色的</p>
    </div>
    <div>
        <h1>黑色的</h1>
        <p>红色的</p>
    </div>
    <p>红色的</p>
</body>

2.8 :last-of-type选择器

结合2.3和2.7理解

2.9 :nth-of-type()选择器

结合2.4和2.7理解

2.10 :nth-last-of-type()选择器

结合2.8和2.9理解

2.11 :empty选择器

选择没有任何子元素或文本节点的父元素。

<head>
    <style>
        p{ height:50px; }
        p:empty{ background-color:red; }
    </style>
<head>
<body>       
    <div>
        <p><span></span></p>    <!--白色的背景-->
        <p>白色的背景</p>
    </div>
    <div>
        <p>白色的背景</p>
        <p>白色的背景</p>
    </div>
    <p></p>    <!--红色的背景-->
</body>

2.12 :not()选择器

选择不符合括号内选择器的元素。

<head>
    <style>
        p{ height:50px; }
        div :not(p){ background-color: red; }
        p:not(.class){ background-color: blue; }
    </style>
<head>
<body>       
    <p>蓝色的背景</p>
    <div>
        <p class="class">白色的背景</p>
        <p>蓝色的背景</p>
        <h1>红色的背景</h1>
    </div>
    <p class="class">白色的背景</p>
</body>

2.13 :focus选择器

选择具有焦点的元素。

<head>
    <style>
        input:focus{ background-color: red; }
    </style>
<head>
<body>       
    <input type="text">
    <input type="text">
</body>

2.14 :checked选择器

选择被选中的输入元素（只适用于单选按钮和复选框）

<head>
    <style>
        input:checked{ height: 80px; }
    </style>
<head>
<body>       
    <input type="radio" name="sex" value="male">man
    <input type="radio" name="sex" value="female">woman
</body>

2.15 ::selection选择器

选择元素中被用户选中或者处于高亮状态的部分。

该选择器只可以应用于少量CSS属性：color、background、outline、cursor。

Firefox通过其私有属性::-moz-selection支持。

<head>
    <style>
        ::selection{ background-color: red; }
    </style>
<head>
<body>       
    <p>a p</p>
    <h1>a h1</h1>
</body>

3. 伪对象选择器

伪对象也叫伪元素。用一个冒号引导伪元素也是能被解析的，这是为了兼容旧的书写方式，但规范使用应使用两个冒号的形式。

伪类更多的是定义元素的状态，而伪元素则是改变文档的结构，在结构外另加一个没有实际存在的元素。

3.1 :before / ::before

在被选择元素的前面新插入内容，与content属性一起使用。

<head>
    <style>
        ul::before{ content: "before"; color:red; }
    </style>
<head>
<body>       
    <ul>
        <li>first</li>
        <li>second</li>
    </ul>
</body>

content插入的是行内元素，行内元素不可以设置宽和高，以下代码可实现自定义插入：

<head>
    <style>
        ul::before{ 
            content: ""; 
            background-color:red;
            width:500px;
            height:200px;
            display:block;
        }
    </style>
<head>
<body>       
    <ul>
        <li>first</li>
        <li>second</li>
    </ul>
</body>

3.2 :after / ::after

在被选择元素的后面新插入内容，与content属性一起使用。

<head>
    <style>
        ul::after{ content: "after"; color:red; }
    </style>
<head>
<body>       
    <ul>
        <li>first</li>
        <li>second</li>
    </ul>
</body>

4. 属性选择器

只有在规定!DOCTYPE时，IE7和IE8才支持属性选择器，IE6及一下不支持属性浏览器。

4.1 [attribute]选择器

选择带有指定属性的元素。

<head>
    <style>
        a[target]{ background-color:yellow; }
    </style>
<head>
<body>       
    <a href="#">白色的背景</a>
    <a href="#" target="_blank">黄色的背景</a>
</body>

4.2 [attribute=value]选择器

选择带有指定属性和值的元素。

<head>
    <style>
        a[target="_self"]{ background-color:yellow; }
    </style>
<head>
<body>       
    <a href="#">白色的背景</a>
    <a href="#" target="_blank">白色的背景</a>
    <a href="#" target="_self">黄色的背景</a>
</body>

4.3 [attribute~=value]选择器

选取属性值中包含指定词汇（注意是完整的词，不可以将词拆成字母或者字符，一个完整的单词以空格作为分界线，如www.baidu.com是一个单词，而www baidu com则是三个单词）的元素。

<head>
    <style>
        a[id~="id"]{ background-color:yellow; }
    </style>
<head>
<body>       
    <a href="#" id="id1">白色的背景</a>
    <a href="#" id="id one">黄色的背景</a>
    <a href="#" id="id two">黄色的背景</a>
</body>

4.4 [attribute|=value]选择器

选择带有以指定值开头的属性值的元素。（注意，开头后面必须有-，如en-us的开头是en）

<head>
    <style>
        a[id|="id"]{ background-color:yellow; }
    </style>
<head>
<body>       
    <a href="#" id="id1">白色的背景</a>
    <a href="#" id="id one">白色的背景</a>
    <a href="#" id="id-two">黄色的背景</a>
</body>

4.5 [attribute^=value]选择器

选择带有以指定值开头的属性值的元素。（注意与4.4区分，本选择器没有-的限制）

<head>
    <style>
        a[id^="id"]{ background-color:yellow; }
    </style>
<head>
<body>       
    <a href="#" id="id1">黄色的背景</a>
    <a href="#" id="id one">黄色的背景</a>
    <a href="#" id="id-two">黄色的背景</a>
</body>

4.6 [attribute$=value]选择器

选择带有以指定值结尾的属性值的元素。

<head>
    <style>
        a[id$="1"]{ background-color:yellow; }
    </style>
<head>
<body>       
    <a href="#" id="id1">黄色的背景</a>
    <a href="#" id="id 1">黄色的背景</a>
    <a href="#" id="1id">白色的背景</a>
</body>

4.7 [attribute*=value]选择器

选择属性值包含指定值的元素。

<head>
    <style>
        a[id*="1"]{ background-color:yellow; }
    </style>
<head>
<body>       
    <a href="#" id="id1">黄色的背景</a>
    <a href="#" id="i1d">黄色的背景</a>
    <a href="#" id="1id">黄色的背景</a>
</body>