第二节：CSS选择器

青旅半醒 2022-06-08 00:50 354阅读 0赞

### 规则结构 ###

每个规则分为两个基本部分：选择器和声明块。声明块由一个或多个声明组成，每个声明则是一个属性-值对，每个样式表由一系列规则组成。如图：  
![image.png][]

### 元素选择器 ###

最常见的选择器往往是HTML元素，但也不完全是这样，XML元素当然也可作为元素选择器。从上可以总结出来，文档的元素就是最基本的选择器。

### 声明和关键字 ###

声明是一个属性-值对，属性值要么是关键字要么是该属性可取关键字的一个列表（关键字之间用空格分开），当声明中使用了不正确的属性或者不正确的值的时候，整个声明会被忽略。CSS关键字往往由空格分隔，只有一种情况例外，在CSS的font属性中，只有一种情况可以使用斜线分隔两个特定关键字：

h2{ font:large/150% sans-serif}斜线分隔了用来设置字体大小和行高的两个关键字

### 选择器分组 ###

将不同的选择器放在规则的左边，并用逗号隔开，逗号告诉浏览器，规则中包含不同的选择器。通过分组，可以得到更简短的样式表。

### 通配选择器 ###

显示为一个星号（\*）这个选择器可以与所有的元素匹配。

### 声明分组 ###

相同选择器下的属性写到同一个大括号里面，声明分组时，要在每个声明最后加上分号。

### 类选择器 ###

应用样式而不考虑具体涉及的元素，最常用的方法就是使用类选择器。为了将一个类选择器的样式与元素关联，只需将为此元素的class属性指定一个适当的值。类选择器前往往有一个点号，标记这是一个类选择器。

### 多类选择器 ###

把两个类选择器链接在一起（.warning.urgent），仅可以选择同时包含这些类名的元素（类名的顺序不限）

### ID选择器 ###

前面有一个\#号，引用id属性中的值。类选择器和ID选择器可能是区分大小写的，这取决于文档语言，HTML和XHTML将类和ID值定义为区分大小写。

### 简单属性选择 ###

使用情况：选择有某个属性的元素，而不论该属性的值是什么。如下：

h1[class]{ color:silver}，选择有class属性的所有h1元素

还可以根据多个属性进行选择，只需要将属性选择器链接在一起即可。

a[href][title]{font-weight:bold}将同时有href和title属性的HTML超链接的文本置为粗体

## 根据具体属性选择 ##

除了选择有某些属性的元素，还可以只选择有特定属性值的元素：

a[href="http://www.css-discuss.org/about.html"]{ font-weight:bold}将指向web服务器某个特定文档的超链接变为粗体

与属性选择类似，可以把多个属性-值选择器连接在一起来选择一个文档。这种格式要求必须与属性值完全匹配，这不同于之前的多类选择器（可以选择同时包含这些类名的元素，类名的顺序不限），而这里是一个完全串匹配。如下：

a[href="http://www.w3.org/"][title="W3C home"]{font-size:200%}

> **注意**：  
> h1\#page-title和h1\[id=”page-title”\] 另外需要注意ID选择器和指定id属性的属性选择器不是同一回事，两者存在着微妙但很重要的差别

### 根据部分属性值选择 ###

如果属性能接受词列表（词之间用空格分隔），可根据其中的任意一个词进行选择，这方面最经典的就是class属性，它能接受一个或多个词作为其属性值，如下例子：

<p class = "urgent warning">some font</p>
    利用属性选择器p[class~="warning"]{font-weight:bold}这样可以选择class属性中包含warning的元素

~是部分选择的关键，在这里，这个选择器构造等价于先讨论的点号类名记法。下面思考一个问题：既然等价于点号类名记法，为什么还要有“~=”属性选择器呢？原因是它可以用于任何属性，而不仅仅是class。下面介绍一种更高级的CSS选择器模块：子串匹配属性选择器。如下：

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

### 特定属性选择类型 ###

这种属性选择器最常见的用途是匹配语言值，考虑下面规则：

*[lang|="en"]这个规则会选择属性等于en或者以en-开头的所有元素。

--------------------

# 使用文档结构 #

### 理解父子关系 ###

CSS之所以强大，主要在于元素之间存在父子关系。如果一个元素出现在文档层次结构中另一个元素的上一层，则称前者是后者的父元素。

### 后台选择器 ###

创建一些规则，他们只在某些结构中起作用。如下：

h1 em { color:gray}这个规则会把作为h1元素后代的em元素的文本变成灰色，其他em文本则不会被选中。

在一个后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器，这个空格叫做结合符。可以解释为：“····在······中找到”。后代选择器有一个常常被忽略的方面，即两个元素之间的层次间隔可以是无限的

### 选择子元素 ###

有时候，我们并不想选择任意的后代元素，而只希望选择另一个元素的子元素。如下：

h1 > strong { color:red}选择只作为一个h1元素子元素(而不是后代元素)的strong元素

### 选择相邻子元素 ###

要选择紧接在另一个元素后的元素，两者拥有共同的父元素，可以使用相邻兄弟结合符，用一个加号（+）表示，例如：

h1 + p { margin-top:0}去除紧接在一个h1元素后出现的段落的上边距

--------------------

# 伪类和伪元素 #

### 伪类选择器 ###

伪类：使元素好像已经有一个类一样，叫做这个元素的伪类。使用伪类的选择器称为伪类选择器。伪类和伪元素关键字前面都有一个冒号。

#### 链接伪类 ####

伪类名”:link”,指示作为超链接，并指向一个未访问地址的所有锚。”:visited”,指示作为已访问地址超链接的所有锚。静态伪类

#### 动态伪类 ####

伪类名：":focus",指示当前拥有输入焦点的元素，也就是说，可以接受键盘输入或者能以某种方式激活的元素。
    ":hover",指示鼠标指针停留在哪个元素上。
    ":active"指示被用户输入激活的元素。

伪类的顺序很重要。  
动态伪类可以应用到任何元素。

#### 动态样式的实际问题 ####

CSS规范指出，文档第一次显示之后，用户代理不必重绘文档。而如果我们使用动态伪类”:hover”使使鼠标停留在锚上时增加锚的大小，支持这种行为的用户代理在锚出于悬停状态时必须重绘文档，这就要求重新显示该链接之后的所有内容。所以有时候，预想的效果不一定会发生，强烈建议要避免依赖于这种行为的设计。

#### 选择第一个子元素 ####

“:first-child”

p:first-child{ font-weight:bold;}这个规则将作为某元素第一个子元素的所有p元素设置为粗体。IE6不支持:first-child,IE7支持

#### 根据语言选择 ####

使用”:lang()”伪类，可以根据元素的语言来选择。

*:lang(fr){ font-style:italic}把所有法语元素变成斜体。

伪类选择器和属性选择器之间的主要差别在于语言信息可以从很多来源得到，伪类比属性选择器稍微健壮一些，在需要语言特定的样式时，大多数情况下伪类是更好的选择。

#### 结合伪类 ####

可以在同一个选择器中结合使用伪类。例如：

a:link:hover{ color:red}表示鼠标停留在未访问链接时，可以让这些链接变成红色。写成a:hover:link{ color:red}会得到一样的效果。不过在IE6及以前版本不能识别这种组合伪类，而只会注意到组合伪类的最后一个伪类。IE7不存在这种限制。

> **注意**

## 不要把互斥的伪类结合在一起使用，a:link:visited就毫无意义。 ##

# 伪元素选择器 #

四种伪元素：设置首字母样式，设置第一行样式，设置之前和之后元素的样式

#### 设置首字母样式 ####

p:first-letter{ color:red}这个规则会把每一段的第一个字母变成红色。

#### 设置第一行样式 ####

p:first-line{ color:red}

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

h2:before{ content:"}}";color:silver;}在每个h2元素前加一对银色中括号
    :after用于在一个元素后面插入内容，body:after{ content:" The End.";}

> **注意**  
> 所有伪元素都必须放在出现该伪元素的选择器的最后面。  
> 例如：p:first-line a\{\}就是不合法的。

[image.png]: /images/20220608/161ba99124a54c629db414efac42d471.png

第二节：CSS选择器

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关【第二部分 | CSS】1：万物始于选择器

相关 css选择器_CSS选择器

相关 css通用选择器用_通用选择器（CSS选择器）

相关 css 属性选择器_CSS选择器：属性选择器

相关第19节 css高级特性之复合选择器

相关第19节 css高级特性之复合选择器

相关第17节基本CSS选择器

相关第17节基本CSS选择器

相关第二节：CSS选择器

相关 css 选择器