CSS 选择器
CSS 选择器有很多,总结几个常用的选择器,如果想了解更多选择器请点击我查看或者如果英文好得情况下点击我查看也是可以的哦~
- 通配符选择器
- 元素选择器
- ID选择器
- 类选择器
- 并集选择器(选择器分组)
- 交集选择器
- 子元素选择器
- 后代元素选择器
- 兄弟元素选择器
- 伪类选择器
- 子元素的伪类
- 伪元素选择器
- 属性选择器
- 否定伪类
通配符选择器
*
可以选中所有的元素
<style>
* {
color: deeppink;
}
</style>
<body>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
</body>
元素选择器
元素就是标签,可以直接使用标签的名称来选择页面中的元素。
<style>
a {
color: deepskyblue;
}
</style>
<body>
<p>我是一个段落</p>
<a href="#">我是一个a标签</a>
<p>我是一个段落</p>
<a href="#">我是一个a标签</a>
<p>我是一个段落</p>
</body>
ID 选择器
通过元素的#id
来选中符合条件的元素,同一个页面中,id
值不能重复。
<style>
#p1 {
color: greenyellow;
}
</style>
<body>
<p>我是一个段落</p>
<a href="#">我是一个a标签</a>
<p id="p1">看我的样式不一样哦~</p>
<a href="#">我是一个a标签</a>
<p>我是一个段落</p>
</body>
类选择器
可以为元素设置 class
属性,class
属性和 id
类似,但是class
可以重复。
拥有相同class
属性值的元素称为一组。
还可以为同一个元素设置多个class
属性值,属性值之间用空格分隔。
<style>
.p1 {
color: deepskyblue;
}
.test {
font-size: 20px;
}
</style>
<body>
<p class="p1">我的样式比较好看</p>
<p class="p1">我的样式比较好看</p>
<p class="p1">我的样式比较好看</p>
<p class="p1 test">与众不同</p>
<p>我么有样式