css复合选择器
【摘要】 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器</title>
<style>
/* 在css中，把选择器的类型分为基础选择器和复合选择器，复合选择器是建立在基础选择器智商高，对基本选择器进行组合而成的 */
/* 1.复合选择器可以更准确，更高效的选择目标元素
2.复合选择器是由两个或多个选择器，通过不同的方式组合而成的
3.常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等等*/
/* 2.1.1后代选择器（非常重要） */
/* 我想要把ol里面的小li选出来改为pink */
/* 元素1 元素2 {
样式声明
} */
ol li {
color: pink;
}
/* 2.1.2子元素选择器 */
.nav>a {
color: red;
}
/* 2.1.3并集选择器 */
/* 并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明
1. */
div,
p {
/* div,p意思就是把div和p里的内容改为粉色 */
color: pink;
}
div,
p .haha li {
color: pink;
/* 并集选择器喜欢竖着写 */
}
/* 2.1.4伪类选择器 */
/* 伪类选择器用于向某些选择器添加效果，比如给链接添加特殊效果，或选择第一个，第n个元素
1.伪类选择器书写最大的特点是用冒号(:)表示，比如：hover:first-child
2.因为伪类选择器很多，比如有链接伪类，结构伪类，所以我们先开始学习常用的链接伪类选择器*/
/* 2.1.5链接伪类选择器 */
/* a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接） */
a:link {
color: #333;
/* 想要取消下划线 */
text-decoration: none;
}
a:visited {
color: rgb(43, 156, 128);
}
a:hover {
color: plum;
}
a:active {
color: powderblue;
}
/* 书写顺序按照LVHA来书写 */
/* 2.1.6founs 伪类选择器 */
/* :focus 伪类选择器获得焦点的表单元素
焦点就是光标，一般情况下input类表单元素才能获取，因此这个选择器也主要针对于表单元素来说 */
input:focus {
background-color: yellow;
}
</style>
</head>
<body>
<ol>
<li>我是ol的孩子</li>
</ol>
<ul>
<li>我是ul的孩子</li>
</ul>
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
<div>哈哈</div>
<p>哈哈2</p>
<div class="haha">
<ul>
<li>嘿嘿</li>
</ul>
</div>
<a href="#">是她是她</a><br>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）