后代选择器、子选择器、并集选择器、伪类选择器

yyyyyyoow

已于 2024-04-19 16:06:17 修改

阅读量239

点赞数 4

文章标签： css3 前端 css

于 2024-04-19 15:47:17 首次发布

本文链接：https://blog.csdn.net/mobolove/article/details/137967645

版权

后代选择器由称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>复合选择器之后代选择器</title>
<style>
/* 我想要把ol里面的小li选出来改为pink */
ol li {
color: pink;
}

/* 中国山东济南蓝翔 */
ol li a {
color: red;
}

.nav li a {
color: yellow;
}
</style>
</head>

<body>
<ol>
变态写法 /*颜色不会变*/
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li><a href="#">我是孙子</a></li>
</ol>
<ul>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li><a href="#">不会变化的</a></li>
</ul>
<ul class="nav">
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li><a href="#">不会变化的</a></li>
<li><a href="#">不会变化的</a></li>
<li><a href="#">不会变化的</a></li>
<li><a href="#">不会变化的</a></li>
</ul>

</body>

子选择器
子选择器只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>复合选择器之子元素选择器</title>
<style>
.nav>a {
color: red;
}
</style>
</head>

并集选择器
并集选择器可以选择多组标签，提示为它们定义相同的样式。通常用于集体声明
并集选择器是各选择器通过英文逗号链接而成，任何形式的选择器都可以作为并集选择器的一部分
/* 要求2: 请把熊大和熊二改为粉色还有小猪一家改为粉色 */
div,
p,
.pig li {
color: pink;
}
<body>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
</body>
约定的语法规范,我们并集选择器喜欢竖着写
一定要注意,最后一个选择器不需要加逗号

伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素
伪类选择器书写最大的特点是用冒号表示
链接伪类
a:link 选择所有未被访问的链接
a:visitied 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
a链接默认为蓝色
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>复合选择器之链接伪类选择器</title>
<style>
/* 1.未访问的链接 a:link 把没有点击过的(访问过的)链接选出来 */
a:link {
color: #333;
text-decoration: none;
}

/*2. a:visited 选择点击过的(访问过的)链接 */
a:visited {
color: orange;
}

/*3. a:hover 选择鼠标经过的那个链接 */
a:hover {
color: skyblue;
}

/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active {
color: green;
}
</style>
</head>

<body>
<a href="#">小猪佩奇</a>
<a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>
伪类确保生效，按照LVHA的顺序声明：:link,:visited,:hover,:active

:focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说
<style>
/* // 把获得光标的input表单元素选取出来 */
input:focus {
background-color: pink;
color: red;文字颜色
}
</style>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>