CSS选择器那些事儿

2017-01-18 本文已影响0人阿伦的前端成长之路

关于选择器的那些事儿

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背景刷新为蓝色