*
表示,它不匹配某个特定的 HTML 元素,而是匹配 HTML 文档中的每个元素。在开发中,我们通常使用通用选择器来清除 HTML 元素中默认的内外边距,如下所示:* { margin: 0 auto; padding: 0; }
注意:虽然通用选择器内的样式规则能够应用于 HTML 文档中的每个元素,但并不建议在生产环境中过于频繁地使用通用选择器。正是因为通用选择器会匹配网页上每个元素的特点,频繁的使用会给浏览器带来太多不必要的压力。
p { color: blue; }
p
选择器能够匹配文档中所有的 <p>
标签。#
,后面紧跟 ID 属性的值,如下所示:#nav { color: red; }
#nav
选择器能够匹配文档中具有 id="nav"
属性的标签。.
,后面紧跟 class 属性的值,如下所示:.black { color: black; }
.black
选择器能够匹配文档中所有具有 class="black"
属性的标签。p.black { color: black; }
p.black
选择器仅会将其中的样式应用到所有具有 class="black"
属性的 <p>
标签中,对于其它的具有 class="black"
属性的标签则没有影响。<p class="info selected"></p> <p class="info"></p>假如我们要为所有 class 属性包含 info 的元素设置粗体,为所有 class 属性包含 selected 的元素设置红色字体,为 class 属性中既包含 info 又包含 selected 的元素设置蓝色背景,则可以写成下面这样:
.info { font-weight:bold; } .selected { color: red; } .info.selected { background: blue; }这种由多个 class 属性值所组成的类选择器我们可以称之为“多类选择器”,而前面介绍的由单个 class 属性值定义的类选择器可以称为“单类选择器”。
注意:多类选择器中,多个 class 属性之间是紧挨着的(例如 .info.selected),不需要使用空格分开。
<p>
标签嵌套在一个 <div>
标签内部的时候,就可以将这个 <p>
标签看作是 <div>
标签的后代。当我们需要选择一个标签的后代标签时,就可以使用后代选择器。后代选择器的定义方式就是将标签名、class 属性或 id 属性等按照标签的嵌套关系由外到内的依次罗列,中间使用空格分开,如下所示:ul li a { text-decoration: none; }
ul li a
选择器仅会匹配无序列表 <ul>
标签的所有后代 <a>
标签。>
分隔开,如下所示:p > strong { color:red; }
p > strong
选择器会将下面代码中第一个 <p>
标签的子标签 <strong>
内的文字设置为红色,但对第二个 <p>
标签中的 <strong>
标签则没有影响。<p>欢迎访问<strong>编程帮</strong>!</p> <p><em><strong>编程帮(lmcjl.com)</strong></em>,一个在线学习编程的网站,专注于分享优质编程教程。</p>
+
,加号两边为相邻的两个元素,选择器会匹配加号后面的元素,如下所示:h1 + p { color: blue; font-size: 18px; } ul.task + p { color: #f0f; text-indent: 30px; }
h1 + p
选择器会匹配同一父级元素下紧邻<h1>
标签并在其后的 <p>
标签。ul.task + p
选择器则会匹配同一父级元素下紧邻<ul>
标签并在其后的<p>
标签,但<ul>
要具有 class="task"
属性。~
,波浪号两边为同一父级元素下的两个元素,选择器会匹配波浪号后面的元素,如下所示:h1 ∼ p { color: blue; font-size: 18px; }
h1 ∼ p
选择器会匹配同一父级元素下 <h1>
标签之后的所有<p>
标签。,
进行分隔,这么做可以避免定义重复的样式规则,最大程度地减少 CSS 样式表中的代码。例如,在 CSS 样式表中,不同的选择器中可能包含同样的样式规则,如下所示:h1 { font-size: 36px; font-weight: normal; } h2 { font-size: 28px; font-weight: normal; } h3 { font-size: 22px; font-weight: normal; }我们可以看到选择器
h1
、h2
、h3
中包含相同的样式 font-weight: normal;
,这时就可以先使用分组选择器为 h1
、h2
、h3
定义它们之间同样的样式规则,然后再分别定义它们之间不同的样式规则,如下所示:h1, h2, h3 { font-weight: normal; } h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 22px; }
[ ]
来指定标签具有的属性信息,如下所示:input[type="text"] { color: blue; }
input[type="text"]
选择器会匹配所有具有 type="text"
属性的<input>
标签。[ ]
内的属性信息还支持以下几种写法: target
属性元素; target="_blank"
属性的元素; title
属性包含单词“flower”的所有元素; lang
属性正好是“en”或以“en”为开头的所有元素。
本文链接:http://task.lmcjl.com/news/7289.html