2016-07-30

前端基础问题(5)CSS选择器

CSS选择器常见的有几种?

css常见选择器有ID选择器（.id{}）、class选择器（#class{}）、标签选择器（div{}）、分组选择器（p,h1{}）、派生选择器（div h1{}）、属性选择器（input[type=“text”]{}）、伪类选择器（a:hover{}）

选择器的优先级是怎样的?

CSS样式是根据定位精准性确定优先级，定位越精准优先级越高，优先级高的会覆盖优先级低的。
CSS样式的优先级从高到低分别是

在属性后面使用 !important，会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义

class 和 id 的使用场景?

class用于网页中样式的设置，同一元素可以定义多种样式（多个class），同一class可以被应用到不同元素上（不同元素class取值一样）
id用来作为文档内某一元素的唯一标识，不可以被重复命名，且id的权重比class高很多，多用于js操作中实现元素的获取。

使用CSS选择器时为什么要划定适当的命名空间？

实现对网页结构合理的区分，比如.head、.contain、.footer，在应用样式时，可以对同一结构下的元素进行精确定位，比如.head p{};只对class=”head”下面的p元素应用此样式。

以下选择器分别是什么意思?

#header{
} **id选择器，对id=“header”下的元素定义样式**
.header{
}**class选择器，对class=“header”下的元素定义样式**
.header .logo{
}**后代选择器，对class=“header”元素下class=“logo”的元素定义样式**
.header.mobile{
}**对class="header mobile"即同时拥有这两个class取值的元素进行样式设置**
.header p, .header h3{
}**分组选择器加后代选择器，对“，”前后的元素定义样式，前面是class="header"下的p元素，后面是class="header"下的h3元素**
#header .nav>li{
}**对id="header"下的所有class=“nav”的元素的直接子元素li进行样式设置**
#header a:hover{
}**对id="header"下的所有a元素设置hover伪类选择器，即鼠标放上去的显示样式**

#header{ } id选择器，对id=“header”下的元素定义样式
.header{ }class选择器，对class=“header”下的元素定义样式
.header .logo{ }后代选择器，对class=“header”元素下class=“logo”的元素定义样式
.header.mobile{ }对class=”header mobile”即同时拥有这两个class取值的元素进行样式设置
.header p, .header h3{ }分组选择器加后代选择器，对“，”前后的元素定义样式，前面是class=”header”下的p元素，后面是class=”header”下的h3元素
#header .nav>li{ }对id=”header”下的所有class=“nav”的元素的直接子元素li进行样式设置
#header a:hover{ }对id=”header”下的所有a元素设置hover伪类选择器，即鼠标放上去的显示样式

列出你知道的伪类选择器?

:link 定义a元素未被点击链接的样式。
:visited 定义a元素已被点击链接的样式。
:active 定义鼠标已经在其上按下、还没有释放的元素样式。
:hover 定义鼠标悬停其上的元素的样式。
:nth-child(n) 定义其父元素的第n个子元素，第一个编号为1。
:first-child 定于元素的第一个子元素的样式，等同于nth-child(1)。
例子：.box>h1:first-child{}：定义.box下第一个子元素为h1的样式，如果第一个子元素不是h1则没有样式显示
:nth-of-type(n) 定义父元素下使用同种标签的元素的样式。
:first-of-type 定义父元素下使用同种标签的第一个子元素的样式，等同于:nth-of-type(1)。
例子：.box>h1:first-of-type{}：对.box下所有的h1子元素当中的第一个h1元素定义样式

:first-child和:first-of-type的作用和区别

:first-child：定义父元素下第一个元素的样式。
例子：.box>h1:first-child{}：定义.box下第一个子元素为h1的样式，如果第一个子元素不是h1则没有样式显示
first-of-type：定义父元素下同一类元素中的第一个元素的样式。
例子：.box>h1:first-of-type{}：对.box下所有的h1子元素当中的第一个h1元素定义样式

运行如下代码，解析下输出样式的原因。

> <!DOCTYPE html>
> <html>
> <head>
>   <meta charset="utf-8">
>   <title>first-child  vs first-of-child</title>
>   <style>
>     /*选中.item1,该元素是它父亲下 当前类型的 第一个孩子*/
>     .item1:first-of-type{
>       background: red;
>     }
>     
>     /*选中.item1,该元素是它父亲所有的 .item1孩子中的第一个*/
>     .item1:first-child{
>       color: blue;
>     }
> 
>   </style>
> </head>
> <body>
> 
>  <!--红色，因为该元素是item1,且是它父亲的孩子中，div类型下的第一个-->
>  <!--蓝色，因为该元素是item1,且是它父亲的孩子中的第一个-->
>  <div class="item1">111</div>
> 
>  <div class="ct">
>    
>    <!--蓝色，因为该元素是item1,且是它父亲的孩子中的第一个-->
>    <!--红色，因为该元素是item1,且是它父亲的孩子中，p 类型下的第一个-->
>    <p class="item1">222</p>
>    
>    <!--红色，因为该元素是item1,且是它父亲的孩子中，div 类型下的第一个-->
>    <div class="item1">333</div>
>    <div class="item1">444</div>
>    <div class="item2">
>      
>      <!--蓝色，因为该元素是item1,且是它父亲的孩子中的第一个-->
>      <!--红色，因为该元素是item1,且是它父亲的孩子中，div 类型下的第一个-->
>      <div class="item1">555</div>
>      
>      <div class="item1">666</div>
>    </div>
>  </div>
> </body>
> </html>

.item1:first-of-type{background: red; }：所有子元素中class=“item1”且为同类型元素当中的第一个元素。
- “111”是body下class=“item1”且为div类型的子元素中的第一个元素。
- “222”是< div class=”ct”>下class=“item1”且为p类型的子元素中的第一个元素。
- “333”是< div class=”ct”>下class=“item1”且为div类型的子元素中的第一个元素。
- “555”是< div class=”item2”>下class=“item1”且为div类型的子元素中的第一个元素
.item1:first-child{color: blue;}：所有子元素中class=”item1”中的第一个元素。
- “111”是body下class=“item1”的子元素中的第一个元素。
- “222”是< div class=”ct”>下class=“item1”的子元素中的第一个元素。
- “555”是< div class=”item2”>下class=“item1”的子元素中的第一个元素。