初识css选择器

class 和 id 的使用场景?
class指定标签的类名，<input type="text" class="text">把需要相同样式的元素归类于一个name下，需要此样式的标签添加至此类。
ID指定标签的唯一标识，<input type="text" id="text">第一、根据提供的唯一标识的ID号可以快速的获取元素信息；第二、用于充当label标签for属性的值，示例：<label for='userid'>用户名：</label>，表示单击此“用户名”标签时，id为userid的标签获得焦点。
CSS选择器常见的有几种?
基础选择器
*：通用选择器，匹配页面任何元素（少用）
#id：id选择器，匹配特定ID的元素
.class：类选择器，匹配class包含而不是等于特定类的元素
element：标签选择器
组合选择器
E,F：多元素选择器，用逗号分隔，同时匹配元素E和元素F
E F：后代选择器，空格分隔，匹配E元素所有的后代元素F，不只是子元素，向下递归
E>F：子元素选择器，>分隔，匹配E元素的所有直接子元素
E+F：直接相邻子元素，同级
E~F：普通相邻子元素，所有同级F，不管是否相邻
.class1.class2 、element#id：中间没有分隔符，表示既...又...的关系
属性选择器
E[attr]：匹配所有具有属性attr的元素
E[attr=value]：匹配属性attr值为value的元素
E[attr ~=value]：匹配所有属性attr具有多个空格分隔，其中一个值为value的
E[attr ^=value]：匹配属性attr值以value开头的元素
E[attr $=value]：匹配属性attr值以value结尾的元素
E[attr *=value]：匹配属性attr值包含value的元素
伪类选择器
E:first-child 匹配作为第一个子元素的元素E
E:linked 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经按下没有释放的元素E
E:hover 匹配鼠标悬停其上的元素E
E:focus 匹配获得当前焦点的元素E
E:lang(c) 匹配lang属性为c的元素E
E:enabled 匹配表单中可用的元素E
E:disabled 匹配表单中禁用的元素E
E:checked 匹配表单中被选中的radio或checkbox的元素E
E::selection 匹配用户当前选中的元素
E:nth-child(n) 匹配其父元素的第n个子元素
E:nth-of-type(n) 匹配其父元素仅适用相同标签的第n个子元素
伪元素选择器
E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容
选择器的优先级是怎样的?对于复杂场景如何计算优先级？
选择器的优先级是指多条规则作用于同一个元素上，且定义相同属性的不同值
优先级由高到低
在属性后面使用!important ->style属性写在标签里面的内联样式 -> ID选择器 -> 类选择器 -> 伪类选择器 -> 属性选择器 -> 标签选择器 -> 通配符选择器 -> 浏览器自定义
复杂场景的计算方式
a：行内样式
b：ID选择器
c：类、属性选择器、伪类选择器
d：标签选择器、伪元素选择器
统计abcd四种情况的数量，并按照abcd的顺序依次比较
例如：

#test p.class1{...}  /*a=0 b=1 c=1 d=1*/
#test .class1.class2{...}  /*a=0 b=1 c=2 d=0 这个的优先级高*/

a:link, a:hover, a:active, a:visited 的顺序是怎样的？为什么？
顺序：a:link -> a:visited -> a:hover -> a:active
原因：当把a:visited放在最后时，链接被触发过，这个样式会把前面所有的样式覆盖，导致hover、active失效。如果顺序是a:link -> a:visited -> a:active -> a:hover，active将失效，点击链接不动时样式会被hover的覆盖。a:link和a:visited的位置可以互换，总而言之，写在最后的样式会覆盖之前的样式。
以下选择器分别是什么意思?

#header      ID名为header的选择器
.header        类名为header的选择器
.header .logo      匹配class="header"的后代选择器class="logo"的元素
.header.mobile    匹配既有class="header"又有class="mobile"的元素
.header p, .header h3    匹配class="header"的后代选择器p标签的元素或class="header"的后代选择器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的元素

列出你所知道的伪类选择器
E:first-child 匹配作为第一个子元素的元素E
E:linked 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经按下没有释放的元素E
E:hover 匹配鼠标悬停其上的元素E
E:focus 匹配获得当前焦点的元素E
E:lang(c) 匹配lang属性为c的元素E
E:enabled 匹配表单中可用的元素E
E:disabled 匹配表单中禁用的元素E
E:checked 匹配表单中被选中的radio或checkbox的元素E
E::selection 匹配用户当前选中的元素
E:nth-child(n) 匹配其父元素的第n个子元素
E:nth-of-type(n) 匹配其父元素仅适用相同标签的第n个子元素
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别（注意空格的作用）
作用：
div:first-child：匹配同级元素下的第一个且为div的元素
div:first-of-type：匹配同级元素下第一个div元素
div :first-child：匹配标签为div的后代选择器中第一个元素
div :first-of-type：匹配div的后代元素的同种类型的第一个元素
区别：
div:first-child：伪类选择器，没有空格，指当前元素父元素下的第一个子元素
div:first-of-type：伪类选择器，没有空格，指当前元素父元素下同种类型的第一个子元素
div :first-child：组合选择器，有空格，指当前div下的第一个元素
div :first-of-type：组合选择器，有空格，指当前div下的同种累心的第一个元素
运行如下代码，解析下输出样式的原因。

image.png

原因：首先.item1:first-child指的是class="item1"的父元素的第一个子元素，也就是aa，设置为红色；然后是.item1:first-of-type指的是class="item1"的父元素的第一个同标签的子元素，<p class="item1">aa</p>，aa的背景色为蓝色，<h3 class="item1">bb</h3>，bb的背景色为蓝色，<h3 class="item1">ccc</h3>，第一个同标签的子元素指的是bb，所以还是设置的bb的背景色为蓝色。

初识css选择器

推荐阅读更多精彩内容