CSS 语法
CSS 语法由选择器
和一条或多条属性声明
构成。
选择器 {
样式属性: 属性值;
样式属性: 属性值;
...
样式属性: 属性值;
}
以下部分的文档总结了一些 选择器
部分的用法。
CSS 选择器
元素/类型选择器
选择指定元素名称的所有元素。
用法:
A
类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。
选择类型A
的所有元素。类型是标签的类型,因此 <div>
,<p>
和<ul>
都是不同的元素类型。
例如:
p
选择所有的<p>
元素div
选择所有的<div>
元素
ID 选择器
选择具有特定id
的元素。
用法:
#id
我们也可以将 ID 选择器与类型选择器结合使用。
例如:
ul#long
选择<ul id="long">
后代选择器
选择元素内部的元素。
用法:
A B
在 A
中选择所有的 B
。 B
在另一个元素之内,所以它叫做后代元素。
例如:
p strong
选择所有在<p>
里的任意<strong>
元素。
后代与 ID 选择器搭配使用
将后代选择器与 ID 选择器结合使用。
用法:
#id A
例如:
#fancy span
选择任何有带id="fancy"
的元素的后代中的<span>
元素。#cool span
选择任何有带id="cool"
的元素的后代中的<span>
元素。
类选择器
选择带有指定类 (class) 的元素。
用法:
.类名
类选择器选择具有该类属性的所有元素。元素只能有一个 ID,但可以有多个类。
例如:
.neato
选择所有带有class="neato"
的元素。
类选择器的搭配使用
我们可以将类选择器与其他选择器(例如类型选择器)组合在一起使用。
例如:
-
ul.important
选择所有带有class="important"
的<ul>
元素。 -
#big.wide
选择所有带有id="big"
和class="wide"
的元素。
选择器组合
同时选取多个元素。
用法:
A, B
这将选择所有 A
和 B
元素。我们可以通过这种方式组合任何选择器,并且可以指定两个以上。
例如:
-
p, .fun
选择所有<p>
元素以及所有带有class="fun"
的元素。 -
a, p, div
选择所有<a>
,<p>
和<div>
元素。
通配选择器
选择所有元素。
用法:
*
我们可以使用通用选择器选择所有元素。
例如:
p *
选择在所有<p>
元素之内的任何元素。
通配选择器的搭配使用
选择另一个元素中的所有元素。
用法:
A *
这会选择所有 A
中的每个元素。
例如:
-
p *
会选择所有<p>
标签中的每个元素。 -
ul.fancy *
选择所有<ul class="fancy">
元素内的每个元素。
兄弟选择器
相邻兄弟选择器
选择第一个指定的元素之后(不是内部)紧跟的元素。
用法:
A + B
这将选择跟在 A
之后的全部 B
元素。 彼此相邻的元素称为兄弟元素,它们处于相同的等级或层级。
例如:
p + .intro
选择每个跟在<p>
之后的带有class="intro"
的元素。div + a
选择每个跟在<div>
之后的<a>
元素。
全体兄弟选择器
选择所有在指定的元素之后(不是内部)紧跟的元素。
用法:
A ~ B
这可以选择一个元素后面的所有同级元素(兄弟元素)。就像相邻选择器 A + B
一样,只是它获取后面的所有元素而不是一个。
例如:
A ~ B
选择跟在A
后面的所有B
元素。
子元素选择器
选择带有特定父元素的元素。
用法:
A > B
这可以选择一个元素的所有直接子元素。子元素是直接嵌套在另一个元素中的任意元素,比其嵌套更深的元素称为后代元素。
比其嵌套更深的元素称为后代元素。
例如:
A > B
在A
元素的所有直接子元素中选出所有B
元素。
伪类选择器
第一子元素伪类选择器
选取属于其父元素的首个子元素。
用法:
:first-child
这可以选择一个元素内的第一个子元素。子元素是直接嵌套在另一个元素中的任意元素,我们可以将此伪选择器与其他选择器结合使用。
例如:
:first-child
选择所有的第一子元素。p:first-child
选择所有是第一子元素的<p>
元素。div p:first-child
选择在<div>
内的所有是第一子元素的<p>
元素。
唯一子元素伪类选择器
选择属于其父元素的唯一子元素的每个元素。
用法:
:only-child
例如:
span:only-child
选择一个<span>
元素,该元素是其父元素中唯一的元素。ul li:only-child
选择一个<li>
元素,其父元素为<ul>
该元素是其父元素中唯一的元素。
最后子元素伪类选择器
选择属于其父元素的最后一个子元素的每个元素。
用法:
:last-child
Pro Tip → 如果只有一个元素,则该元素将同时计为第一子元素,唯一子元素和最后子元素。
例如:
:last-child
选择所有的最后子元素。span:last-child
选择所有的<span>
元素,且该<span>
元素为最后子元素,即在所有的最后子元素中选择所有的<span>
元素。)ul li:last-child
在任意<ul>
中选择所有<li>
元素,且该<li>
元素为最后子元素。
第 N 子元素伪类选择器
选择属于其父元素的第 N 个子元素,不论元素的类型。
用法:
:nth-child(N)
选择父元素中第 N 个( nth
,如:1st,3rd,7th,12th 等等)子元素。
例如:
:nth-child(8)
选择父元素中每一个排第 8 的子元素。div p:nth-child(2)
选择在每个<div>
中的第 2 个<p>
元素。
倒数第 N 子元素伪类选择器
属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。
用法:
:nth-last-child(N)
在父元素中选择倒数第 N 个子元素。
N 可以是数字、关键词(odd、even)或公式(An+B)。
例如:
:nth-last-child(2)
选择所有倒数第 2 个子元素。
特定类型第一元素伪类选择器
选择属于其父元素的特定类型的首个子元素的每个元素。
用法:
:first-of-type
在父元素中选择第一个该类型的子元素。
例如:
span:first-of-type
在任意元素中选择第一个<span>
元素。
第 n 元素伪类选择器
选择属于父元素的特定类型的第 N 个子元素的每个元素。
用法:
:nth-of-type(N)
根据元素的类型和顺序(或该类型元素的偶数或奇数次序)选择特定子元素。
例如:
div:nth-of-type(2)
选出第 2 个<div>
元素。.example:nth-of-type(odd)
在带有class="example"
的元素中选出奇数次序的元素。
带公式的第 n 元素伪类选择器
用法:
:nth-of-type(An+B)
按公式选择出特定次序的每个元素。
n 是计数器(从 0 开始),B 是偏移值。公式 An+B
中 n∈N
,即选出第 B
, A+B
, 2×A+B
, 3×A+B
, ...
项元素。
例如:
span:nth-of-type(6n+2)
选出第6×n+2
项<span>
元素(第2
,8
,14
,20
,...
项)。
类型唯一伪类选择器
选出属于其父元素的特定类型的唯一子元素的每个元素。
用法:
:only-of-type
例如:
p span:only-of-type
在任意<p>
中选出<span>
子元素,且该<span>
子元素是该类型的唯一元素。
最后类型伪类选择器
选出属于其父元素的特定类型的最后一个子元素的每个元素。
用法:
:last-of-type
类型是标签的种类,所以 <p>
和 <span>
是不同的类型。
例如:
div:last-of-type
在每个元素中选择最后的<div>
元素。p span:last-of-type
s在每个<p>
元素中选择最后的<span>
元素。
空伪类选择器
选出没有子元素(包括文本节点)的每个元素。
用法:
:empty
例如:
div:empty
选择所有空的<div>
元素。
否定伪类选择器
选出非指定元素/选择器的每个元素。
用法:
:not(X)
可以使用它来选择与选择器 "X"
不匹配的所有元素。
例如:
:not(#fancy)
选择所有不带id="fancy"
的元素。div:not(:first-child)
选择每个不是其父元素的第一子元素的<div>
元素。:not(.big, .medium)
选择所有不带class="big"
或class="medium"
的元素。
属性与属性值选择器
属性选择器
选取带有指定属性的元素。
用法:
[attribute]
属性显示在元素的开始标记内,如 <span attribute="value">
。属性并不总是具有值,可以为空。
例如:
[type]
选择所有带有type="任意属性值"
属性的元素。
用法:
A[attribute]
可以通过将属性选择器添加到末尾,将其与另一个选择器(例如标签名称选择器)组合起来。
例如:
a[href]
选择所有带有<href="任意属性值">
属性的<a>
元素。input[disabled]
选择所有带有disabled
属性的<input>
元素。
属性值选择器
选取带有指定属性和值的元素。
用法:
[attribute="value"]
属性选择器区分大小写,每个字符必须完全匹配。
例如:
input[type="checkbox"]
选择所有复选框输入元素。
以指定值开头的属性值选择器
选出属性值以指定值开头的每个元素。
用法:
[attribute^="value"]
例如:
.toy[category^="Swim"]
选择带有class="toy"
的元素并且带有category="Swimwear
或category="Swimming"
。
以指定值结尾的属性值选择器
选出属性值以指定值结尾的每个元素。
用法:
[attribute$="value"]
例如:
img[src$=".jpg"]
选择所有显示.jpg
图片的<img>
元素。
包含指定值的属性值选择器
选出属性值包含指定值的每个元素。
用法:
[attribute*="value"]
例如:
img[src*="/thumbnails/"]
选择从 "thumbnails" 文件夹中显示图像的所有<img>
元素。[class*="heading"]
选择所有类名中带有 "heading" 的元素,如class="main-heading"
和class="sub-heading"
。