第八弹-CSS选择器

一、CSS选择器常见的有几种?

常见选择器有如下几种：

1. 基础选择器：

基础选择器

2. 组合选择器：

组合选择器

3. 属性选择器：

属性选择器

4. 伪类选择器：

伪类选择器

5. 伪元素选择器：

伪元素选择器

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

当同一个元素在多个不同的地方定义不同的属性值，那么最后渲染的样式效果以哪里定义为准，这就涉及到优先级问题，除了每个选择器有规定的优先级外，基本规则是规定属性越具体优先级越高，例如内联样式表>内部样式表>外部样式表；

以下是css样式、选择器的优先级从高到低排列：

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

三、class 和 id 的使用场景?

• id：id选择器，使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上；
• class：类选择器，使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时；

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

1. 方便后期代码维护，代码可读性更高，更容易理解样式的意图；
　　2. 便于重复调用使用该样式；
　　3. 便于精确定位样式作用的位置；
　　4. 避免样式污染；

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

以下为各个选择器的作用备注：

   #header{
  }  /*id选择器，匹配id="header"的元素*/
  .header{
  }  /*类选择器，匹配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"元素的后代a元素鼠标悬浮在其表面时的样式*/

六、列出你知道的伪类选择器

见第一题选择器类型中的伪类选择器；

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

• ：first-child匹配的是某父元素的第一个子元素，标签要一致才能匹配到；
• ：first-of-type匹配的是某父元素下相同类型子元素中的第一个，不再限制是第一个子元素，而是标签一致的第一个子元素；

举例如下：

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

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

  <style>
  .item1:first-child{
    color: red;
  }
  .item1:first-of-type{
    background: blue;
  }
  </style>
   <div class="ct">
     <p class="item1">aa</p>
    <!-- div下的第一个子元素且是类为class="item1"的第一个p元素，
      所以“.item1:first-child” 和“.item1:first-of-type”对其有效-->
     <h3 class="item1">bb</h3>
  <!-- div下的第二个子元素且是类为class="item1"的第一个h3元素，
     所以“.item1:first-of-type”对其有效-->
     <h3 class="item1">ccc</h3>
   </div>

所以输出时aa字体呈红色且带蓝色背景，bb带蓝色背景；

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

• text-align: center的作用：
  是元素文本内容水平居中，一般作用在块级元素上，使块级元素内部的行内元素在占据范围内居中显示，它居中是针对其父容器的空间范围居中的；

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

查询CSS属性的兼容性一般使用can i use网站；
如图，输入inline-block，查询结果，绿色块标示代表对应浏览器可以支持：

can i use

　　　　　　　　声明：本博客版权归兰文聪和饥人谷所有，转载需说明来源！