CSS（二）——选择器详解

CSS（二）——选择器详解

选择器的作用是：帮助选择相应的元素

简单选择器

ID选择器

<!--根据元素中的id来选择，例如：选择id为top的元素-->
<style>
    #top{
        想要执行的CSS规则;
    }
</style>
<span id="top">
	想要更改的元素;
</span>

元素选择器

<!--根据元素（标记来选择），例如：选择<h1>-->
<style>
    h1{
        执行的CSS规则;
    }
</style>

类选择器

<!--根据元素的类（class）来选择，例如：选择class=“test”-->
<style>
    .test{
        执行的CSS规则;
    }
</style>
<span class="test">
    想要更改的元素;
</span>

通配符选择器

该选择器表示选中所有的元素

<style>
    *{
        
    }
</style>

属性选择器：

<!--选中所有具有该属性的元素-->
<style>
    [href="#"]{
        color:yellow;
    }
    <a href="#"></a>
</style>

属性选择器有很多种写法，每个写法完成的功能不一样：

<!--如果属性是一个以空格分隔的值列表,该写法与类选择器的效果相同-->
[attr~=value]{

}
<!--包含该属性值的元素都选中-->
[attr*=value]{

}
<!--以value结束的属性选中-->
[attr$=value]{
}
<!---->

伪类选择器：

link：超链接未访问时的状态

visited：超链接访问后的状态

hover：鼠标悬停状态

<!--选中鼠标悬停时的a元素-->
a:hover{
	
}

​ active：激活状态

<!--选中鼠标惦记的a元素-->
a:active{

}

【注】：伪类选择器的书写书序有严格要求，按照上面介绍的顺序写。“爱恨法则——lv ha”

伪元素选择器：伪元素选择器在前面要加两个冒号 ::

before：

p::before{
	<!--content 表示在p元素的第一个位置生成一个子元素，没元素名（重复一遍：没元素名）然后对新生的元素进行相应的样式修改-->
	content:"《";
}

​ after：同上（在末尾加）

选择器的组合：

并且组合：

span.test{
	<!--该选择器表示选中class=“test”的span元素-->
}

​ 后代元素：

.test li{
	<!--该选择器表示选择class=“test”的元素中的li元素-->
}

​ 子元素选择器

div>span{
	<!--div下的子元素span被选中-->
}

选择器的并列：

语法糖——一种方便我们书写代码的语法：

.test,.p,.span{
	<!--该选择器表示上述三个类的元素都执行声明块中的规则-->
}

总结

选择器是一个很重要的知识点，后续所有的CSS样式都和选择器密切相关。当然，这篇笔记中所谓的“详解”也不是十分详细，只是在入门阶段可以自己拿来玩玩，后续会整理更多的知识点。