0. 前言
也许你已经学会了CSS的几个简单常用的选择器：#id，.class，标签选择器，后代选择器，这就让你满足了么？so，我在里列举一些CSS3选择器，让你在写代码的时候更加得心应手，当然，我也是想在我忘了的时候，可以自己反过头来看看。
学霸.jpg
1. 简介
选择器的作用：使用选择器对HTML页面进行操作，实现一对一，多对一，一对多的控制。
2. 选择器
2.1 伪类选择器
:first-line 匹配每个元素里首行。
p:first-line{
color: red;
}
<p>
北京欢迎您！<br/>
Welcome to Beijing!
</p>
北京欢迎您.png
:first-letter选择每个元素的首字符。
p:first-letter{
font-size: 20px;
color: blue;
}
北京欢迎您.png
:before在每个元素内容之前插入内容。
p:before{
content: "哈哈";
}
<p>北京欢迎您！</p>
北京欢迎您.png
:after在每个元素内容之后插入内容。
p:after{
content: "嘿嘿";
}
北京欢迎您.png
::selection选择被用户选取的元素部分。
div::selection {
color: deeppink;
}
<div>
大家，新年快乐，恭喜发财！
</div>
恭喜发财.gif
2.2 目标伪类选择器
:target选择当前触发#新的元素
div:target{
width: 200px;
height: 200px;
background-color: orange;
}
<p><a href="#first">第一个</a></p>
<div id="first"></div>
<p><a href="#second">第二个</a></p>
<div id="second"></div>
<p><a href="#third">第三个</a></p>
<div id="third"></div>
二级菜单.gif
2.3 状态伪类选择器
:disabled选择每个禁用的 input 元素
input:disabled{
background-color: black;
}
禁用：<input type="text" disabled="disabled" />
禁用.png
:enabled选择每个启用的 input 元素。
input:enabled{
background-color: orange;
}
非禁用：<input type="text" />
非禁用.png
:read-only选择每个只读的 input 元素。
input:read-only{
background-color: pink;
}
只读：<input type="text" readonly="readonly" />
只读.png
:focus选择获得焦点的 input 元素。
input:focus{
background-color: seagreen;
}
获得焦点：<input type="text" />
获得焦点.gif
:checked选择每个被选中的 input 元素。
input:checked{
height: 100px;
}
选中：<input type="checkbox" />
选中.gif
2.4 结构伪类选择器
:root选择文档的根元素。
:root{
background-color: pink;
}
根元素.png
:empty选择没有子元素的空元素
p{
height: 50px;
background-color: orange;
}
<p></p>
<p></p>
<p>
</p>
<p><!-- 这是注释 --></p>
<p>有内容的P元素</p>
空元素.png
:first-child选择属于其父元素的首个元素。
#box :first-child{
background-color: red;
height: 100px;
}
<div id="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
第一个子元素.png
:last-child选择属于其父元素最后一个子元素。
#box :last-child{
background-color: red;
height: 100px;
}
最后一个子元素.png
:nth-child(n)选择属于其父元素的第n个子元素。
#box :nth-child(2){
background-color: red;
height: 100px;
}
选择其父元素第n个子元素.png
:nth-last-child(n)选择属于其父元素的第n子元素（从最后一个子元素开始数）。
#box :nth-last-child(2){
background-color: red;
height: 100px;
}
选择属于其父元素的第n子元素（从最后一个子元素开始数）.png
:only-child选择属于其父元素的唯一子元素的元素。
#box2 :only-child{
background-color: brown;
height: 150px;
}
选择属于其父元素的唯一子元素的元素.png
:first-of-type选择其父元素的第一个子元素。
#box p:first-of-type{
background-color: red;
height: 100px;
}
第一个子元素.png
:nth-of-type(n)选择属于其父元素的第n子元素。
#box :nth-of-type(2){
background-color: red;
height: 100px;
}
选择其父元素第n个子元素.png
:only-of-type选择属于其父元素唯一的元素。
#box div:only-of-type{
height: 100px;
background-color: red;
}
<div id="box">
//这是新添加的父元素下唯一的一个div
<div></div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
父元素下唯一的一个div.png
2.5 否定伪类选择器
:not(element)选择非element元素的每个元素。
li{
background-color: gold;
}
li:not(.second){
background-color: red;
}
<ul>
<li>第一个</li>
<li class="second">第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
非element的其他元素.png
2.6 层次选择器
element1~element2选择element1元素后面的每个兄弟element2元素。
div p~h3{
color: red;
}
<p>最外层的P元素</p>
<div>
<h3>我是h3</h3>
<h3>我是h3</h3>
<h4>我是h4</h4>
<p>内层的P元素</p>
<h3>我是h3</h3>
<h3>我是h3</h3>
<h4>我是h4</h4>
<div>
<p>最内层的P元素</p>
</div>
</div>
选择element1元素后面的每个兄弟element2元素.png
element1+element2选择element1元素后一个兄弟element2元素。
div p+h3{
color: blue;
font-size: 40px;
}
选择element1元素后一个兄弟element2元素.png
element1>element2选择父元素element1元素的所有element2元素。
div>div>p{
font-size: 30px;
color: blue;
}
选择父元素element1元素的所有element2元素.png
2.7 属性选择器
[attribute]选择带有 attribute 属性所有元素。
input[value]{
background-color: orange;
}
<input type="text" name="inner" /><br />
<a href="01_伪元素选择器.html">哈哈哈哈哈哈</a><br />
<input type="text" name="inner be" /><br />
<input type="button" name="inner-haha" value="我是一个按钮" /><br />
<input type="submit" value="我是一个提交" /><br />
选择带有 attribute 属性所有元素.png
[attribute][value]选择带有 attribute 和 value 两个属性所有元素。
input[value][name]{
background-color: skyblue;
}
选择带有 attribute 和 value 两个属性所有元素.png
[attribute=value]选择 attribute="value" 的所有元素。
input[value="我是一个提交"]{
background-color: seagreen;
}
.png
[attribute |= "value" ]选择 attribute 属性值以 "value" 开头的所有元素。
input[name |= "inner" ]{
background-color: red;
}
注意：有空格的也能被选中， 而以"-"为衔接才能不被选中
选择 attribute 属性值以 "value" 开头的所有元素.png
[attribute~=value]选择 attribute 属性值中有 value 的所有元素。
input[name ~= "be"]{
background-color: cornflowerblue;
}
选择 attribute 属性值中有 value 的所有元素.png
[attribute*=value]选择 attribute 属性值中包含 value 的所有元素。
input[value *= "提交"]{
background-color: indigo;
}
选择 attribute 属性值中包含 value 的所有元素.png
[attribute ^= "value" ]选择 attribute 属性值以 "value" 开头的所有元素。
input[name ^= "inner"]{
background-color: deeppink;
}
注意：[attribute |= "value" ]与[attribute ^= "value" ]的区别是[attribute ^= "value" ]不需要考虑"-"。
选择 attribute 属性值以 "value" 开头的所有元素.png
[attribute $= "value" ]选择 attribute 属性值以 "value" 结尾的所有元素。
a[href $= ".html"]{
font-size: 30px;
}
选择 attribute 属性值以 "value" 结尾的所有元素.png
3. 后记
烦.jpg
哎，写这些标签太枯燥了，没什么太大意思，但我还是坚持的写完了，一大波CSS3选择器希望对你有帮助，点赞啦！，分享啊！
网友评论