CSS选择器的分类

jiekechoo 发布于2019-08-30 15:43 / 2732人阅读

摘要：每个声明是一个属性和该属性的值的组合元素选择器最常见的选择器往往是元素。这个选择器可以与任何元素匹配，就像是一个通配符类选择器要应用样式而不考虑具体涉及的元素，最常用的方法就是使用类选择器。

《PHP 面试问答》

结合实际 PHP 面试，系统的汇总面试中的各种各样的问题，尝试提供简洁准确的答案。如果你在 PHP 面试中遇到问题，欢迎提 Issues 交流。包含网络协议、数据结构与算法、PHP、Web、MySQL、Redis、Linux、安全、设计模式、架构、自我介绍、离职原因、职业规划、准备问题等部分

基本规则

通过 CSS 可以向文档中的一组元素类型应用某些规则

利用 CSS，可以创建易于修改和编辑的规则，且能很容易地将其应用到定义的所有文本元素

规则结构

每个规则都有两个基本部分：选择器和声明块；声明块由一个或多个声明组成；每个声明则是一个属性-值对

每个样式表由一系列规则组成

如规则左边所示，选择器定义了将影响文档中的哪些部分

规则右边包含声明块，它由一个或多个声明组成。每个声明是一个 CSS 属性和该属性的值的组合

元素选择器

最常见的选择器往往是 HTML 元素。文档的元素就是最基本的选择器

声明和关键字

声明块包含一个或多个声明。声明总有如下格式：一个属性后面跟一个冒号，再后面是一个值，然后是一个分号。冒号和分号后面可以有0个或多个空格

如果一个属性的值可以取多个关键字，在这种情况下，关键字通常由空格分隔。并不是所偶属性都能接受多个关键字，不过确实有许多属性是这样

p {font: medium Helvetica;}

选择器 通配选择器

CSS2引入了一种新的简单选择器，称为通配选择器（universal selector），显示为一个星号（*）。这个选择器可以与任何元素匹配，就像是一个通配符

* {color: red;}

类选择器

要应用样式而不考虑具体涉及的元素，最常用的方法就是使用类选择器。在使用类选择器之前，需要修改具体的文档标记，以便选择器正常工作为了将一个类选择器的样式与元素关联，必须将 class 属性指定为一个适当的值

*.warning {font-weight: bold;}
p.warning {font-weight: bold;}
.warning {font-weight: bold;}

多类选择器

.warning {font-weight: bold;}
.urgent {font-style: italic;}
.warning.urgent {background: silver;}

ID 选择器

ID 选择器前面有一个 # 号ID 选择器不引用 class 属性的值
在一个 HTML 文档中，ID 选择器会使用一次，且仅一次

*#first-para {font-weight: bold;}
#first-para {font-weight: bold;}

属性选择器

在某些标记语言中，不能使用类和 ID 选择器。为了解决这个问题，CSS2引入了属性选择器（attribute selector），它可以根据元素的属性及属性值来选择元素

简单属性选择

如果希望选择某个属性的元素，而不讨论该属性的值是什么，可以使用一个简单属性选择器

Hello
Serenity
Fooling

h1[class] {color: silver;}

img[alt] {border: 3px solid red;} /*对所有带有 alt 属性的图像应用样式*/
*[title] {font-weight: bold;} /*包含标题(title)信息的所有元素变为粗体显示*/

根据具体属性值选择

除了选择有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素

/*将指向 Web 服务器上某个特定超链接变成粗体*/
a[href="https://blog.maplemark.cn"] {font-weight: bold;}

Venus
Earth
Mars

/*将第二个元素文本变成粗体*/
planet[moons="1"] {
    font-weight: bold;
}

根据部分属性值选择

如果属性能接受词列表（词之间用空格分隔），可以根据其中的任意一个词进行选择

img[title~="Figure"] {border: 1px solid gray;}

子串匹配属性选择器

类型	描述
[foo^="bar"]	选择 foo 属性值以"bar"开头的所有元素
[foo$="bar"]	选择 foo 属性值以"bar"结尾的所有元素
[foo*="bar"]	选择 foo 属性值中包含子串"bar"的所有元素

特定属性选择类型

Hello!

Greetings!

G"day!

Bonjour!

Jrooana!

*[lang|="en"] {color: white;}

这种属性选择器最常见的用途是匹配语言值

后代选择器

通过文档树结构，可以很形象的理解什么是后代选择器（descendant selector），也称为包含选择器/上下文选择器。定义后代选择器就是来创建一些规则，它们仅在某些结构中起作用，而在另外一些结构中不起作用

文字一

文字一后代

文字二

文字三

.row p{color: red;}

选择子元素

在某些情况下，可能并不想选择一个任意的后代元素；而是希望缩小范围，只选择另一个元素的子元素

.row > p{color: red;}

选择相邻兄弟元素


    List item 1
    List item 1
    List item 1
    List item 1


    A list item
    Another list item
    Yet Another list item
    Lat list item

ol + ul {font-weight: bold;} /*将命中 ul*/

ul 必须紧跟在 ol 后面

伪类选择器

锚类型称为伪类

链接伪类

CSS2.1定义了两个只应用于超链接的伪类

伪类名	描述
:link	指示作为超链接并指向一个未访问地址的所有锚
:visited	指示作为已访问超链接的所有锚

a {color: black;}
a:link {color: bule;}
a:visited {color: red;}

动态伪类

CSS2.1定义了3个动态伪类，它们可以根据用户行为改变文档的外观

伪类名	描述
:focus	指示当前拥有输入焦点的元素
:hover	指示鼠标指针停留在哪个元素上
:active	指示被用户输入激活的元素

伪类顺序：link-visited-focus-hover-active

选择第一个子元素

可以使用静态伪类:first-child 来选择元素的第一个子元素

p:first-child {font-weight: bold;}

伪元素选择器

就像伪类为锚指定幻像类一样，伪元素能够在文档中插入假象的元素，从而得到某种效果。CSS2.1中定义了4个伪元素：设置首字母样式、设置第一行样式、设置之前和之后元素的样式

设置首字母样式

p:first-letter {color: red;}

设置第一行样式

p:first-line {color: purple;}

:first-letter 和 :first-line 的限制

在 CSS2 中，:first-letter 和:first-line 伪元素只能应用于标记或段落之类的块级元素，而不能应用于超链接等的行内元素

设置之前和之后元素的样式

p:before {color: black;}
p:after {color: red;}

本文转载自枫叶林博客，《CSS选择器的分类》

服务器托管私有云云服务器开票分类选择 css选择 css选择器基础选择器css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116064.html

CSS选择器总结（分类、优先级）

摘要：样式选择器权重优先级如下的权重为选择器的权重为类选择器的权重为伪类选择器的权重为属性选择器的权重为标签选择器的权重为伪元素选择器的权重为通配符的权重为综合上述权重优先级来看，正确的优先级排序应该是内联样式类伪类属性选择标签伪元素继承通配符 CSS选择器是编写CSS代码时的一个核心概念，选择器定义了相应的样式将会影响到文档中的哪些部分，以下是自己在学习及工作过程中对CSS选择器的一些总结...

hedge_hog 2019-08-29 12:22 评论0 收藏0
css的居中效果、li鼠标悬浮背景颜色从上往下变化、选择器的分类与使用

摘要：一居中效果行内垂直居中行内水平居中内块级元素水平居中内块级元素垂直居中二鼠标悬浮背景颜色从上往下变化三选择器的分类与使用核心选择器标签类并且或者层次后代子代下一个兄弟之后所有兄弟属性选择器过滤器配合基本选择器进行筛选选择具有一 css居中效果（1）div行内垂直居中 div li{ height:30px; line-height:30px; ...

zhigoo 2019-08-30 14:15 评论0 收藏0
css的居中效果、li鼠标悬浮背景颜色从上往下变化、选择器的分类与使用

摘要：一居中效果行内垂直居中行内水平居中内块级元素水平居中内块级元素垂直居中二鼠标悬浮背景颜色从上往下变化三选择器的分类与使用核心选择器标签类并且或者层次后代子代下一个兄弟之后所有兄弟属性选择器过滤器配合基本选择器进行筛选选择具有一 css居中效果（1）div行内垂直居中 div li{ height:30px; line-height:30px; ...

ideaa 2019-08-05 13:21 评论0 收藏0
CSS选择器的分类

摘要：每个声明是一个属性和该属性的值的组合元素选择器最常见的选择器往往是元素。这个选择器可以与任何元素匹配，就像是一个通配符类选择器要应用样式而不考虑具体涉及的元素，最常用的方法就是使用类选择器。《PHP 面试问答》结合实际 PHP 面试，系统的汇总面试中的各种各样的问题，尝试提供简洁准确的答案。如果你在 PHP 面试中遇到问题，欢迎提 Issues 交流。包含网络协议、数据结构与算法、...

waltr 2019-07-01 12:39 评论0 收藏0
【CSS 学习】CSS 选择器、选择器的优先级和权重

摘要：优先级和权重中的权重分别为个等级内联样式文档中的属性选择器类伪类属性选择器元素伪类元素这个等级由高到低代表不同的优先级，写在规则后，可以将对应的规则提升到最高权重。以下总结内容摘自《移动Web前端高效开发实战》基本选择器选择器名称实例描述版本 * 通用选择器（Universal selectors） * 匹配所有的元素 2.1 E 标签选择器（Ty...

jerry 2019-08-30 14:03 评论0 收藏0