id选择器:
id选择器的用法:
定义:
注意:id定义是不能重复
<标签 id="id名"></标签>
选择器:
设置该id对应的标签中的内容。
#id名{
属性;
属性;
......
}
class选择器:
定义:
class选择器可以重名(一次设置好几个),可以重名,且不能以数字开头。
<标签 class="class名"></标签>
选择器:
设置该class对应的所有的标签中的内容。
.class名{
属性值;
属性值;
......
}
交集选择器:
用法:
假设有定义如下的标签:
<p class="p1" id="pp1">hello!</p>
<p class="p1">hello!</p>
使用:
.p1#pp1{/*(各个选择器不分隔)*/
width: 500px;
background-color: aquamarine;
}
可以修class=p1,且id=pp1的标签的内容,只满足其中一个的不会被修改。
并集选择器:
用法:
假设有定义如下的标签:
<p class="p2">hello!</p>
<p class="p3">hello!</p>
使用:
.p2,.p3{/*使用 , 分割*/
background-color: coral;
}
可以修class=p2,和class=3的标签的内容。
后代选择器:
用法:
假设有定义如下的标签:
<div id="box2">
<p>onen404</p>
</div>
用法:
#box2 p{/*与后低标签之间用空格隔开,即修改box中的p标签中的内容*/
color: red;
}
子类选择器:
假设有定义如下的标签:
我们想要只修改div中p的属性,即修改onen的属性,就可以用到子类选择器:
<div id="box1">
<p>onen</p>
<div>
<p>onen112</p>
</div>
</div>
用法:
#box1>p{/*仅修改onen的样式即仅修改子辈的属性*/
color: blue;
}
伪类选择器
伪类选择器:(使用时需要按照以下顺序)
a:link{属性: 属性值;}超链接的初始状态
a:visited{属性:属性值;}超链接被访问后的状态
a:hover{属性:属性值;}鼠标悬停,鼠标划过超链接的状态
a:active{属性:属性值;}超链接被激活时的状态,即鼠标按下时超链接的状态
用法:
a:link{
color: red;
}
a:visited{
color: aquamarine;
}
a:hover{
color: darkgoldenrod;
}
a:active{
color: pink;
}