复合选择器
在CSS中,选择器可以分为基础选择器和复合选择器,复合选择器是以基础选择器为基础的, 并且对基本选择器进行组合形成的。
●复合选择器可以更准确、更高效的选择目标元素(标签)
●复合选择器 是由两个或多个基础选择器,通过不同的方式组合而成的
●常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
后代选择器
后代选择器又称为包含选择器,可以选择父元素里面的子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当嵌套标签,内层标签就成为外层标签的子标签。
语法格式:
外层标签 内层标签 {
…
}
中间必须用空格隔开
内外层标签可以是任意类型的选择器。
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
ol li{
color: red;
}
</style>
</head>
<body>
<ol>
<li>11111111111111</li>
<li>222222222222222</li>
<li>3333333333333333333</li>
<p>ppppppppppppp</p>
</ol>
</body>
</html>
当body中由两个或以上的ol li 组合时,不能直接用后代选择器。
可以如下设计:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
ol li{
color: red;
}
.nav li{
color: green;
}
</style>
</head>
<body>
<ol>
<li>111111111111</li>
<li>222222222222</li>
<li>333333333333</li>
<p>ppppppppppppp</p>
</ol>
<ol class="nav">
<li>33333333333</li>
<li>44444444444</li>
<li>55555555555</li>
<p>ppppppppppppp</p>
</ol>
</body>
</html>
子选择器
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。
语法格式:
父元素>子元素{
…
}
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
.nav>p{
color: green;
}
</style>
</head>
<body>
<ol class="nav">
<li>33333333333</li>
<li>44444444444</li>
<li>55555555555</li>
<p>ppppppppppppp</p>
</ol>
</body>
</html>
并集选择器
并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明
并集选择器是各选择器通过英文逗号(, )连接而成,任何形式的选择器都可以作为并集选择器的一部分。
语法格式:
元素1, 元素2 {
样式声明
}
上述语法表示选择元素1和元素2.
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
div,p,ul li{
color: pink;
}
</style>
</head>
<body>
<div>大宝贝</div>
<p>小宝宝</p>
<ul>
<li>hhhhhh</li>
<li>llllll</li>
</ul>
</body>
</html>
元素之间的逗号不能少,可以同时并不同的选择器。
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如当鼠标移到一个链接时,链接变为浅蓝色。
伪类选择器书写最大的特点是用置号(😃表示,比如:hover、:first-child .
因为伪类选择器很多,比如有链接伪类.结构伪类等,所以这里先给大家讲解常用的链接伪类选择器。
链接伪类选择器
顾名思义,就是对一个链接添加特殊效果
标签名 | 作用 |
---|---|
a:link | 选择所有未被访问的链接 |
a:visited | 选择所有己被访问的链接 |
a: hover | 选择鼠标指针位于其上的链接 |
a:active | 选择活动链接(鼠标按下未弹起的链接) |
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接伪类选择器</title>
<style>
a:link {
color: aqua;
text-decoration: none;
}
a:visited{
color: green;
}
a:hover{
color: red;
}
a:active{
color: yellow;
}
</style>
</head>
<body>
<a href="index06.html">第一个链接</a>
<a href="index04.html">第二个链接</a>
</body>
</html>
focus 伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,一般情况 < input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。
语法格式:
input :focus {
backg round- color: yel1ow;
}
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接伪类选择器</title>
<style>
input:focus {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>