标签：span 伪类 color 元素 学习 选择符 CSS red

1. 元素选择符：以元素名作为选择符（span{ color: red; }）
2. 群组选择符：将两个选择符用逗号隔开构成群组（span, div{ color: red; }）
3. 通用选择符：通用选择符（*）将匹配所有元素（*{ color: red; }）
4. 类选择符：根据类名匹配元素（.类名{ color: red; }）
5. ID选择符：根据ID值匹配元素（#id{ color: red; }）
6. 属性选择符
   • 简单属性选择符：根据是否有这个属性匹配元素（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; }）
7. 后代选择符：选择所有符合条件的后代（span div { color: red; }）
8. 子代连接符：选择符合条件的子代（span > div { color: red; }）
9. 紧邻同胞连接符：选择同一个父元素中，紧跟在另一个元素后面的元素（span + div { color: red; }）
10. 一般同胞连接符：选择一个元素后面同属一个父元素的另一个元素(如例子：所有在span后面的div的color都是red) （ span~div { color: red; }）
11. 伪类选择符（伪类的效果是把某种幽灵类应用到伪类依附的元素上）：
    1. 结构伪类
       • 选择根元素（:root）：在html中文档的根元素永远都是html标签，但是在xml中，根元素就千奇百怪了
       • 选择空元素（:empty）：可以使用empty伪类可以选择没有任何子代的元素，甚至连文本结点都没有（包括文本和空白）注释不算
       • 选择唯一子代（:only-child）：匹配另一个元素的唯一子元素
       • 选择唯一某种子元素（:only-of-type）：匹配同胞中唯一的那种元素
       • 选择第一个子代（:first-child）：匹配一个元素的第一个子代
       • 选择最后一个子代（:last-child）：匹配一个元素的最后一个子代
       • 选择第一个某种子元素（:first-of-type）：匹配一个元素的第一个某种子元素
       • 选择最后一个某种子元素（:last-of-type）：匹配一个元素的最后一个某种子元素
       • 选择第n个子代（:nth-child(an+b)）：匹配第an+b个子代，a、b是常数，n为1、2、3......
       • 选择倒数第n个子代（:nth-last-child(an+b)）匹配倒数第an+b个子代，a、b、n同上
       • 选择第n个某种子元素（:nth-of-type(an+b)）匹配第an+b个某种子元素，a、b、n同上
       • 选择倒数第n个某种子元素（:nth-last-of-type(an+b)）匹配倒数第an+b个某种子元素，a、b、n同上
    2. 动态伪类
       1. 超链接伪类
          • :link 匹配具有herf属性的锚点
          • :visited 匹配已访问的锚点（鉴于隐私保护，伪类中只有color属性才能生效，其它的都无效）
       2. 用户操作伪类
          • :focus 当前获得输入焦点的元素
          • :hover 鼠标指针放置其上的元素
          • :active 由用户输入激活的元素
       3. UI状态伪类
          • :enabled 接受输入的元素
          • :disabled 不接受输入的元素
          • :checked 由用户或文档默认选中的单选框或多选框
          • :indeterminate 既未选中也没有未选中的单选按钮或多选按钮
          • :default 默认选中的单选按钮、复选框或选项
          • :valid 满足有效性语义的输入框
          • :invalid 不满足有效性语义的输入框
          • :in-range 输入的值在最大值和最小值之间的输入框
          • :out-of-range 输入的值不在最小值到最大值之间的输入框
          • :required 指代必须输入值的输入框
          • :optional 指代无须一定输入值的输入框
          • :read-write 可由用户编辑的输入框
          • :read-only 不能由用户编辑的输入框
    3. :target伪类：给锚点（该锚点有id且网页中有url(片段标识符)指向此id）设置样式
    4. :lang伪类：根据文本使用的语言选择元素
    5. 否定伪类（:not(要选择的简单选择符)）：相当于编程中的非操作，不满足要选择的简单选择符的时候，应用样式
       • tip：简单选择符：类型选择符、通用选择符、属性选择符、类选择符、ID选择符或伪类
12. 伪元素选择符
    1. 装饰首字母（::first-letter）
    2. 装饰首行（::first-line）
    3. 装饰（或创建）前置和后置内容元素（::before ::after）

标签：span,伪类,color,元素,学习,选择符,CSS,red
来源： https://www.cnblogs.com/xddisme/p/15507813.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。