CSS学习笔记_CSS复合选择器
本文内容:
CSS复合选择器:
1. 什么是复合选择器
2. 后代选择器
3. 子代选择器
4. 并集选择器
5. 伪类选择器
5.1 链接伪类选择器
5.2 :focus选择器
6. 复合选择器总结
1、什么是复合选择器
在CSS中,可以根据选择器的类型把选择點分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
- 复合选择器可以更准确、更高效的选择目标元素(标签)
- 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
- 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
2、后代选择器
又称为包含选择器,可以选择父元素里面的子元素
如:
<ul>
<li>我是li</li>
</ul>
<ol>
<li>我也是li</li>
<li><a href="#"></a></li>
</ol>
如何修改ul中li的样式呢?使用后代选择器代码如下:
ul li {
color: red;
}
修改 ol 中 li 中 a 标签的样式:
ol li a {
color: black;
}
注意:
- 元素与元素之间要用空格隔开
3、子代选择器
子元素选择器只能选择元素的最近一级子元素
语法:
元素1>元素2 {
}
例如:
<style>
.nav a { /* 这么写的话是后代选择器,两个a标签样式都会变*/
color: black;
}
.nav>a { /* 这么写就只会改变第一个a标签中的样式*/
color: black;
}
</style>
<body>
<div>
<a href="#">这是儿子</a>
<p>
<a href="#">这是孙子</a>
</p>
</div>
</body>
4、并集选择器
并集选择器可以选择多组标签,同时为他们定义相同的样式,任何形式的选择器都可以作为并集选择器的一部分。
语法:
元素1,元素2 { /* 用英文逗号隔开*/
}
5、伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个,第n个元素。
其最大的书写特点是用冒号表示。
5.1 链接伪类选择器
写法 | 意义 |
---|---|
a:link | 选择所有未被访问的链接 |
a:visited | 选择所有已被访问过的链接 |
a:hover | 选择鼠标放在其上的链接 |
a:active | 选择活动链接(鼠标按下未松开的链接) |
例如:
<style>
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: red;
}
</style>
/*以上代码可以实现: 当鼠标点击过链接时,链接会变成红色*/
<body>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
又如:
<style>
a:hover {
color: blue;
}
</style>
/*以上代码可以实现: 当鼠标放在链接上时,链接会变成蓝色*/
<body>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
5.1.1 链接伪类选择器使用注意事项
- 为了确保生效,代码务必按照
link visited hover active
的顺序书写。 - 因为 a 链接在浏览器中都有默认样式,所以在实际工作中都会给链接单独指定样式。
5.1.2 链接伪类在实际工作中的一般写法
a {
color: gray;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
5.2 :focus
伪类选择器
:focus
伪类选择器用于选择获得焦点的表单元素。
焦点就是光标,一般情况<input>
类表单元素才能获取,所以这个选择器也一般是针对表单元素。
input:focus {
}
6、复合选择器总结
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
---|---|---|---|---|
后代选择器 | 用来选择后代元素 | 可以是子孙后代(多级) | 较多 | 空格隔开 |
子代选择器 | 用来选择最近一级元素 | 只能选择最近一级 | 较少 | 大于号连接 |
并集选择器 | 选择某些可以使用相同样式的元素 | 可以用于集体声明 | 较多 | 英文逗号连接 |
链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a{} a:hover 在实际开发中的写法 |
:focus 选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus 记住这个写法 |