CSS选择器

这是我参与「第五届青训营」伴学笔记创作活动的第3天

类选择器：在标签内添加class="类名1 类名2"，在样式表中使用".类名1.类名2"定义

id选择器：在标签内添加id="id名"，在样式表中使用"#id名"定义

标签/元素选择器：以标签作为选择器如<div>

全局选择器：以*作为选择器

群组选择器：为多个选择器设置相同样式

后代选择器：选择father的所有child

直接后代选择器：选择father的所有直接child

属性选择器：选择带有某属性的元素

标签[属性名="属性值"]
通配符：加在=前面
- ~：包含此属性值；
- |：以此字符串或"字符串-"开头的属性值；
- ^/$：以此字符串开头/结尾的属性值；
- *：包含此字符串的属性值；

兄弟选择器：选择bro1之后的兄弟元素bro2

相邻兄弟选择器：选择bro1之后的第一个兄弟元素nextbro

伪类

动态伪类：在交互时选择
- 点击前/鼠标移上/点击/点击后/获取光标后：:link :hover :active :visited :focus
结构类：
- ele:nth-child(n)：若某父元素的第n个元素是ele，选择它（n从1开始）
  - n可结构类为表达式，如2n+1、n+2
  - ele:nth-last-child(n)：倒数
  - ele:first-child/last-child：第一/最后一个
  - ele:only-child：只有一个子元素且为ele，选择它
- ele:nth-of-type(n)：选择某父元素的第n个ele
- - ele:nth-last-type(n)：倒数
  - ele:first-of-type/last-of-type：第一/最后一个
  - ele:only-of-type：只有一个ele，选择它
- ele:empty：选择没有子元素的ele
- ele:not(child/selector)：选择某父元素的不包含child/selector的ele
伪元素：相当于添加了一个元素，ele只能为块级元素
- ele::before：在ele的开始添加一个无法找到的内联元素，内容通过content属性填写，且永远为ele的第一个子元素
- ele::after：同before（为ele最后一个子元素）
  - 可用于清除浮动：display: block;content: "";clear: both;
- ele::first-line/letter：选择ele的第一行文本/第一个字符
- ele::selection：选中ele的文本时的效果
UI状态伪类：用于input标签
- :enabled :disabled :checked

Id选择器(100) > class/属性/伪类选择器(10) > 元素/伪元素选择器(1) > *(0)

!important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器

line-height继承： 一般情况是继承父元素行高，如果父元素行高为百分比，则先在父元素计算完再继承