**复合选择器 **是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
交集选择器
交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交集选择器 </title>
<style>
/* 交集选择器用法是标签名+类名 使用较少 特殊情况使用 */
/* div.bule 的意思是只指定div标签下的类名叫 blue 的内容 所以p标签类名虽然相同但是不起作用 */
div.blue{
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<div>你不许给我变颜色</div>
<div class="blue">
<p>你给我变个颜色试试</p>
</div>
<p class="blue">我赌你不能给我变颜色</p>
</body>
</html>
并集选择器
并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的,任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<!-- 并集选择器目的是集体声明,减少重复写类名,写法 所有标签名用逗号隔开,可以理解为 我们都需要这个样式,这个选择器使用较多,多使用在样式初始化(清除默认样式) -->
<!-- 需求:使 div span 标签变成红色,h1 p 变成蓝色 -->
<style>
div,span {
color: blue;
}
h1,p {
color: red;
}
</style>
</head>
<body>
<div>我想变成红色</div>
<span>我也想变成红色</span>
<h1>我要变蓝色</h1>
<p>我也想</p>
</body>
</html>
后代选择器
后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<style>
/* 标签选择器会选取全局div */
div {
color: violet;
font-size: 16px;
}
/* 后代选择器能定义子类属性 在基本的标签选择器后面加上空格在加上子标签*/
div p {
color: yellowgreen;
}
/* 但会有另一种情况,例如ul和ol下面会出现相同的li标签可以用另一种选择方式 父级标签类选择器class定义, 选择器类名+子标签 */
.fh li {
color: blue;
}
</style>
</head>
<body>
<div>大话西游</div>
<div>王者荣耀</div>
<div>
<p>我是后代选择器</p>
</div>
<ul>
<li>水果</li>
</ul>
<ol class="fh">
<li>苹果</li>
</ol>
</body>
</html>
子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接,注意,符号左右两侧各保留一个空格。
子 指的是亲儿子 不包含孙子 重孙子之类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子代选择器</title>
<style>
/* 要求:一级菜单红色 二级菜单蓝色并且没有下划线 */
ul > li > a {
/* 子代选择器可以选择该标签下唯一的亲儿子标签,而以下的其他嵌套标签内的相同标签不受影响 */
color: red;
font-size: 30px;
}
ul > li > div > a {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">一级菜单</a>
</li>
<li>
<div>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
</div>
</li>
</ul>
</body>
</html>
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类链接</title>
<style>
/* 未访问过的链接 */
a:link {
font-size: 30px;
text-decoration: none;
color: #3c3c3c;
font-weight: 700;
}
/* 访问过的链接 */
a:visited {
color: #3c3c3c;
}
/* 鼠标移动上去的链接 */
a:hover {
color: red;
}
/* 鼠标选定下的链接 */
a:active {
color: seagreen;
}
</style>
</head>
<body>
<a href="#">我是链接</a>
</body>
</html>