关于选择器的那些事儿
1.class 和 ID的使用场景
class 对应具有相同样式的html元素使用，可重复使用
id一般像身份证一样对于html元素是唯一的，一般使用一次，适合在页面外层布局中使用
2.CSS常见的选择器
- 1.id选择器
<style>#box{font-size:20px;}</style>
<div id="box">haha</div>
- 2.class选择器
<style>.box{font-size:20px;}</style>
<div class="box">haha</div>
- 3.标签选择器
<style>div{font-size:20px;}</style>
<div class="box">haha</div>
- 4.全部选择器
<style>*{font-size:20px;}</style>
<div class="box">haha</div>
<div class="box">haha</div>
- 5.派生选择器 （选择元素下的子元素）
<style>.box p{font-size:20px;}</style>
<div class="box"><p><p>haha</p></p></div>
<div class="box">haha</div>
- 6.子代选择器 （选择元素下直接元素）
<style>.box >p{font-size:20px;}</style>
<div class="box"><p>haha</p></div>
<div class="box">haha</div>
- 7.伪类选择器 (标签，class后面加伪类)
3.选择器的优先级和计算优先级的方式
-- 1.优先级（从高到低排列）
-- 在属性后面有！import的元素样式
-- 作为style写在元素中的内联样式
-- id选择器
-- class选择器
-- 标签选择器
-- 相邻选择器
-- 子代选择器
-- 后代选择器
-- 统配符选择器
-- 属性选择器
-- 伪类选择器
-- 2.计算方式：
行内样式 标记为a
id选择器 标记为b
类，属性标记为c
标签 伪类选择器标记为d
从a到d分别计算，级别越高的字母得到的统计值越高越优先，统计值相同则向下迭代比较
4.a:link a:hover, a:active,a:visited 的顺序应该为？
正确顺序应为：a：link a：visited a:hover a:active
原因： -- 1.当选择器优先级别相同时，后定义的会覆盖先定义的
-- 2.以此类推，当鼠标经过未访问链接，同时有link和hover属性，
由于后定义的覆盖先定义的，所以hover在后面
-- 3.以此类推，当鼠标经过已访问链接，同时有visited和hover属性，
由于后定义的覆盖先定义的，所以hover在link和visited后面
5.以下例子中的选择器是什么意思？
屏幕快照 2017-01-18 下午4.01.56.png
- .#header{}：匹配Id=header的元素
- header{}:匹配类class=header的元素
- header .logo{}：
匹配类为header元素的后代元素中类为logo的元素 - header.mobile{}：
匹配类名包含header和mobile的元素，如class = 'beader mobile' - header p, .header h3{}：
匹配两个类型的元素（并集，‘或’关系），类型1是header类的后代p标签，类型2是header类的后代h3标签 - -#header .nav>li{}：
匹配id为header的后代中，类名为nav的直接子元素中，的li标签 - .#header a:hover{}：
匹配id为header的后代a标签在hover状态（鼠标悬停其上）下的样式 - .#header .logo~p{}：
匹配id为header的后代中，类名为logo的元素之后的同级元素中，的p标签 - .#header input[type="text"]{}
id为header的后代中，input标签中，属性type的值为"text"的元素集合
6.列出你知道的伪类选择器
| 选择器名称 | 用途 |
|---|---|
| E:first-child | 匹配元素E的第一个子元素 |
| E:nth-child | 匹配元素E的第n个子元素 |
| E:enabled和E:disabled | 匹配元素E的状态为可用/不可用 |
| E:checked和E:selection | 匹配元素E的状态为单选框选中/复选框选中 |
| a:link | 未被点击的链接 |
| a:visited | 已被点击的链接 |
| a:hover | 鼠标悬停其上的链接 |
| a:active | 鼠标已经按下，但没有释放的链接 |
7.div:first-child和div:first-of-type的作用和区别
div:first-child：父元素的第一个子元素且必须符合指定类型（为div）
div:first-of-type：父元素中的第一个div元素
exp:
<body>
<p>title</p>
<div>haha</div>
<div>hehehe</div>
</body>
div:first-child:为无效
div:first-of-type：指向haha
8.指出下面代码的效果并解释
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
屏幕快照 2017-01-18 下午4.22.16.png
- 现象解释
item1:first-child ：.item1的元素为 <p class="item1">aa</p>、<h3 class="item1">bb</h3>、<h3 class="item1">ccc</h3>，这三个元素的父元素为<div class="ct">，第一个子元素为<p class="item1">aa</p>,所以aa为红色
.item1:first-of-type：item1的元素为 <p class="item1">aa</p>、<h3 class="item1">bb</h3>、<h3 class="item1">ccc</h3>，这三个元素的父元素为<div class="ct">，首次出现的类型为p和第一个h3标签，所以aa和bb背景刷新为蓝色
网友评论