CSS选择器

1、class和id的使用场景

• class：类选择器，使用.name定义（name为类名，可任意取名），使用class="name"在html文档中形层倒勾，一个标签可以有多个类并且同一个类可以用到不同的标签上，一般用于多个标签样式相似或完全相同时；
  id：id选择器，使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id（定位唯一的元素），多用于页面分块的块级标签上；

2、CSS常见选择器分类

• 基础选择器
  #id ID选择器
  .class 类选择器
  element 标签选择器

• 伪类选择器
  1、链接伪类(只作用与锚元素)

  • ：link 匹配未被点击的链接
  • ：visited 匹配已被点击的链接

  2、动态伪类（作用全部元素）

  • ：hover 匹配鼠标悬停上的元素
  • ：focus 匹配获得当前焦点的元素
  • ：active 匹配鼠标选定的元素

  3、其他
  ：first-child 匹配元素的第一个子元素
  ：nth-child(n) 匹配其父元素的第n个子元素

• 属性选择器

  Paste_Image.png

• 组合选择器

  Paste_Image.png

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

选择器按照其特殊性（权重）可分为a,b,c,d4个等级，如下：

• HTML行内样式，最高级a
• ID选择器等级b
• 类、伪类、属性选择器等级c
• 标签、伪元素选择器等级d

如一个选择器标签中有多个相同类型的选择器，则叠加数值+1，如下：

Paste_Image.png

!important优先级最高无视上述规则。当选择器优先级相同时，那么后定义的会覆盖先定义的。

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

首先需要明确的是这4个都是伪类选择器中的链接样式，且选择器权重是一样的，那么我们这里考虑到样式覆盖的特性，顺序为：a:link->a:visited>a:hover>a:active

• 这里我们可以先考虑鼠标对链接操作的状态，将a:link->a:hover->a:active执行顺序排出来，即鼠标未点击状态->鼠标悬停状态>鼠标点击下的状态，那a:vistited表示鼠标点击之后的状态是不是放在最后？
  这里我们考虑到样式覆盖，若将其放在最后那么当我们将鼠标再次悬停或者点击时则无法显示出效果，因此将a:visited放在a:hover之前

5、下面选择器的匹配

#header{}  //id选择器，匹配id="header"的标签
.header{}  //类选择器，匹配class="header"的标签
.header .logo{}  //后代选择器，匹配calss=“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链接
#header .logo~p{}   //组合选择器，选择id为header的后代class="logo"的普通相邻同级元素p（无论直接相邻与否）
#header input[type="text"]  //组合属性选择器，选择id为header的后代input中属性type="text"的input标签

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

E:link  匹配所有未被点击的链接
E:visited   匹配所有已被点击的链接
E:active    匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:foucs       获取焦点
E:first-child   匹配元素E其父元素下的的第一个子元素
E:first-of-type      匹配其父元素的下相同类型标签所对应的的第一个子元素
E:nth-child(n)  匹配其父元素的第n个子元素，第一个编号为1
E:nth-of-type(n)    与:nth-child()作用类似，但是仅匹配使用同种标签的元素

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

• ：first-child匹配的是其父元素下的的第一个子元素；
• ：first-of-type匹配的是其父元素下相同类型的标签下的第一个子元素，不一定只有一个子元素；
  1、div:first-child //匹配div的父元素其下第一个子元素
  2、div:first-of-type //匹配div的父元素下相同类型的标签下的第一个子元素，不一定只有一个子元素；

image.png

3、item1 :first-child匹配item1对应标签（div class="item1"和p）下的所有后代的第一个子元素，上图中即有p标签所对应的aa文本变红
4、item1 :first-of-type匹配到item1对应标签(div class="item1"和p)下的相同类型标签后代的第一个子元素，由于匹配到的p class="item1"元素没有后代，所以对应文本节点值未发生改变