CSS选择器

最新推荐文章于 2023-02-09 22:09:43 发布

在到处之间找我

最新推荐文章于 2023-02-09 22:09:43 发布

阅读量419

点赞数

分类专栏： # CSS学习笔记

本文链接：https://blog.csdn.net/sinat_41104353/article/details/79443148

版权

CSS学习笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

选择器一般只出现在文档内嵌样式表和外部样式表中，在元素内嵌样式表中基本上是不存在的。

元素/类型选择器（根据类型选择元素）

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

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

类型选择器匹配文档元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。

<!-- 如果设置HTML样式，选择器通常是某个HTML元素，比如p、h1、em、a，甚至可以是html本身 -->

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

<!DOCTYPE HTML>
<html lang='en'>    
    
<head>    
  <style type="text/css">    
    h1 {color: red}  
  </style>    
</head>    
    
<body>    
  <h1>根据类型选择元素</h1>
  <br /><br />
  <p>p元素的样式没有定义，因此不变</p>
</body>    
    
</html>

通配选择器

通配符使用星号（*）表示，意思是“所有的标签或元素”。

比如下例就把所有的元素的字体设置为红色。

* {color: red;}

<!DOCTYPE HTML>
<html lang='en'>    
    
<head>    
  <style type="text/css">    
    * {color: red}  <!-- 此处设置为*，表示选择所有元素 -->
  </style>    
</head>    
    
<body>    
  <h1>选择所有元素</h1>
  <br /><br />
  <p>用*设置了选择所有元素，因此所有元素的样式都改变</p>
</body>    
    
</html>

*会匹配所有的元素，因此针对所有的元素的设置可以使用*来完成，用的最多的例子如下：

*{margin:0px; padding:0px;}

<!-- 这里是设置所有元素的外边距margin和内边距padding都为0 -->

缺点

由于*会匹配所有的元素，这样会影响网页渲染的时间。

因此很多人开始停止使用*通配符选择器，取而代之的是，把所有需要设置的元素放在一起，一起设置。

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}

选择器分组

假设希望h2元素和段落都有灰色。为了达到这个目的，最简单的做法是使用以下声明：

h2, p {color:gray;}

将h2和p选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color：gray）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有逗号，那么桂增的含义会被解释为后代选择器。

可以将任意多个选择器分组在一起，对此没有限制。

例如，如果想把很多个元素显示为灰色，可以使用类似如下规则

body, h2, p, table, th, td, pre, strong, em {color:gray;}

声明分组

我们既可以对选择器进行分组，也可以对声明分组。

<!-- 假设您希望所有 h1 元素都有红色背景，并使用 28 像素高的 Verdana 字体显示为蓝色文本，可以写以下样式 -->
h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}


<!-- 但是上面这种做法的效率并不高。尤其是当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反，我们可以将声明分组在一起 -->
h1 {font: 28px Verdana; color: white; background: black;}

<!-- 分组提供了一些有意思的选择。例如，下例中的所有规则分组都是等价的，每个组只是展示了对选择器和声明分组的不同方法 -->
/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}

/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}

/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}


<!-- 请注意，group 3 中使用了“声明分组” -->

派生选择器

通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。

--在CSS1中，通过这种方式来应用规则的选择器被称为上下文选择器（contextual selectors），这是由于他们依赖于上下文关系来应用或者避免某项规则

--在CSS2中，它们被称为派生选择器。但无论如何怎么称呼它们，它们的作用是一样的

派生选择器允许我们根据文档的上下文关系来确定某个标签的样式。合理的使用派生选择器可以使HTML代码变得更加整洁。

比如说，当我们希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong {
    font-style: italic;
    font-weight: normal;
  }

请注意标记为<strong>的上下文关系：

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
  <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
  <li>我是正常的字体。</li>
</ol>

在上面的例子中，只有li元素中的strong元素的样式为斜体字，无需为strong元素定义特别的class或id，代码更加简洁。

<!-- 一个CSS规则 -->
strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     

<!-- 该CSS施加影响的HTML -->
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

类选择器（根据类选择元素）

类选择器允许以一种独立于文档元素的方式来指定样式

该选择器可以单独使用，也可以和与其他元素结合使用。

要应用样式而不考虑具体设计的元素，最常用的方式就是使用类选择器。

在CSS中，类选择器以一个点号显示。

为了将类选择器的样式与元素相关联，必须将class指定为一个适当的值。

注意：类名的第一个字符不能使用数字，它无法在Mozilla或Firefox中起作用。

语法

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

*.important {color:red;}




<!-- 如果只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响 -->

.important {color:red;}

<!-- 此例中，p元素和第一个a元素都有class1类。这意味着两者都将遵循“.class1”选择器中的规则 -->
<!DOCTYPE HTML>
<html lang='en'>    
    
<head>    
  <style type="text/css">    
    .class1 {color: red}  <!-- 注意. -->
  </style>    
</head>    
    
<body>    
  <h1>类选择器</h1>
  <br /><br />
  <p class='class1'>class表示一个类</p>  <!-- 为了将类选择器的样式与元素相关联，必须将class指定为一个适当的值。 -->
  <br /><br />
  <a class='class1'>a元素和p元素都属于class1类，因此样式一样</a>
  <br /><br />
  <a>而该a元素并不属于class1类，因此样式和上面的a元素样式不同</a>
</body>    
    
</html>

class也可被用作派生选择器

<!-- 在此例中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字 -->
<!-- 名为fancy的更大的元素可能是一个表格或者一个div -->
.fancy td {
	color: #f60;
	background: #666;
	}

结合元素选择器（元素也可以基于他们的类而被选择）

<!-- 此例中，类名为fancy的 表格单元 将是带有灰色背景的橙色 -->
td.fancy {
	color: #f60;
	background: #666;
	}

<td class="fancy">

<!-- 我们可以将类fancy分配给任何一个表格元素任意多的次数 -->
<!-- 那些以fancy标注的单元格都会是带有灰色背景的橙色 -->

<!-- 那些没有被分配名为fancy的类的单元格不会受这条规则的影响 -->
<!-- 还有一点值得注意的是，class为fancy的段落也不会是带有灰色背景的橙色。当然，任何其他被标注为fancy的元素也不会受这条规则的影响 -->
<!-- 这都是由于我们书写这条规则的方式，这个效果被限制于标注为fancy的表格单元（即使用td元素来选择fancy类） -->

多类选择器

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

<-- 如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作 -->

<p class="important warning">
This paragraph is a very important warning.
</p>

<!-- 这两个词的顺序无关紧要，写成 warning important 也可以。 -->

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

<!-- 假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作 -->
<html>
<head>
<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
</style>
</head>

<body>
<p class="important">This paragraph is very important.</p>

<p class="warning">This is a warning.</p>

<p class="important warning">This paragraph is a very important warning.</p>

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

</body>
</html>

如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。

.important.urgent {background:silver;}

上述的选择器只匹配class属性中同时包含词important和urgent的元素。因此如果一个元素的class属性只有词important或词warning，将不能匹配。不过它能匹配以下元素：

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

id选择器（根据id选择元素）

id选择器允许以一种独立于文档元素的方式来指定样式

id选择器可以为标有特定id的HTML元素指定特定的样式。

id选择器以“#”来定义。

<!DOCTYPE HTML>
<html lang='en'>    
    
<head>    
  <style type="text/css">    
    #id1 {color: red}  
    #id2 {color: green}
  </style>    
</head>    
    
<body>    
  <h1 id='id1'>id选择器</h1>
  <br /><br />
  <p id='id2'>一个id 属性只能在每个 HTML 文档中出现一次。即id1和id2只能使

用一次</p>
</body>    
    
</html>

注意：每个id属性值只能在每个HTML文档中出现一次。

id选择器和派生选择器

在现代布局中，id选择器常常用于建立派生选择器。

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

<!-- 上面的样式只会应用于出现在id是sidebar的元素内的段落。 -->
<!-- 这个元素很可能是div或者是表格元素，尽管他也可能是一个表格或其他块级元素 -->
<!-- 这个元素甚至可能是内联元素，比如<em></em>或者<span></span>，不过这样的用法是非法的，因为不可以在内联元素<span>中嵌入<p> -->

一个选择器，多种用法

即使被标注为sidebar的元素只能在文档中出现一次，这个id选择器作为派生选择器也可以被使用很多次。

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

<!-- 在这里，与页面中的其他p元素明显不同的是，sidebar内的p元素得到了特殊的处理 -->
<!-- 同时，与页面中的其他p元素明显不同的是，sidebar中的h2元素也得到了不同的特殊处理 -->

单独的处理器

id选择器即使不被用来创建派生选择器，它也可以独立发挥作用：

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

根据这条规则，id为sidebar的元素将拥有一个像素宽的黑色点状边框，同时其周围会有10个像素宽的内边距（padding，内部空白）。老版本的Windows/IE浏览器可能会忽略这条规则，除非你特别的定义这个选择器所属的元素：

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

id选择器和类选择器的区别

区别一：与类选择器不同，在一个HTML文档中，id选择器会使用一次，而且仅一次。

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

区别三：id能包含更多的含义

类似于类，可以独立于元素来选择id。

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

例如，我们可能知道在一个给定的文档中会有一个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元素设置样式

可以为拥有指定属性的HTML元素设置样式，而不仅限于class和id属性

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

简单属性选择

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

<!-- 如果希望把包含标题（title）的所有元素变为红色，可以写作 -->
*[title] {color:red;}


<!-- 与上面类似，可以只对有 href 属性的锚（a 元素）应用样式 -->
a[href] {color:red;}


<!-- 还可以根据多个属性进行选择，只需将属性选择器链接在一起即可 -->
<!-- 例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写 -->
a[href][title] {color:red;}


<!-- 可以采用一些创造性的方法使用这个特性 -->
<!--例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像 -->
img[alt] {border: 5px solid red;}
<!-- 提示：上面这个特例更适合用来诊断而不是设计，即用来确定图像是否确实有效 -->

根据具体属性值选择

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

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

a[href="http://www.w3school.com.cn/about_us.asp"] {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>

属性和属性值必须完全匹配

注意，这种格式要求必须与属性值完全匹配。

如果属性值包含用空格分隔的值列表，匹配就可能出问题。

<p class="important warning">This paragraph is a very important warning.</p>

如果写成 p[class='important']，那么这个规则不能匹配示例标记。

要根据具体属性值来选择该元素，必须这样写：

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

根据部分属性值选择

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

假设希望选择class属性中包含important元素，可以这样实现：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p[class~="important"]
{
color: red;
}
</style>
</head>

<body>
<h1>可以应用样式：</h1>
<p class="important warning">This is a paragraph.</a>  <!-- 包含important -->
<p class="important">This is a paragraph.</a>  <!-- 包含important -->

<hr />

<h1>无法应用样式：</h1>
<p class="warning">This is a paragraph.</a>  <!-- 没有包含important -->
</body>
</html>

如果忽略了波浪号，则说明需要完成完全值匹配。

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

该选择器等价于类选择器中的点号类记名法。

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

"~="属性选择器存在是因为它能用于任何属性，而不只是class

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

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

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

子串匹配属性选择器

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

可以想到，这些选择有很多用途。

如果希望指向对W3School的所有链接应用样式，不必为所有这些链接指定class，再根据这个类编写样式：

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    a[href*="w3school.com.cn"]
    {
       color: red;
    }
  </style>
</head>

<body>
<h1>可以应用样式：</h1>
<a href="http://www.w3school.com.cn/">W3School</a>
<a href="http://www.w3school.com.cn/css/">CSS</a>
<a href="http://www.w3school.com.cn/html/">HTML</a>

<hr />

<h1>无法应用样式：</h1>
<a href="http://www.w3c.org/">W3C</a>
<a href="http://www.microsoft.com">Microsoft</a>
<a href="http://www.apple.com.cn">Apple</a>
</body>
</html

特定属性选择器

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

上面这个规则会选择lang属性等于en或以en开头的所有元素。

因此，以下示例中的前三个元素会被选中，而不会选择后两个元素：

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>

<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

一般来说，[att|='val']可以用于任何属性及其值。

假设一个HTML文档中有一系列图片，其中每个图片的文件名都形如figure-1.jpg和figure-2.jpg。就可以使用以下选择器匹配所有这些图像：

img[src|="figure"] {border: 1px solid gray;}

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

小结

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

在到处之间找我

关注

0
点赞
踩
0

收藏

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

选择器一般只出现在文档内嵌样式表和外部样式表中，在元素内嵌样式表中基本上是不存在的。元素/类型选择器（根据类型选择元素）最常见的CSS选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。在W3C标准中，元素选择器又称为类型选择器（type selector）。类型选择器匹配文档元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。&lt;!-- 如果设置HTML样式，选择器通常是某...
复制链接

扫一扫

专栏目录