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样式都和选择器密切相关。当然,这篇笔记中所谓的“详解”也不是十分详细,只是在入门阶段可以自己拿来玩玩,后续会整理更多的知识点。