1. 其他选择器
概念： 其他选择器包括否定选择器、空选择器、lang选择器和锚点选择器
| 选择器 | 描述 | 举例 | 版本 |
|---|---|---|---|
:not() |
否定选择 | a:not([href*="baidu"]){} |
3 |
:empty |
选择没有内容的空元素 | div:empty{} |
3 |
:lang(en) |
选择有lang属性的元素 | p:lang(en){} |
2 |
:target |
当其他元素通过锚点定位到该元素时触发的CSS样式 | p:target{} |
3 |
2. :not()
布局：
<a href="http://www.baidu.com">百度</a>
<a href="http://w3school.com">w3school</a>
<a href="http://w3school.com">w3school</a>
样式：
a:not([href*="bai"]){
color: red;
}
2. :empty
布局：
<div>123</div>
<div></div>
样式：
div:empty{
border: 1px solid red;
height: 100px;
}
3. :lang(en)
布局：
<p>123</p>
<p lang="en">456</p>
样式：
p:lang(en){
color:red;
}
4. :target
布局：
<p id="abc">锚点</p>
<div></div>
<a href="#abc">点我跳回锚点</a>
样式：
div{
height: 1000px;
}
p:target{
color: red;
}
