css中的伪类结构选择器

结构化伪类选择器

1.:root选择器

root选择器用于匹配文档根元素  也就是说 用“:root”定义的样式 对所有页面元素样式都生效 可以单独数值在进行覆盖

<style type="text/css">
:root{
color:red;
}
h2{
color:bule;
}
</style>
<h2>4(⊙﹏⊙)任7他有</h2>
<p>人的方提供用户</p>
<p>到风6给 </p>

可以看出h2元素为蓝色 不是root的红色原因是 后来单独设置的h2样式 覆盖了刚开始设置的root样式 p元素因为没有进行单独的样式设置 所以样式为root样式的红色

2.：not选择器

排除这个结构元素下面的子结构元素 让他不使用这个样式

<style type="text/css">
body*:not(h2){
color:red;
}
</style>
<h2>4(⊙﹏⊙)任7他有</h2>
<p>人的方提供用户</p>
<p>到风6给 </p>

可以看出除了h2标签的元素其他元素都为红色

3. :only-child 选择器

用于匹配某父辈只有一个子元素的元素 

<style type="text/css"
 li:only-child{
color:red;
}
</style>
<ul>
<li>欲罢</li>
<li>的发帖衣柜</li>
</ul>
<ul>
<li>他非要骨灰</li>
</ul>

可以看出只有第2个的ul中的li颜色为红色 第一个ul因为li不为ul的唯一子元素 所以不显示 红色

4.frist-child 和 last-child 选择器

父辈中第一个和最后一个元素

<style type="text/css">
P:first-child{
 color:red;
}
p:last-child{
color:bule;
}
</style>
<p>tfyguh</p>
<p>dtfyguh</p>
<p>tfyguhij</p>
<p>tfyguhij</p>
<p>dtfygiu</p>

可以看出 第一个p元素显示为红色 最后一个p元素显示为蓝色；

5 ：nth-child()和nth-list-child()

选择第几个元素和倒数第几个元素

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<style type="text/css"> P:nth-child(2){  color:red; }   p:nth-last-child(2){ color:green;} </style> <p>tfyguh</p> <p>dtfyguh</p> <p>tfyguhij</p> <p>tfyguhij</p> <p>dtfygiu</p>

　　第2个p元素为红色 倒数第2个元素为绿色

6：nth--of-child()和nth-list-of--child()

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<style type="text/css"> P:nth-of-child(2){  color:red; } p:{ color:green; } p:nth-last-of-child(2){ color:bule;} </style> <p>tfyguh</p> <p>dtfyguh</p> <p>tfyguhij</p> <p>tfyguhij</p> <p>dtfygiu</p>

　　第2个p元素为红色 倒数第2个元素为蓝色其余颜色为绿色

7. ：empty选择器

用于选择没有子元素或文本为内容的所有元素

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<style type="text/css"> p:{ color:green; } ：empty{ background-color:#999; } </style> <p>tfyguh</p> <p>dtfyguh</p> <p>tfyguhij</p> <p></p> <p>dtfygiu</p>

　　除空元素外其他颜色为绿色 空元素的背景元素为灰色

8 ：target选择器  在被选中元素的内容前面插入内容 必须配合content属性来指定要插入的内容

?

1 2 3 4 5 6 7 8 9 10

<style type="text/css"> p:{ color:green; } :target{<br>background-back:#rad;<br>} </style> <p>tfyguh</p> <p>dtfyguh</p> <p>tfyguhij</p> <p>dtfygiu</p>

伪类选择器

1.before 在元素的内容前插入内容  必须配合 conten使用

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<style type="text/css"> p:{ color:green; } p:berfore{ content:"rdyugiojnk" } </style> <p>tfyguh</p> <p>dtfyguh</p> <p>tfyguhij</p> <p></p> <p>dtfygiu</p>

　将会在p元素前加上content属性后的内容

2. after选择器 在对应元素后加入内容

 

　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<style type="text/css"> p:{ color:green; } p:after { content:"rdyugiojnk" } </style> <p>tfyguh</p> <p>dtfyguh</p> <p>tfyguhij</p> <p></p> <p>dtfygiu</p>

　　在p元素后加入content属性后的内容

2、链接伪类

a:link{css样式规则} ：未访问时超链接的状态

a:visited{css样式规则} ：访问后超链接的状态

a:hover{css样式规则} ：鼠标经过。悬停时超链接的状态

a:active{css样式规则} ：鼠标单击不动时超链接的状态