选择器
(权重:写在后面的优先)
类选择器
类选择器命名:不建议写特殊字符,不以数字开头,常用选择器
<style type="text/css">
<!--类选择器命名:不建议写特殊字符,不以数字开头,常用选择器-->
.one{
font-size:50px;
}
.two{
color:red;
}
<!--类选择器-->
<span class="one">展示</span><br>
<span class="one">展示</span><br>
<span class="one two">展示</span><br>
10.9.2 id选择器
id名不允许重复,唯一性–>
<style type="text/css">
#name1{
color:yellow;
}
#name2{
font-size: 50px;
}
</style>
<!--id选择器-->
<!--id名不允许重复,唯一性-->
<span id="name1">展示</span><br>
<span id="name2">展示</span><br>
<span id="name1">展示</span>
层级选择器–>
<style type="text/css">
ul li a{
color:red;
}
</style>
<style type="text/css">
ul.father li.son{
font-size:60px;
}
</style>
<ul class="father">
<li><a>展示1</a></li><br>
<li class="son">展示2</li><br>
<li>展示3</li><br>
</ul>
并集选择器
<style type="text/css">
div,p{
font-size:50px;
}
</style>
<div>展示1</div><br>
<span>展示2</span><br>
<p>展示3</p><br>
指定标签选择器
<style type="text/css">
div.new{
font-size:50px;
}
</style>
<div class="new">展示1</div><br>
<span>展示2</span><br>
伪类选择器
<style type="text/css">
div::after{
content:"python,java,color:#000;" ;
color: aqua;
}
div::before{
content: "计算机:";
color: yellow;
}
</style>
<!--伪类选择器-->
<div>编程语言:</div>