css-2.选择器

一、选择器

优先级关系：元素选择器<类选择器<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"/>