CSS选择器

1. CSS选择器常见的有几种?基础选择器
   1. 基础选择器：
      a.id选择器:可以为标有特定 id 的 HTML 元素指定特定的样式,以''#''来定义；
      b.class选择器:选择有相同class的元素指定特定样式，以''.''显示；
      c.element选择器：可以为某类标签指定特定样式。
   2. 组合选择器：
      a.多元素选择器(E,F):用'',''分隔，同时匹配元素E或元素F;
      b.后代选择器(E F):用空格分隔，匹配E元素所有的后代(不只是子元素、子元素向下递归）元素F;
      c.子元素选择器(E>F):用>分隔，匹配E元素的所有直接子元素;
      d.直接相邻选择器(E+F):匹配E元素之后的相邻的同级元素F;
      e.普通相邻选择器(E~F):匹配E元素之后的同级元素F(无论直接相邻与否);
      f.'.class1.class2/element#id' :id和class选择器和选择器连写的时候中间没有分隔符，''. ''和 ''#''本身充当分隔符的元素;
   3. 属性选择器：
      a. E[attr]匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div;
      b. E[attr = value]匹配属性attr值为value的元素，div[id=test],匹配id=test的div;
      c. E[attr ~= value]匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素;
      d. E[attr ^= value]匹配属性attr的值以value开头的元素;
      e. E[attr $= value]匹配属性attr的值以value结尾的元素;
      f. E[attr *= value]匹配属性attr的值包含value的元素;

   4. 伪类选择器:

      
      Paste_Image.png

   5. 伪元素选择器

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

!important>内联样式>id选择器>类选择器>伪类选择器>属性选择器>标签选择器>通配符选择器>浏览器自定义

3. class 和 id 的使用场景?

   • 同一个class可以用于多个标签属性的设置，id只适用于某一个标签属性的设置；
   • class在css样式中以“.”来开头命名，而id在CSS样式定义的时候 以“#”来开头命名；
   • 出现重复定义时id的优先级高于class。
     对于页面上一个仅出现一次的标记，使用id会更合适。对于页面中出现次数较多又可以统一设置样式的标签可以用class。

4. 使用CSS选择器时为什么要划定适当的命名空间？
   增加代码的可读性，便于后期维护修改。

5. 以下选择器分别是什么意思?
   #header{}：选择id为header的元素；
   .header{}：选择class为header的元素；
   .header .logo{}：选择class为header元素下面所有后代中的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的所有子元素a标签的hover状态。

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

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

:first-child:选择父元素下第一个子元素；
:first-of-type:选择父元素下使用同种标签的第一个子元素。

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

   
   Paste_Image.png

:first-child定义class为item1的 元素第一个子元素字体颜色为红色；
:first-of-type：定义class为item1的元素中p标签和h3标签中各自第一个子元素背景色为蓝色。

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

定义元素文本居中，只运用于块级元素中。

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

可以使用Can I use查询