
批改状态:合格
老师批语:
1、文档样式大于外部样式
<style>
body{
background-color: lightcoral;
}
</style>
2、权重的具体对比
<ul>
<li>权重(0,0,0)</li>
<li>权重(0,0,1)</li>
<li>权重(0,0,2)</li>
<li class="title">权重(0,1,0)</li>
<li class="title">权重(0,1,1)</li>
<li id="active" class="title">权重(1,1,2)</li>
<li id="active" class="title">权重(1,1,2)</li>
</ul>
/* 下面对li来比较 */
/* 权重:(0,0,0) */
ul{
color: blue;
}
/* 权重:(0,0,1) */
li{
color: violet;
}
/* 权重:(0,0,2) */
ul li{
color: brown;
}
/* 权重:(0,1,0) */
.title{
color: lightgreen;
}
/* 权重:(0,1,1) */
li.title{
color: lightblue;
}
/* 权重:(0,1,2) */
ul li.title{
color: red;
}
/* 权重:(1,1,1) */
li#active.title{
color: lightseagreen;
}
/* 权重:(1,1,2) */
ul li#active.title{
color: yellowgreen;
}
结论:(0,0,0)<(0,0,1)<(0,0,2)<(0,1,0)<(0,1,1)<(0,1,2)<(1,1,1)<(1,1,2)
li{
color: black!important;
}
以:开头
<!-- 结构伪类 -->
<ul class="main">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ul>
1、:nth-of-type(n) 表达式
/* nth-of-type(n) */
.main>li:nth-of-type(1){
background-color: blue;
}
.main>li:nth-of-type(4){
background-color: red;
}
.main>li:first-of-type{
background-color: blue;
}
.main>li:last-of-type{
background-color: red;
}
2、 :nth-of-type(an+b) 表达式
/* nth-of-type(an+b) */
/* 匹配一个,a=0 ,n=[0,1,...],b*/
.main>li:nth-of-type(2){
background-color: blue;
}
/* 匹配一组, a=1, n=[0,1,2...],b=[1,2,3..] */
.main>li:nth-of-type(1n){
background-color: red;
}
.main>li:nth-of-type(n){
background-color: red;
}
.main>*{
background-color: red;
}
/* 匹配第3个元素后面的所有兄弟元素 */
.main>li:nth-of-type(n+3){
background-color: red;
}
/* 取前3个与后三 a=-1 */
.main>li:nth-of-type(-n+3){
background-color: red;
}
.main>li:nth-last-of-type(-n+3){
background-color: red;
}
/* odd: 奇数, even: 偶数 */
.main>li:nth-of-type(odd){
background-color: red;
}
.main>li:nth-of-type(even){
background-color: blue;
}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号