关于css中选择器的⼩归纳（⼀）
关于css中选择器的⼩归纳
⼀、基本选择器
基本选择器是我们平常⽤到的最多的也是最便捷的选择器，其中有元素选择器（类似于a，div，body，ul），类选择器（我们在HTML标签⾥⾯为其添加的class），ID选择器（与类选择器类似），普遍选择器（*），并且选择器（类似“p.one#first”的写法）和并列选择器（类
似“p,.one,#first”的写法）
1.元素选择器
范例：
<p>你好，css</p>
<div>你好，css</div>
css：
div{
border:1px solid #ededed;
background-color: lightblue;
}
只有div标签的内容样式发⽣改变
2.类选择器
范例：
<p class="one">你好，css</p>
<p class="two">你好，css1</p>
css：
.one{
border:1px solid #ededed;
background-color: lightblue;
}
只有class为“one”的p标签样式发⽣改变
3.ID选择器
范例：
<p id="first">你好，css</p>
<p id="second">你好，css</p>
css：
#first{
border:1px solid #ededed;
background-color: lightblue;
}
只有ID为“first”的p标签样式发⽣改变
4.普遍选择器
范例：
<p>你好，css</p>
<div>你好，css</div>
css：
*{
border:1px solid #ededed;
background-color: lightblue;
}
所有标签内的样式都发⽣改变
5.并且选择器
范例：
<p class="one" id="first">你好，css</p>
<p class="one">你好，css</p>
<p id="first">你好，css</p>
css：
<#first{
border:1px solid #ededed;
background-color: lightblue;
}
只有ID为“first”且同时class为“one”的p标签样式发⽣改变
6.并列选择器
范例：
<p>你好，css</p>
<div class="one">你好，css</div>
<ul id="first">你好，css</ul>
css：
p,.one,#first{
border:1px solid #ededed;
background-color: lightblue;
}
p标签，class为“one”的标签和ID为“first”的标签样式都发⽣改变
⼆、层次选择器
层次选择器⼀般⽤于选择⽹页中某⼀个标签中⼦类众多的情况，在这个时候为每⼀个标签都加上class或者是ID不太现实，但是不加⼜难以选择需要添加样式的标签，此时层次选择器尤为合适。
1.后代选择器（可被后代继承）
范例：
<div class="content">
<p>你好，css</p>
<hr>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
css：
.content{
border:1px solid #ededed;
background-color: lightblue;
}
class为content的div标签⾥⾯所有的⼦代及孙代样式都发⽣改变
2.⼦代选择器（最直接的⼦代，不能被孙辈元素继承）
css选择器分为哪几类
范例：
<div class="content">
<p>你好，css</p>
<hr>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
css：
.
content > li{
border:1px solid #ededed;
background-color: lightblue;
}
class为content的div标签⾥⾯所有的⼦代（只有⼦代，不含孙代）样式都发⽣改变3.下⼀个兄弟选择器
范例：
<div>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<dl>
<li>one</li>
<li>two</li>
<li>three</li>
</dl>
</div>
css：
ul + ol{
border:1px solid #ededed;
background-color: lightblue;
}
ul及ol标签内容的样式发⽣改变，但是dl内容样未改变
4.之后所有兄弟选择器
范例：
<div>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<dl>
<li>one</li>
<li>two</li>
<li>three</li>
</dl>
</div>
css：
ul ~ dl{
border:1px solid #ededed;
background-color: lightblue;
}
从ul到dl所有内容的样式都发⽣了改变
（未完，待总结...）
本⽂转载于：猿2048→

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。