css选择器

CSS 选择器

在 CSS 中，选择器就是选取需要设置样式的元素的模式，用来指定我们想要样式化的HTML元素，简单来说选中文档中的标签。

在开始学习了CSS后，你已经见过选择器了。CSS选择器是CSS规则的一部分，它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。

选择器的类型

在CSS中，有着好几种不同的选择器，明确各种CSS的选择器以及如何去使用CSS选择器，会更容易的给想要添加样式的HTML元素添加样式，且对于原生JS的DOM，jQuery封装库，以及各类前端框架等的开发会有着极大的效率提升。

基础选择器

---

通常由单个标签或者类名、ID等所构成的选择器。

标签选择器：选取某一类标签的选择器

 div { 
     width: 300px;
     height: 300px;
     background-color: pink;
 }

类选择器：选择具有某种类名的选择器

 .container {
     width: 300px;
     height: 300px;
     background-color: pink;
 }

ID选择器：选取具有唯一ID的选择器

 #container {
     width: 300px;
     height: 300px;
     background-color: pink;
 }

通配符选择器：选取所有标签的选择器

 * {
     color: #666666;
 }

复合选择器

---

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

后代选择器：选择嵌套在其内部的所有同一类标签的选择器

 div span {
     color: #333333;
     padding: 5px;
 }

子选择器：选择嵌套在其内部最近一层同一类标签的选择器

 div > p {
     color: red;
 }

并集选择器：用逗号隔开，并列的关系，属于其中之一就会被选择的选择器

 div, p {
     background-color: pink;
 }

后续相邻选择器：选取所有指定元素之后的相邻兄弟元素的选择器

 h1 ~ h2 {
     color: red;
 }

相邻兄弟选择器：选择紧挨着一个元素后的那个元素，二者具有相同的父元素，指挥选择一个相邻的匹配元素的选择器

div + p {
	color: red;
}

伪类选择器：伪类选择器用于向某些选择器添加特定的效果

链接伪类选择器 :link、:visited、:hover、:active

a:link { /* 选择所有未被访问的 a 元素 */
	color: #000;
}
a:visited { /* 选择所有已被访问的 a 元素 */
    color: #666;
}
a:hover { /* 鼠标指针位于 a 元素上方 */
    color: #0f0;
}
a:active { /* 鼠标按下未弹起时 */
    color: #f00;
}
表单伪类选择器 :focus

input:focus { /* 当表单获得光标 */
    background-color: #00a4ff;
}

属性选择器

---

属性选择器可以根据元素的属性及属性值来选择元素。

简易属性选择器

[attr]表示带有以 attr 命名的属性的元素。

存在 title 属性的<a>元素

a[title] {
    color: pink;
}

精确属性值选择器

[attr=value]表示带有以 attr 命名的属性，且属性值为 value 的元素。

存在href属性并且属性值匹配https://exmaple.org的<a>元素

a[herf='https://example.org'] {
    color: pink;
}

部分属性值选择器

[attr~=value]表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

存在class属性并且属性值包含以空格分隔的"logo"的<a>元素

a[class~="logo"] {
    padding: 2px;
}

[attr^=value]表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。

存在class属性以con开头的<div>元素

div[class^="con"] {
    background-color: #ff0
}

[attr*=value]表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

存在class属性中包含tain的<div>元素

div[class*="tain"] {
    background-color: green;
    border: 1px solid #ff0;
}

[attr$=value]表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。

存在class属性中以er结尾的div元素

div[class$="er"] {
    backgrpund-color: pink;
}

伪元素选择器

---

一个选择器中只能使用一个伪元素。

伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

按照规范，应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。

::before（::after）创建一个伪元素，其将成为匹配选中的元素的第一个（最后一个）子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

span::before {
    content: '';
    color: pink;
}
span::after {
    content: '';
    color: blue;
}

::before 和::after 生成的伪元素包含在元素格式框内，因此不能应用在替换元素上，比如<img>或<br>元素。

结构伪类选择器

---

结构伪类选择器也是属于伪类选择器，用（:）紧接一个选择器，相比于一般的伪类更具结构化，根据文档结构选择。

child类型选择器

:first-child 表示在一组兄弟元素中的第一个元素。

p:first-child {
    color: #fff;
}

:last-child 代表父元素的最后一个子元素。

ul li:last-child {
    background-color: blue;
}

:nth-child() 根据传入的参数进行选择元素的选择器

ul li:nth-child(n) { /* 从第n个开始选择，直到结束 */
    color: red；
}
ul li:nth-child(2n) { /* 匹配位置为偶数的元素 */
    color: red;
}
ul li:nth-child(even) {
    color: red;
}
ul li:nth-child(2n+1) { /* 匹配位置为奇数的元素 */
    color: blue;
}
ul li:nth-child(odd) {
    color: blue;
}
ul li:nth-child(-n+3) { /* 匹配位置处于前3个的元素 */
    color: green;
}

选择器权重

CSS的权重指的是这些选择符的优先级，优先级高的CSS样式会覆盖优先级低的样式，优先级越高说明权重越高，反之亦然。

CSS各选择器的权重

---

!important：无穷大

行内：1000

ID：100

类、伪类选择器：10

标签选择器：1

权重总结

!important > 行内 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认