CSS——选择器

自己总结，如有错误，敬请斧正！

简单选择器

1. ID选择器
2. 元素选择器
3. 类选择器
4. 通配符选择器

*{
    
}/*选中所有元素*/

5. 属性选择器
根据属性名和属性值来选中元素

[href]{
    
}/*选中所有有href属性的元素*/
[href="https://www.sina.com"]{
    
}/*选中属性为href，且属性值为https://www.sina.com的元素*/
<a class="a b c d" href="">
[class~="b"]{
    
}/*类似于类选择器(更实用)
.b{}*/
<a class="abcd" href=" ">
[class*="b"]{
    
}/*包含b字母的类即被选中*/
<a href="https://www.baidu.com">
[href$="baidu.com"]{
    
}/*属性值为baidu.com且属性为href即被选中*/

6. 伪类选择器
选中某些元素的某种状态
link 超链接未被访问的状态

:link{
    
}/*选中未被访问的超链接所有元素*/
a:link{
    
}/*选中未被访问的超链接的a元素*/

visitd 超链接访问过后的状态

:visited{
    
}/*选中已被访问的超链接的所有元素*/
a:visited{
    
}/*选中已被访问的超链接的a元素*/

hover 鼠标悬停状态

:hover{
    
}/*选中鼠标悬停时的所有元素*/
a:hover{
    
}/*选中鼠标悬停时的a元素*/

active 鼠标激活状态

active{
    
}/*选中鼠标激活时的所有元素*/
a:active{
    
}/*选中鼠标激活时的a元素*/

代码形式必须以link visited hover active进行书写，遵循爱恨法则，否则会出现问题
7. 伪元素选择器

<p>
学习<span>HTML和CSS</span>
</p>
span::befor{
    
}/*HTML被选中*/
span::after{
    
}/*CSS被选中*/

选择器组合

1. 并且

a[href=""]{
    
}/*a元素并且含有href属性被选中*/
<p class="red"></p>
p.red{
    
}/*p元素并且含有red类的被选中*/

2. 后代元素——空格

<div class="red">
afafafawfwfawf
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
.red li{
    
}/*选中red类的后代元素li（也可使用ID）*/

3. 子元素——>

<div class="abc">
<p>Lorem</p>
<p class="bcd">Sada</p>
<p>FAF</p>
</div>
.abc>.bcd(所有选择器均可){
    
}

4. 相邻兄弟元素—— +

<div>
<ul>
<li class="a">a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
</div>
.a+li{
    
}/*紧挨着的li被选中*/

5. 兄弟元素—— ~

<div>
<ul>
<li class="a">a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
</div>
.a~li{
    
}/*含有类a的li元素以下的li元素被选中*/

并列选择器

p,li{
    
}/*所有的p元素和li元素都被选中*/