语轩
0%

2.选择符

发表于 更新于 分类于 Valine：
本文字数： 2.4k 阅读时长 ≈ 2 分钟

本文目前是css权威指南(4th Edition)的读书笔记，后续可能会继续整理汇入自己的见解。

1.基本规则

  • 选择符 {声明块}
  • 声明格式：属性：值；
  • 多个值的关键字以空格（有时是逗号，斜线）隔开。
  • 属性或者值有问题，则整个规则将被忽略。
  • 属性规范声明最后要加分号。

2.群组选择符和通用选择符

  • 群组选择符以逗号隔开，共用一个样式规则。
  • “ * ”表示通用选择符，适配所有元素。特指度为0，因为适配所有元素，存在异常后果。

3.旧浏览器使用新元素

在DOM中创建新元素，让浏览器知道元素的存在。例如IE8不识别

,使用JS如下：document.createElement(‘main’);

4.类选择符和ID选择符

类选择符和ID选择符需要对文档的标记有一定的结构，需要提前做好构思规划。
选择设定了class属性的元素赋予样式：（.）冒号+（class的值）

  • class有多个关键字作为值，可分别作为类选择符串在一起，没有顺序要求。例如： 
    1
    <div class='import main'></div>
  • .main.import{}
    ID选择符选择设定了ID属性的元素赋予样式：（#）散列字元+（ID的值）
  • ID的值不能以空格分隔，所以ID选择符不能串在一起。
  • ID和类选择符可能区分大小写，HTML区分大小写。

5.属性选择符

根据其属性及值选择元素，大致分为四类。

5.1简单属性选择符

选择具有某个属性或多个属性的元素，不涉及属性取值。例如：a[href][title]

5.2精准属性值选择符

选择属性为特定值的元素，可以串起来多个属性。例如：a[href=’www.baidu.com'][title='my']

  • 精准值选择符必须完全匹配属性的值包括顺序和空格。

5.3部分匹配属性值选择符

根据属性值的一部分选择元素：

  • [foo|=”bar”] 选择的元素有foo属性，且其值以bar和一个英文破折号（U+002D）开头，或者就是bar本身。
  • [foo~=”bar”]选择的元素有foo属性，且其值是包含bar这个词的一组词。
  • [foo*=”bar”]选择的元素有foo属性，且其值包含子串bar。

5.4起始值属性选择符

  • [foo^=”bar”]选择的元素有foo属性，且其值以bar开头。
  • [foo$=”bar”]选择的元素有foo属性，且其值以bar结尾。

5.5不区分大小写的标识符

  • i：在[ att|=”” i],表示属性的值不区分大小写。

6.根据文档结构选择

  • 后代选择符：两个或多个空格分开。
  • 选择子元素“>”:大于号表示子元素。
  • 选择紧邻同胞元素“+”。
  • 选择后续同胞“~”

7.伪类选择符

可以为文档中不一定真实存在的结构指定样式，或者为某些元素（或者文档本身）的特定状态赋予幽灵累。

7.1拼接伪类

允许把伪类串接在一起，伪类始终指代依附的元素。

7.2结构伪类

伪类大多是结构上的，即它们指代文档中的标记结构。

  • :root 选择文档的根元素。

  • :empty选择没有子代元素，包括文本节点（空白/换行），是到2017年位置唯一考虑文本节点的伪类。

    • img input textarea

  • :only-child 匹配完全没有同胞的元素。

  • :only-of-type 匹配通报中唯一种类的那种元素。

  • :first-child 匹配第一个子元素

  • :last-child匹配最后一个子元素

  • :first-child:last-child=:only-child

  • :first-of-type匹配第一个某种元素

  • :last-of-type匹配最后一个某种元素

  • :nth-child(an+b)选择每n个元素(an+b>=1)

    • 可以使用even偶数和odd奇数俩个关键字

  • :nth-last-child()从后往前数

  • :nth-of-type选择每第n个某种元素

  • :nth-last-of-type

7.3动态伪类

  • 超链接伪类

    • :link未访问
    • :visited已访问 出于安全考虑，样式有限

  • 用户操作伪类

    • :focus当前获得输入焦点的元素，接受键盘输入或者某种方式激活
    • :hover鼠标指针放置其上的元素
    • :active指代由用户激活的元素，例如点击超链接按下鼠标的那段时间

7.4UI状态伪类

可以被用户操作，也受文档结构和DOM脚本的影响。

  • :enabled 指代启用的用户界面元素，即接受输入的元素。
  • :disabled 指代禁用的用户界面元素，即不接受输入的元素。
  • :checked 指代由用户或文档默认选中的单选按钮或复选框
  • :indeterminate 指代既未选中也没有未选中的单选按钮或复选框，这个状态只能由DOM脚本指定，不能由用户设定。
  • :default 指代默认选中的单选按钮，复选框或选项。
  • :vaild指代满足所欲数据有效性语义的输入框。
  • :invalid指代不满足所欲数据有效性语义的输入框。
  • :in-rang指代输入的值在最大最小值之间的输入。
  • :out-of-rang指代输入的值小于控件允许的最小值或大于控件允许的最大值的输入框。
  • :required 指代必须输入值的输入框。
  • :optional指代无需一定输入值的输入框。
  • :read-write 指代可由用户编辑的输入框。
  • :read-only指代不能由用户编辑的输入框。

7.5:target伪类

URL中有个片段标识符，它所指向的是文档片段，称为目标。
即网址#号后面对应元素的ID。

7.6:lang伪类

:lang伪类比属性lang主要区别是语言信息有多个来源。能匹配设定了语言的元素的后代。

7.7否定伪类

:not（）括号里面是简单选择符，没有祖后辈关系的，不能也难怪群组和连接符。

8.伪元素选择符

只能出现在选择符的最后面

  • ::first-letter非行内样式的首字母，或者开头的标点符号和首字母。
  • ::first-line
    以上连个伪元素只能应用到块级元素上，能够使用的CSS样式也有限制。
  • ::before
  • ::after
    装饰或者创建前置后置内容元素。