CSS 几种常见的选择器
在css中,要对元素添加样式,可以使用选择器来实现。这里就来说说几种比较常见的选择器。选择器的逻辑是选中页面中指定的标签元素。要先选中元素,才能选中元素的属性。
标签选择器
标签选择器能快速为同一类的标签添加样式。
标签 {
}
<style>
p {
color: red;
}
div {
color: green;
}
</style>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<div>第一个div</div>
<div>第二个div</div>
<div>第三个div</div>
类选择器
上述的标签选择器会选中全部符合要求的标签。但是现在我只想把第一段给变成红色,这个时候就可以使用类选择器,差异化表示不同的标签。
.标签 {
}
<!-- 标签中需要带class属性-->
<style>
.red {
color: red;
}
</style>
<p class="red">第一段</p>
<p>第二段</p>
<p>第三段</p>
<div class="red">第一个div</div>
<div>第二个div</div>
<div>第三个div</div>
注意:
(1)类选择器使用.来开头。
(2)下方的标签必须要使用class属性来调用。
(3)一个类可以被多个标签使用,一个标签可以使用多个类,使用空格分开。
id选择器
和类选择器类似,使用#开头,标签中需要id属性来调用,id是唯一的,和类选择器的区别就是不能被多个标签使用(类似于姓名和身份证号之间的关系。姓名可以相同,但是身份证号不能相同)。
#标签 {
}
<!-- 标签中需要带id属性-->
<style>
#red {
color: red;
}
</style>
<p id="red">第一段</p>
<p>第二段</p>
<p>第三段</p>
通配符选择器
使用*,选中所有的标签。
<style>
* {
color: red;
}
</style>
<p id="red">第一段</p>
<div>第一个span</div>
<h4>标题</h4>
以上选择器被称为基础选择器。
后代选择器
又称为包含选择器,选择某个父元素中的某个子元素。这里的后代不仅仅是儿子,也可以是孙子等等。
元素1 元素2 {
}
元素1和元素2之间使用空格分割。选择的结果之影响元素2。
<style>
/*只选中ol中的li标签*/
ol li {
color: red;
}
</style>
<ul>
<li>ul的li</li>
<li>ul的li</li>
</ul>
<ol>
<div>div</div>
<li>ol的li</li>
<li>ol的li</li>
</ol>
可以是任意基础选择器的组合。
<style>
.red-ol .red-li {
color: red;
}
.red-ol li {
color: green;
}
</style>
<ul>
<li>ul的li</li>
<li>ul的li</li>
</ul>
<ol class="red-ol">
<div>ol中的div</div>
<li class="red-li">ol的li</li>
<li>ol的li</li>
<li>ol的li</li>
</ol>
子选择器
和后代选择器类似,但是只能选择亲儿子,不能选择其他的。
元素1>元素2 {
}
<style>
.two a {
color: red;
}
/*分别注释两个选择器,观察*/
/*后代选择器会改变两个标签的颜色*/
/*子选择器只会改变第一个标签的颜色*/
.two>a {
color: green;
}
</style>
<div class="two">
<!-- 亲儿子-->
<a href="#">链接1</a>
<!-- p标签中的a标签,孙子标签-->
<p><a href="#">链接2</a></p>
并集选择器
用于选择多组标签,通过逗号分割等多个元素,完成集体声明。
元素1,
元素2 {
}
<style>
p,
div,
h4 {
color: red;
}
</style>
<p>p标签</p>
<div>div标签</div>
<h4>h4标签</h4>
伪类选择器(链接伪类)
伪类选择器有很多,这里主要说说链接的伪类选择器。
a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)
(要注意顺序,LVHA,否则不生效)
(实际开发主要给链接做一个样式, 然后给 hover 做一个样式即可. link, visited, active 用的不多)
a:hover {
color: green;
}
a:active {
color: red;
}
<!-- 鼠标停在链接上,呈现绿色.按下鼠标不松手,呈现红色.-->
<a href="#">链接1</a>
以上选择器,和基础选择器对应的,叫做复合选择器。