CSS 选择符

最新推荐文章于 2023-11-22 19:37:55 发布

清晨-阳光zx

最新推荐文章于 2023-11-22 19:37:55 发布

阅读量432

点赞数

分类专栏：前端文章标签： css html web

本文链接：https://blog.csdn.net/pro_fan/article/details/108820839

版权

前端专栏收录该内容

43 篇文章 0 订阅

订阅专栏

选择符 selector

样式的基本规则——样式声明与关键字

声明块中有一个或多个声明。
声明的格式是固定的，先是属性名，然后是冒号，后面再跟属性值和分号。冒号和分号后面可以有零个或多个空白。
属性值几乎都是一个关键字或以空格分隔的多个关键字。(不是每一个属性都接受多个关键字，多个关键字之间通常以空格分隔，有时使用斜线(/)或者逗号。)

注：如果声明中的属性或值有误，整个规则都将被忽略。

1. 元素选择符 element-selector

为HTML文档编写样式时，选择符一般是HTML预定义的某个元素，例如p,h3,a,甚至是HTML文档自身。

    html { color: black; }
    h1 { color: red; }

在XML中，什么都可以作为选择符，因为XML允许创建新标记语言，所以什么都可以作为元素名称。

2. 群组选择符

应用场景：把同一个样式应用到多个元素上，或者把多个样式应用到一个元素或一组元素上。

将同一个样式应用到多个元素上，使用方式为：规则左边是多个选择符，之间以逗号分隔，规则右边为样式声明

    h1, h2 { color: red }

将多个样式应用到一个元素或者一组元素上

    h1 { color: red; font-size: large; }
    h2, h3 { color: red; font-size: large; }

3. 类选择符

让类选择符起作用的方式是设定元素的class属性值。

类名前有一个点号(.)，后面跟类的名称，再跟着样式的声明。
- 如果点号前面没有任何元素选择符，则意味着其为通用选择符，所有元素都可使用。
- 如果点号前面有元素选择符，则会将该类仅可以使用在元素选择符上。

    .font-style { font-size: large; }
    span.font-style { color: red; }

class属性值可以是多个词，词之间用空格分隔。如果多个串联的类选择符包含class属性中没有的词，将无法匹配。

    // 定义样式
    .style1 { ... } // 样式1
    .style2 { ... } // 样式2
    .style1.style2 { ... } // 样式3，该样式使用在class属性值同时包含样式1和样式2的元素上
    // 使用样式
    <p class = "style1 otherStyle"> // 由于otherStyle未定义，该P元素只能匹配上述已经定义好的样式1
    <p class = "style1 style2"> // 该P元素可以匹配上述已经定义好的样式1、样式2和样式3

4. ID选择符

ID选择符以#号开头，让其起作用的方式是设定元素的ID属性值。

类选择器和ID选择器的区别

类选择符可以赋予多个元素，而ID选择符在一个html文档中一般只能使用一次。
与类选择符不同，ID选择符不能串联使用，即不能是以空格分隔的列表。
与类选择符相比，ID选择符优先级更高。

5. 属性选择符

属性选择符大致可以分为四类：简单属性选择符、精准属性值选择符、部分匹配属性值选择符和起始值属性选择符。

5.1 简单属性选择符

如果想选择具有某个属性或者同时具有多个属性的元素，而不管属性的值是什么，可以使用简单属性选择符。

例5.1.1：若想选择具有class属性的所有h1元素，为其设置样式，可以这样写：

    h1[class] { // 样式声明 }

例5.1.2：若想选择文档中具有title属性的所有元素，为其设置样式，可以这样写：

    *[title] { // 样式声明 }

简单属性选择符可以基于单个属性选择元素(如例5.1.1和例5.1.2)，也可以基于多个属性选择元素(见例5.1.3)。

例5.1.3：若想选择同时具有href属性和title属性的a元素，可以这样写：

    a[href][title] { // 样式声明 }

5.2 精准属性值选择符

使用简单属性选择符选择具有某个或多个属性的元素，此外，还可以进一步缩小范围，只选择属性值为特定值的元素。
这种选择方式，可以为任何元素指定任何属性和值的组合。当属性和值的组合在文档中未出现时，那么选择符不选择任何元素。
这种根据属性及其值选择元素，要求属性及其值完全一致。如果属性值是由空格分隔的多个词组成，则词的顺序也要保持一致。

例5.2.1：若想选择文档中指向web服务器上某个页面的超链接显示为粗体，可以这样写：

    a[href="https://www.baidu.com/"] { font-weight: bolder; }

与选择属性一样，可以把多个属性和值选择符串在一起。

例5.2.2：若想把href属性值为https://www.baidu.com/，而且title属性值为test的HTML超链接显示为两倍字号，可以这样写：

    a[href="https://www.baidu.com/"][title="test"] { font-size: 200%; }

例5.2.3：对下面的标记片段来说：

    <a class="class-1 class-2" ></a>

若想完全匹配属性值，则必须这样写：a[class="class-1 class-2"] { font-size: large; }

5.3 部分匹配属性值选择符

有时需要根据属性值的一部分选择元素，而不是完整的值。CSS为这种情况提供了多种选择，以不同的方式匹配属性值的子串。

方式1：
- 形式1：[foo|="bar"]，说明：选择的元素有foo属性，且其值为bar本身，或者是以bar和一个英文破折号开头。
- 示例1：以*[lang|="en"]规则为例，该规则选择lang属性值为en或者以en-开头的元素。
方式2：【匹配以空格分隔的一组词中的一个】
- 形式2：[foo~="bar"]，说明：选择的元素有foo属性，且其值是包含bar的一组词。
- 示例2：以[class~="warning"]规则为例，该规则选择class属性值包含warning的元素。
方式3：【匹配属性值的子串】
- 形式3：[foo*="bar"]，说明：选择的元素有foo属性，且其值包含子串bar。当我们想根据部分属性值选择元素，但是属性值不是以空格分隔的一组词时，可以使用[att*="val"]形式匹配出现在属性值内部任何位置的子串。
方式4：【匹配属性值开头的子串】
- 形式4：[foo^="bar"]，说明：选择的元素有foo属性，且其值是以bar开头。
方式5：【匹配属性值结尾的子串】
- 形式5：[foo$="bar"]，说明：选择的元素有foo属性，且其值是以bar结尾。

在理解后代选择符之前，先理解一下文档结构。

在文档的层次结构中，如果一个元素的位置直接在另一个元素的上方，那么前者是后者的父元素，后者是前者的子元素。
父元素和子元素是祖辈元素和后代元素的特例。两者之间是由区别的：在树状视图中，如果两个元素所在的层级是连续的，那么它们之间是父子关系；如果两个元素之间跨两个层级以上，它们之间是祖辈和后代之间的关系，而不是父子关系(子元素也是后代，父元素也是祖辈)。

6. 后代选择符(descendant selector)/上下文选择符(contextual selector)

在后代选择符中，规则中的选择符由两个或多个空格分隔的选择符构成。选择符之间的空格是一种连接符，如果从右向左读，空格连接符可以理解为“在内部”“是其一部分”或者“是其后代”。

注意：后代选择符中，两个元素之间的层级间隔可以是无限的。

6.1 选择子元素(直接子代)

选择一个元素的子元素(直接子代)，可以使用子代连接符，即大于号(>)。

示例：

    规则：h1 > strong { color: red; } 这个规则把h1元素的直接子代元素-strong元素显示为红色。
    上述规则会把第一个h1中的strong元素显示为红色，第二个则不受影响。
    <h1>This is <strong> very </strong> important.</h1>
    <h1>This is <em> really <strong> very </strong></em> important.</h1>

6.2 选择紧邻同胞元素

若想选择同一个父元素中紧跟在一个元素后面的一个元素，要使用紧邻同胞连接符，即一个加号(+)。
紧邻同胞元素，即两个元素紧邻且元素顺序与文档中的这两个元素原始顺序一样，且两者同属于一个父元素。
选择紧邻同胞元素，选择的是后一个元素。

紧邻同胞的两个元素之间的文本不影响紧邻同胞连接符的作用。

6.3 选择后续同胞

Selector Level 3 引入了一个新的同胞连接符，名为一般同胞连接符。这个连接符使用波浪号(~)表示，选择一个元素后面同属一个父元素的另一个或多个元素。两个元素不一定非得是紧邻同胞。

7. 伪类选择符

伪类选择符可以为文档中不一定真实存在的结构指定样式，或者为某些元素(甚至是文档本身)的特定状态赋予幽灵类。

7.1 拼接伪类

CSS允许把伪类拼接(串联)在一起。
例如，可以把有鼠标悬停其上的未访问链接显示为红色，把有鼠标悬停其上的已访问链接显示为红褐色：

    a:link:hover { color: red; }
    a:visited:hover { color: maroon; }

拼接伪类的顺序没什么关系，a:hover:link和a:link:hover效果一样。

注意：不可拼接相互排斥的伪类。

7.2 结构伪类

伪类大多数都是结构上的，即它们指代文档中的标记结构。所有伪类都是以一个冒号(:)开头，后面跟着一个词，而且可以出现在选择符的任何位置。

强调：伪类始终指代所依附的元素。

7.2.1 选择根元素

:root 伪类选择文档的根元素。

在HTML中，根元素始终是html。

这个选择符的真正用途体现在XML语言的样式表中，在不同的XML中，根元素有所不同。例如，RSS2.0的根元素是rss。有些XML语言甚至有多个根元素(当然不是在同一个文档中)。

7.2.2 选择空元素

使用:empty伪类可以选择没有任何子代的元素，甚至连文本节点(包括文本、空包和换行符)都没有。

7.2.3 选择唯一子代

使用:only-child伪类选择的元素的是另一个元素的唯一子元素，该伪类只匹配完全没有同胞的元素。

7.2.4 选择同胞元素中唯一的元素

使用:only-of-type伪类匹配同胞中唯一的那种元素

7.2.5 选择一个元素中的第一个和最后一个子代

:first-child伪类选择一个元素的第一个子元素。
- 示例：p:first-child { font-weught: bold; }规则把一个元素中的第一个p元素显示为粗体。
:last-child伪类选择最后一个元素。
- 示例1：p:last-child { font-weught: bold; }规则把一个元素中的最后一个p元素显示为粗体。
- 示例2：p:last-child em { }规则选择一个元素中的最后一个p元素中的em元素。

上述两个伪类结合在一起的效果相当于:only-child。

7.2.6 选择一个元素中的某种元素的第一个或最后一个

:first-of-type伪类，该伪类不应用与整个文档。
- 示例：table:fisrt-of-type { //... }规则，该规则不是选择文档中的第一个表格，而是选择里面有表格的元素中的第一个table，跳过后面作为同胞元素的其他table元素。
:last-of-type伪类，从同胞元素中选择指定种类元素的最后一个。它是从同胞元素的最后一个向前搜索，直到找到指定的元素类型。

上述两个伪类结合在一起的效果相当于:only-of-type。

7.2.7 选择每第n个子元素

:nth-child()伪类，可以在括号中填上整数，甚至是简单的代数式，选择任何想选择的元素。
- :first-child等效于:nth-child(1)
:nth-last-child()伪类。

7.2.8 选择每第n个某种元素

:nth-of-type()
:nth-last-of-type()

7.3 动态伪类

除了结构伪类之外，还有一些与结构有关的伪类，不顾它们在页面渲染之后根据页面的变化而变化。

7.3.1 超链接伪类

:link伪类，指代用作超链接的锚记(即具有href属性)，而且指向尚未访问的地址。
:visited伪类，指代指向已访问地址的超链接。处于安全考虑，能应用到已访问链接上的样式十分有限。
示例：

    a:link { color: blue; } /* 未访问的链接显示为蓝色 */
    a:visited { color: red; } /* 已访问的链接显示为红色 */

对于未访问的链接，不可定义a { color: blue; }规则，因为它会应用到类似于<a>test</a>这样的占位链接上。

7.3.2 用户操作伪类

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

7.4 UI状态伪类

与动态伪类紧密相关的是用户界面(user-interface，UI)状态伪类。

启用和禁用UI元素
- :enabled伪类，指代启用的用户界面元素(例如表单元素)，即接受输入的元素
- :disabled伪类，指代禁用的用户界面元素(例如表单元素)，即不接受输入的元素
选择状态
- :checked伪类，指代由用户或文档默认选中的单选按钮或复选框。
- :indeterminate伪类，指代既未选中也没有未选中的单选按钮或复选框；这个状态只能由DOM脚本设定，不能由用户设定。
默认选项伪类
- :default伪类，指代默认选中的单选按钮、复选框或选项。
有效性伪类
- :valid伪类，指代满足所有数据有效性语义的输入框。
- :invalid伪类，指代不满足所有数据有效性语义的输入框。
可选性伪类
- :required伪类，指代必须输入的输入框，可由required属性(HTML5)指定。
- :optional伪类，指代无需一定输入值的输入框。
范围伪类
- :in-range伪类，指代输入的值在最小值和最大值之间的输入框(最大值最小值可由HTML5的max和min属性设定)。
- :out-of-range伪类，指代输入的值小于控件允许的最小值或者大于控件允许的最大值的输入框。