后代选择器(重点),子选择器,交集选择器,并级选择器(重点)
<!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>Document</title>
</head>
<style>
/*后代选择器 */
div a {
color: red;
}
/* 子代选择器 */
div>strong {
color: red;
}
/*交集选择器p */
p.red {
color: red;
}
/*并集选择器 */
/* p {
color: red;
}
span {
color: red;
} */
p,
span {
color: red;
}
</style>
<body>
<!--
后代选择器div a 子孙后代
子代选择器div>strong 亲儿子
交集选择器p.red 既是p标签 又是.red类选择器
并集选择器p, span p和span 应用相同样式,通常用于集体声明
-->
<div>
<a href="">内部链接</a>
<a href="">内部链接</a>
<a href="">内部链接</a>
</div>
<a href="">外部链接</a><a href="">外部链接</a><a href="">外部链接</a>
<div><strong>儿子</strong></div>
<div>
<p><strong>孙子</strong></p>
</div>
<p class="red">红色</p>
<p class="red">红色</p>
<p class="red">红色</p>
<div class="red">红色</div>
<div class="red">红色</div>
<div class="red">红色</div>
<P>红色</P>
<P>红色</P>
<P>红色</P>
<span>红色</span><span>红色</span><span>红色</span>
<div>红色</div>
<div>红色</div>
<div>红色</div>
</body>
</html>
权重问题可从 继承性(有继承性的属性有font- ,line-,color),层叠性, 就近原则这三方面来讲
<!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>css 权重问题可从 继承性,层叠性, 就近原则这三方面来讲</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 200px;
height: 200px;
background: pink;
/* 拥有继承性的属性 */
color: red;
font-size: 24px;
line-height: 200px;
}
p {
/* 层叠性 也可说明继承的权重是0 */
color: blue;
}
</style>
</head>
<body>
<div class="box">
<p>son 123</p>
</div>
</body>
</html>