CSS选择器

css选择器常见的有哪几种？

• *通用元素选择器
  * {
  font-size:14px;
  }
• #idid选择器,匹配特定的id元素
  #id{
  color:red:
  }
• .class类选择器，匹配特定类的元素
  .class{
  background-color:blue;
  }
• element 标签选择器
  p{
  line-height:20px;
  }
• 组合选择器
• 属性选择器
• 伪类选择器

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

• 优先级从高到低分别为

1. 在属性后面使用!important会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器默认

• 多个选择器时,对每个选择器的优先权值做加法运算

1. 权重高的优先
2. 相等时后面的优先

class和id的使用场景?

• id 页面中是独一无二的使用，例如页脚等
• class 一些有相同的特定样式的标签，可以给他们添加一个同样的class，将相同的部分定义出来。

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

• 更好的匹配需要特定匹配的元素，避免样式污染，使后期的维护更加容易

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

• #header{} id选择器，选择为id名为header的元素。
• .header{} class选择器，选择class名为header的元素。
• .header .logo{} 选择class名为header的元素中class名为logo的子元素。
• .header.mobile{}选择class为header和mobile的元素。
• .header p, .header h3{}选择class为header的子元素p和h3元素。
• #header .nav>li{}选择id为header的元素中class为nav的元素的直接子元素li。
• #header a:hover{} 选择id为header的元素中啊标签鼠标悬停时的样式。

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

• E:hover 匹配鼠标悬停其上的E元素。
• E:active 匹配鼠标已经在其上按下还没有放手的E元素。
• E:focus 匹配获得当前焦点的E元素。
• E:link 匹配所有未被点击的链接。
• E:visited 匹配所有已经被点击的链接。

:first-child和:first-of-type有什么作用和区别？

• :first-child 匹配父元素下的第一个子元素。
• :first-of-type 匹配父元素下同种标签的第一个子元素。
  Paste_Image.png

运行如下代码，解释输出样式的原因？

Paste_Image.png

• .item1: first-chlid { color: red; }表示：class="item1"的父元素class="ct"下的第一个子元素的颜色为红色，即段落aa为红色。
• .item1: first-of-type { background: blue; }表示：class="item1"的父元素class="ct"下相同类型元素的第一个元素背景色为蓝色，即不再强调一定是其子元素的第一个，也就是说aa为<p>标签下的第一个元素，bb为<h3>标签下的第一个元素，它们两者是不同标签的第一个元素，所以两者的背景都是蓝色

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

• 定义行内内容（例如文字、span元素）如何相对它的块父元素对齐。作用是将文本在水平方向上居中。作用在块级元素上，让行内元素水平居中。

如果遇到一个元素想知道他的兼容性，在那里看？

• Can I Use上查看。