CSS选择器总结

最新推荐文章于 2023-05-22 19:49:17 发布

xuan_liu1992

最新推荐文章于 2023-05-22 19:49:17 发布

阅读量4.2k

点赞数 2

分类专栏： web基础文章标签： CSS

本文链接：https://blog.csdn.net/xuan_liu1992/article/details/51378829

版权

web基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS选择器在我看来可分为4大类，分别是类选择器、ID选择器、元素选择器、属性选择器。

后面的后代选择器、子元素选择器、相邻兄弟选择器可分别用在上面4大类里。

【元素选择器】

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

在 W3C 标准中，元素选择器又称为类型选择器（type selector）。

例如：

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

例子：

<html>
<head>
<style type="text/css">
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</style>
</head>

<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<p>这是一段普通的段落。</p>
</body>
</html>

【类选择器】

官方一点的说法，类选择器允许以一种独立于文档元素的方式来指定样式。

按我理解，按类别来指定样式。

类选择器可以单独使用，也可以与元素选择器结合使用。

一、单独使用

语法：

使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：

*.important {color:red;}

如果您只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何区别：

.important {color:red;}

多类选择器：

在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。

通过把多个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。

例如：

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

若想将背景设置为银色，需将class属性中包含词important和warning，否则无法匹配。

二、结合元素选择器使用

类选择器可以结合元素选择器来使用。

p.important {color:red;}

选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。

【ID选择器】

在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。

类选择器与ID选择器的区别：

区别1：id选择器只能在文档中使用一次。

与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。（多次使用可以显示样式，但是加入后面的js后，如果想检索id会出现问题。）

区别2：不能使用ID词列表。

不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

区别3：ID包含更多的含义。

类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。

语法：

*#intro {font-weight:bold;}

与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：

#intro {font-weight:bold;}

这个选择器的效果将是一样的。

例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。在这种情况下，可以编写如下规则：

#mostImportant {color:red; background:yellow;}

这个规则会与以下各个元素匹配（这些元素不能在同一个文档中同时出现，因为它们都有相同的 ID 值）：

<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>

结合元素选择器：

例子：

<html>
<head>
<style type="text/css">
h1#mostImportant {color:red; background:yellow;}
</style>
</head>

<body>
<h1 id="mostImportant">This is important!</h1>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

</body>
</html>

【属性选择器】

属性选择器可以根据元素的属性及属性值来选择元素。

语法：

如果您希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

或者：

[title] {color:red;}

例子：

<html>
<head>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head>

<body>
<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>

<hr />

<h1>无法应用样式：</h1>
<h2>Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>
</body>
</html>

一、可以针对某一元素应对样式

例子：

a[href] {color:red;}

上面例子只对有href属性的a元素应对样式。

二、可根据多属性进行选择

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

例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

应用样式时必须同时含有属性href和属性title,缺一不可。

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

例子：

假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：

a[href="http://www.baidu.com"] {color: red;}

例子：

与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

例子：

与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

这会把以下标记中的第一个超链接的文本变为红色，但是第二个或第三个链接不受影响：

<a href="http://www.w3school.com.cn/" title="W3School">W3School</a>
<a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a>
<a href="http://www.w3school.com.cn/html/" title="HTML">HTML</a>

根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

p[class~="important"] {color: red;}

部分值属性选择器与点号类名记法的区别

该选择器等价于我们在类选择器中讨论过的点号类名记法。

也就是说，p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。

那么，为什么还要有 "~=" 属性选择器呢？因为它能用于任何属性，而不只是 class。

例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于 title 文档的部分属性选择器，只选择这些图片：

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

这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

【后代选择器】

后代选择器（descendant selector）又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

一、根据上下文选择的元素

如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中。

语法解释

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。

因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。

【子元素选择器】

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素（中间不可间隔其他元素）。

选择子元素

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

结合后代选择器和子选择器

请看下面这个选择器：

table.company td > p

上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

【相邻兄弟选择器】

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

语法解释

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。

结合其他选择器

相邻兄弟结合符还可以结合其他结合符：

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

【伪类】

CSS 伪类用于向某些选择器添加特殊的效果。

语法

伪类的语法：

selector : pseudo-class {property: value}

类也可与伪类搭配使用。

selector.class : pseudo-class {property: value}

单独使用例子：

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

与类结合使用例子：

a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>

1、first-child伪类

first-child 伪类来选择元素的第一个子元素。即选择元素所在父元素中第一次出现的地方会改变样式。

例子：

<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

在上面的例子中，作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。

给定以下规则：

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

例子：

<html>
<head>
<style type="text/css">
p > i:first-child {
  font-weight:bold;
  } 
</style>
</head>

<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

在上面的例子中，选择器匹配所有 <p> 元素中的第一个 <i> 元素。

例子 - 匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素

在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

<html>
<head>
<style type="text/css">
p:first-child i {
  color:blue;
  } 
</style>
</head>

<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body></html>

2、lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则。

在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：

<html>
<head>

<style type="text/css">
q:lang(no)
   {
   quotes: "~" "~"
   }
</style>

</head>

<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>

伪类

W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

【伪元素】

伪元素用于向某些选择器设置特殊效果。

语法

伪元素的语法：

selector:pseudo-element {property:value;}

CSS 类也可以与伪元素配合使用：

selector.class:pseudo-element {property:value;}

:first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。

在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：

实例

p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }

注释： "first-line" 伪元素只能用于块级元素。

:first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式：

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

注释： "first-letter" 伪元素只能用于块级元素。

伪元素可以与 CSS 类配合使用：

p.article:first-letter
  {
  color: #FF0000;
  }

<p class="article">This is a paragraph in an article。</p>

上面的例子会使所有 class 为 article 的段落的首字母变为红色。

多重伪元素

可以结合多个伪元素来使用。

在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

p:first-line
  {
  color:#0000ff;
  font-variant:small-caps;
  }

before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个 <h1> 元素前面插入一幅图片：

h1:before
  {
  content:url(logo.gif);
  }

after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个 <h1> 元素后面插入一幅图片：

h1:after
  {
  content:url(logo.gif);
  }

伪元素

W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2

xuan_liu1992

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器总结

CSS选择器在我看来可分为4大类，分别是类选择器、ID选择器、元素选择器、属性选择器。后面的后代选择器、子元素选择器、相邻兄弟选择器可分别用在上面4大类里。【类选择器】官方一点的说法，类选择器允许以一种独立于文档元素的方式来指定样式。类选择器可以单独使用，也可以与元素选择器结合使用。
复制链接

扫一扫