Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:总结的很好,条理清晰,看得出很认真,只是,下次可以再https://www.php.cn/member/courses/work.html中提交作业
CSS中的上下文选择器常用的,主要有4种
>
表示空格
表示+
号表示~*
表示(1)在CSS中用3个非负整数表示选择器的区中,格式为(x,y,z),其中x,y,z三个数的取值为0或者正整数;
(2)权重规则:
例1:下面的选择器h1,其权重为(0,0,1):
<style>
h1 {
color:red;
}
</style>
例2:下面的选择器的权重是多少呢?
<sytle>
header.top h1.title div#active {
color:red;
}
</sytle>
(1)对于同一位置的css样式,位置在后的CSS样式优先级高于位置靠前的CSS的优先级,例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>
h1 {
font-size:x-large;
}
/* 下面的优先级高于上面的 */
h1 {
font-size:x-small;
}
</style>
</head>
<body>
<!-- 1.只能识别1个style,且只能识别和渲染第一个style的内容 -->
<h1 style="color:red;" style="color:blue">php中文网</h1>
<!-- 2.最后写的属性优先级高于之前写的属性 -->
<!-- 即最后写的color属性,将覆盖第一个color属性,并最终被渲染出来,也就是同一位置,最后写的要覆盖之前写的属性 -->
<h1 style="color:red;color:blue;" >php中文网</h1>
</body>
</html>
(2) 根据CSS样式在渲染hmtl时候出现的位置,可以将CSS分为
style=
中的样式;<style></style>标签中的css样式
,通常位于<header></header>
标签中;<link rel="sylesheet" href="css文件的url">
引入的文件(3)第三种判断方式:根据选择器的权重来判断。由于根据DOM模型来区分优先级有时候比较麻烦,而且不利于后期维护。所以我们也可以采用为新css样式的选择器提权,即增加权重的形式来达到浏览器优先渲染的目的。
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<sytle>
.col-md-6 {
color:red;
}
</sytle>
</head>
<body>
<!-- <h1>hello world</h1> -->
<div class="col-md-6 ">header</div>
</body>
</html>
分析:我们可以通过为div标签增加class
属性,从而在制作div盒子CSS选择器的时候,通过链式语法,增加div盒子的css的权重。如,上例修改为:
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<sytle>
.col-md-6.omg {
color:blue;
}
.col-md-6 {
color:red;
}
</sytle>
</head>
<body>
<div class="col-md-6 omg ">header</div>
</body>
</html>
.col-md-6 {color:red;}
的位置要更加往后,但是其选择器的优先级,低于.col-md-6.omg{color:blue;}
,所以div盒子内容的字体最终呈现为蓝色class
的链式语法,例如.list > .li.first{backgroun-color:lightgreen}
;nth-of-type(an + x)
的形式,语法为ele.nth-of-type(an+x)
,其中an+b
最终计算的结果必须是合法有效的,范围为1到最后一个元素的序号。