css选择器

一、CSS选择器常见的有几种?选择器的优先级是怎样的?

常用的有四种：文档元素选择器、类选择器、ID选择器、伪类选择器。
优先级：
1、最高优先：直接在标签中设置样式
2、次优先级：ID选择器
3、其次优先级：类选择器
4、最后优先级：标签选择器

二、class 和 id 的使用场景?

id：根据提供的唯一id号，快速获取标签对象。用于充当label标签for属性的值。
class:指定标签的类名。CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。

三、使用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下的类选择器nav子元素li的样式。
#header a:hover{}：定义ID选择器属性值header中a链接动态伪类的样式。

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

Paste_Image.png

1. 链接伪类：：link；：visited

2. 动态伪类（用户行为伪类）：：focus ；：hover；：active

3. UI元素状态伪类（用于form元素）：：enabled；：disabled；：checked

4. 语言选择的伪类：：lang()

5. 伪元素选择器：：：first-letter；：：first-line ；：：before；：：after；：：selection

6. 否定选择器：：not

7. CSS3的:nth选择器 1

   :first-child 选择某个元素的第一个子元素；
   :last-child 选择某个元素的最后一个子元素；
   :nth-child() 选择某个元素的一个或多个特定的子元素；
   :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
   :nth-of-type() 选择指定的元素；
   :nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
   :first-of-type 选择一个上级元素下的第一个同类子元素；
   :last-of-type 选择一个上级元素的最后一个同类子元素；
   :only-child 选择的元素是它的父元素的唯一一个了元素；
   :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
   :empty选择的元素里面没有任何内容。

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

:first-child 匹配的是某父元素的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个。
区别：是否允许父元素其他类型子元素的第一个。

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

 
 
    
aa
    
bb
    
ccc

结果：

1.png

解释：.item1:first-child：定义某元素（div） 第一个子元素的所有属性值为item1的元素设置字体为红色。第一个子元素为p元素，所以aa字体红色。
.item1:first-of-type：定义某元素（div）子元素中所有相同类的元素的第一个子元素属性值为item1下的元素设置背景色为蓝色。故aa、bb为蓝色。
（h3有两个，取第一个bb）

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

text-align: center作用是使内部文字水平居中。
作用在行内元素上，块级元素内文字会居中，文字外容器并不对齐。若要整个内容水平居中，需要在添加块级元素中添加text-align:center和margin：0 auto样式。或者说在块级元素中添加display：inline-block。
测试第一种：

Paste_Image.png

结果：

Paste_Image.png

第二种：

Paste_Image.png

结果：

Paste_Image.png

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

使用：caniuse查询

• 版权归本人及饥人谷所有，转载请注明出处。谢谢！