一、选择器
优先级关系:元素选择器<类选择器<id选择器1、通用选择器,用一个星号(*)
特点:写在*里的样式会给页面中所有的元素都用一遍
缺点:慎用,降低css样式的效率
2、元素选择器
html文档的元素就是选择器
eg:<p> 、 <h1>等
3、类选择器
.blue {
color: blue;
}
限定元素p调用blue的字体大小
p.blue {
font-size: 20px;
}
<p class="blue">标题一</p>
<h1 class="blue">标题一</h1>
4、id选择器
仅用于id属性的值
#red {
color: red;
}
<h1 id="red">标题四</h1>
5、群组选择器
h1,h2,.red {
color:red ;
}
6、后代选择器
eg:用空格标识,表示p标签下的span的样式
p span{
color: green;
}
<p class="blue">标<span>题</span>题一</p>
eg:不管是子代还是孙代都可以
div span {
color: green;
}
<div>
<p>这是<span>第三</span>级</p>
<span>这是第二级</span>
</div>
7、子代选择器
eg:用>表示,只有子代可以,孙代及后面的都不行
div>span{
color: green;
}
8、伪类选择器
使用冒号(:)作为结合符,结合符左边是其他选择器,右边是伪类
·选择器:伪类选择器
css伪类选择器分为:
-连接伪类
:link,适用于尚未访问的连接
:visited,适用于访问过的连接
eg:
a:link{
color: green;
font-size: 16px;
}
a:visited {
color: red;
font-size: 20px;
}
<a href="login.html">访问过连接</a>
<a href="javascript:;">未访问过连接</a>
-动态伪类
用于呈现用户操作
:hover,适用于鼠标悬停在html元素时
h1:hover {
color: purple;
background-color: yellow;
}
:active,适用于html元素被激活,就是点击的时候
h1:active{
background-color: brown
}
:focus,适用于html元素获取焦点时
input:focus {
color: red;
border: 2px solid blue;
}
<input type="text"/>