问答

CSS选择器常见的有几种?

• 标签选择器，标签名{}，作用于所有此标签。
• 类选择器，.class{}，在标签内定义class=""
• ID选择器，#ID{}, 在标签内定义id=""，有严格的一一对应关系
• 子选择器， .span>li{}，作用于父元素span类下一层的li标签
• 包含选择器，.span li{}，作用于父元素span下所有li标签
• 通用选择器，*{}，匹配所有html的标签元素
• 伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色

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

• 总体上 CCS每个选择器本身具有优先级，越具体优先级越高
• 从高到低：
  1. 属性后面加!important会覆盖页面内任何位置定义的元素样式
  2. 作为style属性写在元素标签上的内联样式
  3. id选择器
  4. 类选择器
  5. 伪类选择器
  6. 属性选择器
  7. 标签选择器
  8. 通配符选择器
  9. 浏览器自定义的样式
• 使用多级选择器时
  • id选择器的权值为1000，class选择器为100，标签选择器为10，做一下加法运算（当然只是为了形象这么说，一万个class选择器加起来也不如一个id选择器优先级高）

test p.class1 {...}

test .class1.class2 {...}

    - 第一种 就是1000+10+100=1110
    - 第二种 1000+100+100=1200
    - 所以第二种会生效
- 当class样式同级的时候 在style或者 css中 写在后面的会覆盖前面的样式

###class 和 id 的使用场景?
- class定义的样式可以被多个元素所引用，而id只能被一个元素所引用。所以class更多用在比id更加通用的情况。在CSS中尽量不使用ID，因为id的私有度很高，非常容易导致问题。最好的办法不是运用定位器通过亲元素定位到某元素，而是直接给需要添加样式的元素一个class。
- 在 HTML 里 ID 可以用于 JS 以及锚点定位，但是在 CSS 里只要用 class，一个 ID 也不要用。
- 部分引用 [编写可维护的CSS](https://segmentfault.com/a/1190000000388784)

###使用CSS选择器时为什么要划定适当的命名空间？
- 保持可维护性
- 在使用CSS选择器的时候回大量使用class命名定位，尽量保持名字设定的准确简短。

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

``` HTML
#header{  
}   /* id选择器 定位到id="header"*/
.header{
}   /* class选择器 定位到 class="header"*/
.header .logo{
}   /* 定位到header下的所有logo类*/
.header.mobile{
}   /* 多元素选择，同时定位header类和mobile类下，*/
/*  id和class选择器和选择器连写的时候中间没有分隔符， . 和 # 本身充当分隔符的元素 */
.header p, .header h3{
}   /* 多元素选择器，定位header类下的所以p标签和所以h3标签*/
#header .nav>li{
}   /* 定位到id为header下的 所有nav类下的直接子元素的所有li标签 */
#header a:hover{
}   /* 定位到header id下的所有a标签的伪类hover */

列出你知道的伪类选择器

• 常用的伪类选择器
  • hover 匹配当鼠标移动到元素上时的样式
  • active 匹配鼠标点住元素时的样式
  • focus 匹配元素成为焦点的时候的样式

伪类	作用
E:first-child	匹配元素E的第一个子元素
E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:active	匹配鼠标已经其上按下、还没有释放的E元素
E:hover	匹配鼠标悬停其上的E元素
E:focus	匹配获得当前焦点的E元素
E:lang(c)	匹配lang属性等于c的E元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbox元素
E::selection	匹配用户当前选中的元素
E:root	匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child	匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty	匹配一个不包含任何子元素的元素，文本节点也被看作子元素
E:not(selector)	匹配不符合当前选择器的任何元素

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

• E:first-child 匹配E的父元素下的所有元素中第一个子元素，若为E，则生效；
  E:first-of-type 匹配E的父元素下所有使用**同种标签 **的第一个子元素，等同于:nth-of-type(1)

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

<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{color: red;} 匹配的是class="item1"的父元素（也就是ct类的div）下的第一个元素，也就是p标签的“aa”，且这个元素的类是.item1的时候（它正好是），这个样式生效，p标签的字体变为红色。
• item1:first-of-type:background:blue匹配的是class="item1"的父元素（也是ct类的div）下，所有类型标签下的第一个，且class="item1"的元素。

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

• text-align作用在块级元素上，能让块级元素内的行内元素水平居中。

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

• 使用caniuse.com 查询相应关键词。

---

本教程版权归 张宇 和 饥人谷 所有，转载需要说明来源