大家好，欢迎来到IT知识分享网。
一、常用选择器
- 通用兄弟元素选择器（
E~F）：E 和 F 属于同一父元素之内，并且 F 在 E 之后，通用兄弟选择器会选择符合这样排列的所有的 F 元素。
.test ~ p{
background-color: red;
}
<div>
<p>1</p>
<p class="test">2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<p>6 已脱离 div</p>
二、属性选择器
E[attr^="value"]：该选择器选择属性名为 attr ，属性值以 value 开头的元素。
a[title^='test']{
background: skyblue;
}
<a href="https://www.lanqiao.cn" title="test">title="test"</a><br />
<a href="https://www.lanqiao.cn" title="testxxx">title="testxxx"</a><br />
<a href="https://www.lanqiao.cn" title="xxtest">title="xxtest"</a><br />
<a href="https://www.lanqiao.cn" title="xxx">title="xxx"</a><br />
E[attr$="value"]：该选择器选择属性名为 attr，属性值以 value 结尾的元素。
a[title^='test']{
background: skyblue;
}
<a href="https://www.lanqiao.cn" title="test">title="test"</a><br />
<a href="https://www.lanqiao.cn" title="testxxx">title="testxxx"</a><br />
<a href="https://www.lanqiao.cn" title="xxtest">title="xxtest"</a><br />
<a href="https://www.lanqiao.cn" title="xxx">title="xxx"</a><br />
E[attr*="value"]：该选择器选择属性名为 attr，属性值包含 value 的元素。
a[title*='test']{
background: skyblue;
}
<a href="https://www.lanqiao.cn" title="test">title="test"</a><br />
<a href="https://www.lanqiao.cn" title="testxxx">title="testxxx"</a><br />
<a href="https://www.lanqiao.cn" title="xxtest">title="xxtest"</a><br />
<a href="https://www.lanqiao.cn" title="xxx">title="xxx"</a><br />
三、伪类选择器
E:root：该选择器选择文档的根节点，效果和设置 html 相同。
:root {
background-color: skyblue;
}
// 等同于
html{
background: lightgreen;
}
E:nth-child(n)：该选择器选择 E 元素父元素的第 n 个子元素。
n 取值为整数：子元素不一定是同种类型，只能取正整数
p:nth-child(3){
background-color: red;
}
<p>1</p>
<a href="">2</a>
<p>3</p>
<p>4</p>
n取值为表达式：取值为表达式时，选择器选择多个值，[n=0,1,2,3…]。当计算结果小于等于 0 或 大于子元素总数时，不选取元素。
p:nth-child(2n + 1){
background-color: red;
}
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
p:nth-child(even){
background-color: red;
}
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
- odd 相当于 2n+1。
- even 相当于 2n。
E:nth-last-child(n)：从最后一个往前计数。
p:nth-last-child(2n+1){
background-color: red;
}
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
E:nth-of-type()：该元素选择的是与 E 相同类型的兄弟元素。
p:nth-of-type(2n+1){
background-color: red;
}
<p>1th of ele,1th of p</p>
<p>2th of ele,2th of p</p>
<a href="https://www.lanqiao.cn">3th of ele,1th of a</a>
<p>4th of ele,3th of p</p>
<p>5th of ele,4th of p</p>
<p>6th of ele,5th of p</p>
.
5. E:last-child：该选择器选择 E 元素的父元素的最后一个子元素。
p:last-child{
color: red;
}
<p>第一个</p>
<p>第二个</p>
<p>第三个（最后一个）</p>
注意：该选择器需要满足父元素的最后一个元素和 E 匹配才会选取，否则不会选取。
p:last-child{
color: red;
}
<p>第一个</p>
<p>第二个</p>
<p>第三个（最后一个）</p>
<strong>真的最后一个</strong>
E:first-of-type：该选择器选择 E 元素父元素的子元素的第一个与 E 元素类型一致的元素。
p:first-of-type{
color: red;
}
<h3>好好学习(h3)</h3>
<p>第一个(p)</p>
<p>第二个(p)</p>
E:last-of-type：该选择器选择 E 元素父元素的子元素的最后一个与 E 元素类型一致的元素。
p:last-of-type{
color: red;
}
<h3>好好学习(h3)</h3>
<p>第一个(p)</p>
<p>第二个(p)</p>
E:only-child：该元素选择的是 E 是其父元素唯一的子元素。
.div1{
width:100px;
border: 2px solid;
}
.div2{
width:100px;
margin-top: 10px;
border: 2px solid;
}
p:only-child{
background: red;
}
<div class="div1">
<p>好好学习</p>
</div>
<div class="div2">
<p>好好学习</p>
<p>天天向上</p>
</div>
E:only-of-type：该选择器选择的是 E 是其父元素唯一的子元素类型。
.div1{
width:100px;
border: 2px solid;
}
.div2{
width:100px;
margin-top: 10px;
border: 2px solid;
}
p:only-of-type{
background: red;
}
<div class="div1">
<p>好好学习</p>
</div>
<div class="div2">
<p>好好学习</p>
<span>天天向上</span>
</div>
E:empty：该选择器选择的是空元素。
p:empty{
width:200px;
height:20px;
background-color: red;
}
<p>好好学习</p>
<p></p>
<p>天天向上</p>
E:target：该选择器选择的是一个 id 与 当前 url 匹配的元素。
:target {
border: 2px solid;
background: lightgreen;
}
<a href="#p1">jump to p1</a><br />
<a href="#p2">jump to p2</a>
<p id="p1">p1</p>
<p id="p2">p2</p>
E:not(s)：该选择器匹配不符合参数选择器 s 描述的元素。
.demo{
color: lightblue;
}
p:not(.demo){
color:lightcoral;
}
:not(.demo){
color:lightgreen;
}
<p class="demo">hello world</p>
<p>好好学习</p>
<span>天天向上</span>
第一个否定伪类选择器选择了 class 不为 demo 的
<p>元素，样式为红色；第二个否定伪类选择器选择了 class 不为 demo 的<span>元素，样式为绿色。
13.E:enabled & E:disabled：该选择器匹配的是元素的可用和禁用状态。
input:enabled{
background: pink;
}
input:disabled{
background: lightgreen;
}
<input type="text" name="test1" placeholder="disabled(不可选中)" disabled="true">
<br>
<input type="text" name="test2" placeholder="enabled(可选中)">
14. E:checked：该选择器一般用于 radio-button 或 checkbox，选择它们的 checked 状态。
input[type='checkbox']:checked{
margin: 100px;
}
<input type="checkbox" name="checkbox">
不积跬步无以至千里 不积小流无以成江海
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/26184.html
