Day 13
1. 选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 后代选择器 */
body #three{
color:aqua;
}
/* 兄弟选择器 */
#one ~ #two{
font-size: 20px;
}
/* 相邻兄弟选择器 */
#one + li{
text-decoration: darkred;
}
</style>
</head>
<body>
<ul>
<li id="one">妲己</li>
<li>庄周</li>
<li id="two">安琪拉</li>
<li id="three">小乔</li>
</ul>
<ol>
<li id="three"></li>
<li></li>
<li></li>
</ol>
</body>
</html>
运行结果
2. 选择器的优先级
<!--
样式优先级问题:
优先级和选择器相关
第1级: 属性后面添加!important
第2级: 内联样式
其他的任何样式都小于这两级,优先级看权重,权重越大,优先级越高
* ------ 1
标签选择器 ------ 1
class选择器 ------ 2
id选择器 ------ 4
父子、后代、兄弟、相邻兄弟 ------ 看符号之间各个选择器的权重和,但是先看符号前边的,如果前边的相等,再比较后边的
如果权重相等,最后写的谁实现的就是谁
但是,如果权重不一样,但是都是修改的一个标签,那么不重叠的样式都会实现
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* .p1{
color:pink;
text-decoration: underline;
}
#p1{
color:blue;
} */
div > span > p{
color: purple;
}
.d1 > .s1 > p{
color: aqua