CSS选择器

class 和 id 的使用场景?

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

---

CSS选择器常见的有几种?

• 基础选择器
• 属性选择器
• 伪类选择器
• 组合选择器
• 伪元素选择器

---

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

• 选择器的特殊性分为4个等级，a b c d，从左到右，越左边的越优先, 如果一个选择器规则有多个相同类型选择器，则+1。如果是HTML行内样式，那么特殊性最优先a，id选择器的特殊性是 b类选择器，伪类选择器、属性选择器为 c，标签选择器、伪元素选择器为 d

• 根据组合选择器按照以下规则统计各类选择器的个数：
  行内样式 --> 统计值为a
  ID选择器 --> 统计值为b
  类、属性选择器、伪类选择器 --> 统计为c
  标签选择器、伪元素选择器 --> 统计为d

先比较a值的大小，a值大的则优先级高;如果a值相等，则再比较b值的大小，b值大的优先级高；如果b值相等，则比较c值的大小，c值大的优先级高；如果c值相等，则比较d值的大小，d值大的优先级高；

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

---

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

注意关键的两点：1.这4个伪类特指度相同。2.一个链接可能同时处于多种状态，即同时属于多个伪类。

• 未点击链接前，link伪类长期处于激活状态，鼠标悬停（或点击）时，链接同时处于link和hover(或active)状态，由于它们特指度相同，在同时激活的情况下，后出现的伪类样式会覆盖前面的伪类样式，故link状态必须写在hover(或active)之前。　　再讨论hover和active的顺序，若把hover放在active后面，当点击链接一瞬，实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色，所以无法看到active的颜色。故hover在active之前　　其次，若把visited放在hover后面，那已访问过的链接一直触发着visited伪类，会覆盖hover样式。　　最后，其实link、visited两个伪类之间顺序无所谓。（因为它俩不可能同时触发，即又未访问同时又已访问。）
  当选择器优先级相同时，那么后定义的会覆盖先定义的。
• 记这顺序有个小招数，“LoVe？ HA!”。

---

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

• #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元素鼠标悬浮在其表面时的样式
• #head .logo~p{}组合选择器,id是header下的所有子元素中class="logo"的所有元素且是同级下的相邻(无论直接相邻与否)的p元素
• #head input[type="text"]{}组合选择器,id是header下的所有子元素中type="text"的input元素

---

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

div:first-child匹配的是其父元素的第一个子元素；
div:first-of-type匹配的是其父元素下相同类型子元素中的第一个，不一定只有一个子元素，而是在父元素下不同标签的第一个子元素

---

运行代码 解析原因

<style> .item1:first-child{ color: red; } .item1:first-of-type{ background: blue; } </style> <div class="ct"> <p class="item1">aa</p> <h3 class="item1">bb</h3> <h3 class="item1">ccc</h3> </div>

• aa
  字体红色原因:.item1:first-child{ color: red; }表示class="item 1"的所有元素中第一个子类元素是红色,所以aa字体是红色.
  背景蓝色原因:.item1:first-of-type{ background: blue; }表示class="item 1"的所有元素中同一标签(p标签)的第一个子元素元素背景是蓝色
• bb
  浏览器字体默认样式
  背景蓝色原因:.item1:first-of-type{ background: blue; }表示class="item 1"的所有元素中同一标签(h3标签)的第一个子元素元素背景是蓝色
• ccc
  浏览器默认样式