标签：color 复合 链接 青春 red 能量 选择器 CSS
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。
1. 后代选择器
后代选择器又称为包含选择器
作用：用来选择元素或元素组的子孙后代
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。
父级 子级{属性:属性值;属性:属性值;}语法：
.class h3{color:red;font-size:16px;}当标签发生嵌套时，内层标签就成为外层标签的后代。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li {
color: red;
}
ol li {
color: green;
}
.demo1 ul li {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>青春正能量</li>
<li>青春正能量</li>
<li>青春正能量</li>
</ul>
<ol>
<li>青春正能量</li>
<li>青春正能量</li>
<li>青春正能量</li>
</ol>
<div class="demo1">
<ul>
<li>青春正能量</li>
<li>青春正能量</li>
<li>青春正能量</li>
</ul>
</div>
</body>
</html>
2. 子元素选择器
作用：子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
语法：
.class>h3{color:red;font-size:14px;}示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div>p {
color: red;
}
</style>
</head>
<body>
<div>
<p>青春正能量1</p>
<p><a href="#">青春正能量2</a></p>
</div>
<div>
<p><a href="#">青春正能量3</a></p>
</div>
<div>
<p>青春正能量4</p>
</div>
</body>
</html>
3. 并集选择器
如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。
并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。
任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。
并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为 和的意思。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,
span,
.demo li {
color: red;
}
</style>
</head>
<body>
<div>青春正能量1</div>
<p>青春正能量2</p>
<span>青春正能量3</span>
<ul>
<li>青春正能量4</li>
</ul>
<ol class="demo">
<li>青春正能量5</li>
</ol>
</body>
</html>
4. 链接伪类选择器
用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
伪类选择器很多，比如链接伪类，结构伪类等等。
-
a:link /* 未访问的链接 */
-
a:visited /* 已访问的链接 */
-
a:hover /* 鼠标移动到链接上 */
-
a:active /* 选定的链接 */
注意
-
写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。否则可能引起错误。
一般上面4个不全用，一般写法如下：
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link {
color: #333;
/*取消下划线*/
text-decoration: none;
}
/*已经访问的链接 我们点击过*/
a:visited {
color: orange;
}
/*鼠标经过链接时候的状态*/
a:hover {
color: red;
}
/*当我们点击的时候（按下鼠标，别松开的时候）*/
a:active {
color: green;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
这儿除了链接a可以用伪类选择器，别的标签也是可以的！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*鼠标经过链接时候的状态*/
p:hover {
color: red;
}
</style>
</head>
<body>
<p>哈哈</p>
</body>
</html>5. :focus伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input:focus {
/* 把获得光标的input表单选取出来 */
background-color: pink;
color: red;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
标签：color,复合,链接,青春,red,能量,选择器,CSS 来源： https://blog.csdn.net/weixin_44799217/article/details/122430593
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。