CSS学习（二）选择符

2024-02-04 22:28:16

元素选择符：以元素名作为选择符（span{ color: red; }）
群组选择符：将两个选择符用逗号隔开构成群组（span, div{ color: red; }）
通用选择符：通用选择符（*）将匹配所有元素（*{ color: red; }）
类选择符：根据类名匹配元素（.类名{ color: red; }）
ID选择符：根据ID值匹配元素（#id{ color: red; }）
属性选择符
- 简单属性选择符：根据是否有这个属性匹配元素（span[class]{ color: red; }）
- 精准属性值选择：匹配属性为特定值的元素（精准字符串匹配）必须完全一致(span[class="urgent warning"]{ color: red; })
- 根据部分属性值选择：以bar为例
1. 1. 属性以bar和一个英文破折号开头的，或者bar本身（span[class|="bar"]{ color: red; }）
  2. 其值是包含bar的一组词（span[class~="bar"] { color: red; }）
  3. 其值是包含子串bar（span[class*="bar"] { color: red; }）
  4. 其值以bar开头（span[class^="bar"] { color: red; }）
  5. 其值以bar结尾（span[class$="bar"] { color: red; }）
后代选择符：选择所有符合条件的后代（span div { color: red; }）
子代连接符：选择符合条件的子代（span > div { color: red; }）
紧邻同胞连接符：选择同一个父元素中，紧跟在另一个元素后面的元素（span + div { color: red; }）
一般同胞连接符：选择一个元素后面同属一个父元素的另一个元素(如例子：所有在span后面的div的color都是red) （ span~div { color: red; }）
伪类选择符（伪类的效果是把某种幽灵类应用到伪类依附的元素上）：
伪元素选择符
1. 装饰首字母（::first-letter）
2. 装饰首行（::first-line）
3. 装饰（或创建）前置和后置内容元素（::before ::after）

码农公寓

相关文章