CSS选择器

1. class 和 id 的使用场景?

• 如果标签内容是独一无二的，例如邮箱，身份证等，可以使用id选择器；

image.png

• 如果标签内容是一个类别，例如汽车，食品等，可以使用class选择器；

image.png

2. CSS选择器常见的有几种?

• 基础选择器

image.png

• 属性选择器

  
  image.png

• 复合选择器

  
  image.png
• 伪类选择器

image.png image.png

• 伪元素选择器

image.png

3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级？

• 选择器优先级权重大小按照下顺序：

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

• 对于复杂的css场景计算方式：
  • 先把所有的选择分成以下几类：
    1. 行内样式==>a
    2. ID选择器==>b
    3. class选择器，属性选择器和伪类选择器==>c
    4. 标签选择器和伪元素选择器==>d
  • 如果同一个元素的样式场景复杂，包含以上分类a的最多，权重最大，如果a相等就看b的个数，如果b的个数也相等，就看c的个数，如果c的个数都相等就看d的个数。

image.png

4. a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？

顺序为：a:link>a:visited>a:hover>a:active.

1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
4.在鼠标点击“未访问链接”同时拥有a:link、a:hover、a:active三种属性，后面的属性会覆盖前面的属性定义；
5.在鼠标点击“已访问链接”同时拥有a:vitited、a:hover、a:active三种属性，后面的属性会覆盖前面的属性定义；
6.所以说，a:hover定义一定要放在a:link、a:visited的后面,a:active一定要放在a:hover后面；

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

css选择器	解释
#header{...}	匹配id="header"的元素。
.header{...}	匹配class="header"的元素。
.header .logo{...}	匹配class="header"元素后代所有class="logo"的子元素和递归元素。
.header.mobile{...}	匹配class="header"和class="mobile"的元素。
.header p, .header h3{...}	匹配class="header"元素后代所有标签为p的子元素和p的递归元素和class="header"元素后代所有标签为h3的子元素和h3的递归元素
#header .nav>li{...}	匹配id="header"元素后代为class="nav"的所有子元素和它的递归元素后代的标签为li的直接子元素。
#header a:hover{...}	匹配id="header"元素后代鼠标悬停其上的标签为a的所有元素及递归元素。
#header .logo~p{...}	匹配id="header"元素后代class="logo"的所有子元素和它的递归元素之后的同级标签为p的所有元素，不管是否相邻。
#header input[type="text"]{...}	匹配id="header"元素后代标签为input的所有子元素和它的递归元素的type属性值为"text"的元素

}

6. div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）.

• div:first-child：匹配其父元素后代第一个标签为div的元素。（必须是其父元素下的第一个标签，否则无效果）
• div:first-of-type：匹配其父元素下使用div标签的第一个元素。（只要是其父元素下的第一个div元素即可匹配）
• div :first-child：匹配div后代的第一个元素。
• div :first-of-type：匹配div后代相同标签的第一个元素。

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

image.png image.png

• .item1:first-child,.item1匹配一个p标签和两个h3标签，:first-child表示必须是其父元素的第一个标签，所有之后p标签里的内容“aa”的颜色为“red”。
  :first-of-type表示只要是其父元素下的相同类型的一个元素即可匹配，所以第一个<p>元素和第一个<h3>元素的背景色为“blue”。