CSS选择器

1 . 常见的CSS选择器

基础选择器：
通用元素选择器，匹配页面所有元素。#id
id选择器，匹配特定id的元素。.class
类选择器，匹配所有特定class的元素。element
标签选择器，匹配特定元素。

组合选择器，对选择器进行分组，选择被分组的选择器对应的元素。E, F
多元素选择器，同时匹配E和F元素。E F
后代选择器，匹配E的所有后代F。E>F
子元素选择器，匹配E的所有直接子元素F。E+F
直接相邻选择器，匹配E元素之后的相邻的同级元素F。E~F
普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）。

属性选择器，以元素的某个属性作为选择元素的依据。E[attr]
匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div。E[attr = value]
匹配属性attr值为value的元素，例如div[id=test]，匹配id=test的div。E[attr ~= value]
匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素。E[attr ^= value]
匹配属性attr的值以value开头的元素。E[attr $= value]
匹配属性attr的值以value结尾的元素。E[attr *= value]
匹配属性attr的值包含value的元素。

伪类选择器：E:link
匹配所有未被点击的链接。E:hover
匹配鼠标悬停其上的E元素。E:active
匹配鼠标已经其上按下、还没有释放的E元素。E:visited
匹配所有已被点击的链接。E:focus
匹配获得当前焦点的E元素。E:checked
匹配表单中被选中的radio或checkbox元素。E:first(last)-child
匹配父元素的第一个(最后一个)子元素。E:first(last)-of-type
匹配父元素下使用同种标签的第一个(最后一个)子元素。

2 . 选择器的优先级是怎样的

• !important > 标签内样式 > id选择器 > 类选择器 > 伪类选择器 > 属性选择器 > 标签选择器 > 通配符选择器 > 浏览器默认样式
  选择器的优先级从高到低分别是：
  !important ,在属性后面使用会覆盖页面内任何位置定义的元素样式。
  内联样式，作为style属性写在元素标签上的，例如<span style="color:#444;">设置行内样式</span>
  id选择器，例如#id{}
  类选择器，例如.class{}
  伪类选择器，例如:link{}
  属性选择器，例如input[type="text"]{}
  标签选择器，例如p{}
  通配符选择器，例如*{}
  浏览器自定义选择器

3 . class 和 id 的使用场景

• class 用于主区块里面的详细内容，同一个class可以重复出现，一个标签可以有几个不同的class。class对应的css命名以“.”开头
• id多使用于主要块级元素，id一个页面中只能出现一次，有些独一无二的元素也可使用id。id对应的css命名通常以“#”开头

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

这是代码语义化的一种体现，是为了更好地匹配我们特定需要匹配的元素，只对匹配的元素生效，保证代码样式在合理的控制内不出现不必要的错误

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

#header{
}
//选择id名为header的元素
.header{
}
//选择class名为header的元素
.header .logo{
}
//选择class名为header的元素下的class名为logo的元素
.header.mobile{
}
//选择class名同时为header和mobile的元素
.header p, .header h3{
}
//选择class名为header的元素下的p和class名为header的元素下h3
#header .nav>li{
}
//选择id名为header的元素下的class名为nav的直接子元素li
#header a:hover{
}
//选择id名为header的元素下的a在鼠标划过时的样式

6 . 列出你知道的伪类选择器

E:link设置超链接a在未被访问前的样式（特指a标签）
E:visited 设置超链接a其链接地址已被访问过的样式（特指a标签）
E:hover 设置鼠标悬停在元素上的样式（不限于a标签）
E:active 设置元素在鼠标按下时的样式（不限于a标签）
E:not(s) 匹配不含有s选择器的元素E
E:first-child 父元素的第一个子元素
E:last-child父元素的最后一个子元素 E
E:only-child E元素是唯一的子元素时被匹配
E:nth-child(n) 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。
E:first-of-type 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。
E:empty 匹配没有任何子元素（并且不包括空格、回车）的元素E
E:checked 匹配用户界面上处于选中状态的元素 E。(用于 input type 为 radio 与 checkbox 时)
E:enabled 匹配用户界面上处于可用状态的元素E。
E:disabled 匹配用户界面上处于禁用状态的元素E。
E:target 匹配相关URL指向的E元素。
E:root匹配E元素在文档的根元素。在HTML中，根元素永远是HTML。

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

• :first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
• :first-of-type 匹配的是某父元素下相同类型子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

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>

.item1:first-child 当div中的第一个子元素的class="item1"时，样式有效，所以内容 aa 为红色。.item1:first-of-type 选择的是不同标签的第一个class="item1"的元素，并且标签p和h3都有class="item1"的元素，所以内容aa和bb的背景为蓝色。

9 .text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

文字居中或者让inline-block居中，一般作用在块级元素上或者inline-block上，能让块级元素里的文字和inline-block元素居中，能让inline-block里的文字居中。

10 . 如果遇到一个属性想知道兼容性，在哪查看?

可以在Can I Use网站查看http://caniuse.com