也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

选择 src 属性值以“https”开头的每个元素

[属性$=值]

[src$=".pdf"]

选择 src 属性值以“.pdf”结尾的每个元素

[属性*=值]

[src*=“runoob”]

选择 src 属性包含子字符串“runoob”的每个元素

例子：

代码

阐明

div[class^="测试"]{背景:#ffff00;}

设置所有class属性值以“test”开头的div元素的背景颜色

[class^="测试"]{背景:#ffff00;}

设置类属性值以“test”开头的所有元素的背景颜色

div[class$="test"]{背景:#ffff00;}

设置所有class属性值以“test”结尾的div元素的背景颜色

[class$="测试"]{背景:#ffff00;}

设置类属性值以“test”结尾的所有元素的背景颜色

div[class*="test"]{背景:#ffff00;}

设置所有class属性值包含“test”的div元素的背景颜色

[类* =“测试”] {背景：#ffff00;}

设置类属性值包含“test”的所有元素的背景颜色

2. 结构伪类选择器（一）

选择器

例子

描述

结构伪元素选择器

:第一个字母

p:第一个字母

选择每个

元素的第一个字母

：第一行

p：第一行

选择每个

元素的第一行

：前

p：之前

在每一个

在元素之前插入内容

：后

p：之后

在每一个

元素，然后插入内容

结构伪类选择器：共同特点是允许开发者根据文档中的结构来指定元素的样式

：根

：根

选择文档的根元素

：不是（选择器）

：不是（p）

选择不是 ap 元素的每个元素

：空的

p：空

选择没有任何子元素的每个 p 元素（包括文本节点）

：目标

#新闻：目标

选择当前活动的 #news 元素（包含该锚点名称的单击 URL）

①各

然后元素插入内容： p:after{content:"-Rememberthis";}

②设置HTML文档的背景颜色：:root{background:#ff0000;}

:root 选择器匹配文档的根元素，该元素仍然是 HTML 中的 HTML 元素。

③对于所有不

设置元素所属元素的背景颜色: :not(p){background:#ff0000;}

④ 指定空p元素的背景色：p:empty{background:#ff0000;}

:empty 选择器选择没有任何子元素的元素（包括文本节点）。

⑤：目标选择器可以使用当前activity的目标元素的样式，只能用id标记

1 
 2 
 3 
 4     
 5     
 6     
 7         :target{
 8         border: 2px solid #D4D4D4;
 9         background-color: #e5eecc;
10         }
11     
12 
13 
14     
This is a heading
15     
Jump to New content 1
16     
Jump to New content 2
17     
Click on the links above and the :target selector highlight the current active HTML anchor.
18     
New content 1...
19     
New content 2...
20 
21 

3.结构伪类选择器（二）

选择器

例子

描述

：第一个孩子

p:第一个孩子

仅当指定

该元素是其父元素的第一个子元素的样式。

：最后一个孩子

p:最后一个孩子

选择作为其父元素的最后一个子元素的每个 p 元素。

:第n个孩子(n)

p：第 n 个子级(2)

选择作为其父元素的第二个子元素的每个 p 元素

:第n个最后一个孩子(n)

p：第 n 个最后一个子节点(2)

选择作为其父级的第二个子级的每个 p 元素，从最后一个子级开始计数

:第 n 个类型(n)

p:第 n 个类型(2)

选择作为其父元素的第二个 p 元素的每个 p 元素

:nth-last-of-type(n)

p：第 n 个倒数类型 (2)

选择作为其父元素的第二个 p 元素的每个 p 元素（从最后一个子元素开始计数）

①指定父元素中最后一个p元素的背景颜色：p:last-child{background:#ff0000;}

②指定每个p元素与同类型的倒数第二个兄弟元素的背景颜色相匹配：p:nth-last-child(2){background:#ff0000;}

③:nth-child(n) 选择器匹配父元素中的第n个子元素，n可以是数字、关键字（奇偶数等关键字）、公式。 该索引处的第一个子节点为 1。

④：第n个类型（n）选择器匹配相同类型的第n个兄弟元素。 n 可以是数字、关键字或公式。 该索引处的第一个子节点为 1。

p：第 n 个类型（奇数）{背景：#ff0000;}

p：第 n 个类型（偶数）{背景：#0000ff;}

⑤ 使用公式(an+b)。 说明：a表示一个周期的大小，N是计数器（从0开始），b是偏斜量。 在这里，我们为索引为 3 的倍数的所有 p 元素指定背景颜色： p:nth-child(3n+0){background:#ff0000;}

⑥：唯一子选择器匹配父元素中唯一子元素的元素。 p:独生子女{背景:#ff0000;}

4. UI元素状态伪选择器

在CSS3选择器中，不仅有结构伪类选择器，还有UI元素状态伪类选择器。 此类选择器的共同特点是指定的样式仅在元素处于某种状态时起作用，在默认状态下不起作用。 在 CSS3 中，有 17 个 UI 元素状态伪类选择器。

选择器

例子

描述

：关联

一条链接

选择所有未访问的链接

：积极的

一：活跃

选择活动链接

：徘徊

a：悬停

当在链接前面选择键盘时

： 重点

输入：焦点

选择具有焦点的输入元素（选中）

：检查过

输入：选中

选择每个选定的输入元素

①：键盘移动到链接时通过hover添加的特殊样式。

提示::悬停选择器适用于除链接之外的所有元素。

Tips::链接选择器设置未访问过的页面链接的样式css3奇偶选择器，:visited选择器设置访问过的页面链接的样式：活动选择器设置点击链接时的样式。

注意：为了形成预期的效果，在CSS定义中，:hover必须位于:link和:visited之后！

②：焦点选择器用于选择获得焦点的元素。

Tip::focus 选择器接受击键或其他用户输入元素。

输入数组获得焦点时选择的样式： input:focus{background-color:yellow;}

1 
 2 
 3      
 4     
 5     
 6         input:focus{
 7             background-color:yellow;
 8         }
 9     
10 
11 
12     
点击文本输入框表单可以看到黄色背景:
13     
14         First name: 

15         Last name: 
16     
17     
注意:  :focus 作用于 IE8,DOCTYPE 必须已声明
18 
19 

③：选中的选择器匹配每个选定的输入元素（仅适用于单选按钮或复选框）。

设置所有选中的输入元素的背景颜色： input:checked{height:50px;width:50px;}

1 
 2 
 3     
 4     
 5     
 6         input:checked {
 7             height: 50px;
 8             width: 50px;
 9         }
10     
11 
12 
13     
14          Male

15          Female

16          I have a bike

17          I have a car
18     
19 
20 

选择器

例子

描述

：启用

输入：启用

选择每个启用的输入元素

：禁用

输入：禁用

选择每个禁用的输入元素

1 
 2 
 3 
 4      
 5      
 6      
 7         input:enabled{
 8         background:#ffff00;
 9         }
10         input:disabled{
11         background:#dddddd;
12         }
13     
14 
15 
16     
17         First name: 

18         Last name: 

19         Country: 

20         Password: 
21          Male

22          Female

23          I have a bike

24          I have a car 
25     
26 
27 

5.通用兄弟元素选择器：

它用于指定位于父元素中的元素之后的某种类型的所有其他同级元素所使用的样式。

例如：同一个div下的子p元素用“~”连接css3奇偶选择器，div~p{background-color:gold}