CSS选择器学习小结

最新推荐文章于 2023-02-08 18:43:48 发布

weixin_34148340

最新推荐文章于 2023-02-08 18:43:48 发布

阅读量192

点赞数 1

文章标签： xhtml 人工智能 ui

原文链接：http://www.cnblogs.com/JoannaQ/archive/2012/11/20/2778319.html

版权

前言：

半途出家做Front End，以前只是大概知道点，现在就必须从头把css好好看看啦，呜呜~~~~~~

一、基本选择器

序号	选择器	含义
1.	*	通用元素选择器，匹配任何元素
2.	E	标签选择器，匹配所有使用E标签的元素
3.	.info	class选择器，匹配所有class属性中包含info的元素
4.	#footer	id选择器，匹配所有id属性等于footer的元素

二、多元素的组合选择器

序号	选择器	含义
5.	E,F	多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔
6.	E F	后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
7.	E > F	子元素选择器，匹配所有E元素的子元素F
8.	E + F	毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

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

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。

如：E F，前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的所有后代Ｆ元素，请注意他们之间需要一个空格隔开。这里Ｆ不管是E元素的子元素或者是孙元素或者是更深层次的关系，都将被选中，换句话说，不论Ｆ在Ｅ中有多少层关系，都将被选中：

每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。

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

<html>
<head>
<style type="text/css">
h1 em {color:red;}
</style>
</head>
<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
</html>

注：两个元素之间的层次间隔可以是无限的，如ul em。

<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

所有浏览器都支的后代选择器

2.子元素选择器（Child selectors）只能选择作为某元素子元素的元素

后代选择器中Ｆ是Ｅ的后代元素，而子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素而以

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>
<body>
<h1>This is <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>

IE6不支持子元素选择器

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

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

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

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
</style>
</head>
<body>
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>
</body>
</html>

IE6不支持相邻元素选择器
四、属性选择器
CSS 2.1 属性选择器

序号	选择器	含义
9.	E[att]	匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）
10.	E[att=val]	匹配所有att属性等于“val”的E元素
11.	E[att~=val]	匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
12.	E[att\|=val]	匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，比如“en”、“en-us”、“en-gb”等等


CSS 2.1中的伪类

序号	选择器	含义
13.	E:first-child	匹配父元素的第一个子元素(必须声明 <!DOCTYPE>， :first-child 才能在 IE 中生效。)
14.	E:link	匹配所有未被点击的链接
15.	E:visited	匹配所有已被点击的链接
16.	E:active	匹配鼠标已经其上按下、还没有释放的E元素
17.	E:hover	匹配鼠标悬停其上的E元素
18.	E:focus	匹配获得当前焦点的E元素
19.	E:lang(c)	匹配lang属性等于c的E元素


 CSS 2.1中的伪元素

序号	选择器	含义
20.	E:first-line	匹配E元素的第一行(只能用于块级元素,可用在font，color，background，word-spacing，letter-spacing，text-decoration，vertical-align，text-transform，line-height，clear)
21.	E:first-letter	匹配E元素的第一个字母(只能用于块级元素,可用在font，color，background，margin，padding，border，text-decoration，vertical-align (仅当 float 为 none 时)，text-transform，line-height，float，clear)
22.	E:before	在E元素之前插入生成的内容
23.	E:after	在E元素之后插入生成的内容


CSS 3的同级元素通用选择器

序号	选择器	含义
24.	E ~ F	匹配任何在E元素之后的同级F元素

CSS 3 属性选择器

序号	选择器	含义
25.	E[att^=”val”]	属性att的值以"val"开头的元素
26.	E[att$=”val”]	属性att的值以"val"结尾的元素
27.	E[att*=”val”]	属性att的值包含"val"字符串的元素

CSS 3中与用户界面有关的伪类

序号	选择器	含义
28.	E:enabled	匹配表单中激活的元素
29.	E:disabled	匹配表单中禁用的元素
30.	E:checked	匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
31.	E::selection	匹配用户当前选中的元素


CSS 3中的结构性伪类

序号	选择器	含义
32.	E:root	匹配文档的根元素，对于HTML文档，就是HTML元素
33.	E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
34.	E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1
35.	E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素
36.	E:nth-last-of-type(n)	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
37.	E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
38.	E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
39.	E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
40.	E:only-child	匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
41.	E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
42.	E:empty	匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素

CSS 3的反选伪类

序号	选择器	含义
43.	E:not(s)	匹配不符合当前选择器的任何元素

CSS 3中的 :target 伪类

序号	选择器	含义
44.	E:target	匹配文档中特定"id"点击后的效果

请参看HTML DOG上关于该选择器的详细解释和实例。

1、简单属性选择

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>

例子 1：可以根据多个属性进行选择，只需将属性选择器链接在一起即可。例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
a[href][title]{color:red;}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<a title="W3School Home" href="http://w3school.com.cn">W3School</a>
<hr />
<h1>无法应用样式：</h1>
<a href="http://w3school.com.cn">W3School</a>
</body>
</html>

例子 2：可以采用一些创造性的方法使用这个特性。例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
img[alt]{border: 5px solid red;}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<img src="/i/w3school_logo_black.gif" alt="W3School Logo" />

<hr />

<h1>无法应用样式：</h1>
<img src="/i/w3school_logo_black.gif" />
</body>
</html>

例子 3：为 XML 文档使用属性选择器

属性选择器在 XML 文档中相当有用，因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。

假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 moons 的行星，就可以这样写：

planet[moons] {color:red;}

这会让以下标记片段中的第二个和第三个元素的文本显示为红色，但第一个元素的文本不是红色：

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

2、根据具体属性值选择：使用 "=" 符号

可以把多个属性-值选择器链接在一起来选择一个文档。

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>

例子 4：设置表单的样式

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
　　<input type="text" name="Name" value="Bill" size="20">
　　<input type="text" name="Name" value="Gates" size="20">
　　<input type="button" value="Example Button">
</form>
</body>
</html>

请注意，这种格式要求必须与属性值完全匹配。如果属性值包含用空格分隔的值列表，匹配就可能出问题。

3、根据部分属性值选择

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
<p class="important">This is a paragraph.</a>
<hr />
<h1>无法应用样式：</h1>
<p class="warning">This is a paragraph.</a>
</body>
</html>

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

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

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

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
img[title~="Figure"]{border: 1px solid gray;}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<img title="Figure 1" src="/i/figure-1.gif" />
<img title="Figure 2" src="/i/figure-2.gif" />
<hr />
<h1>无法应用样式：</h1>
<img src="/i/figure-1.gif" />
<img src="/i/figure-2.gif" />
</body>
</html>

例子 5：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>

例子 6：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
*[lang|="en"] {color: blue;}
{
color: red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<hr />
<h1>无法应用样式：</h1>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
</body>
</html>

例子 7：

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
img[src|="/i/figure"] {border: 1px solid gray;}
{border: 1px solid gray;}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<img title="Figure 1" src="/i/figure-1.gif" />
<img title="Figure 2" src="/i/figure-2.gif" />
<hr />
<h1>无法应用样式：</h1>
<img src="/i/eg_w3school.gif" />
</body>
</html>

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

高效CSS选择符的关键

最右边有限 CSS选择符是从右到左进行匹配，例如#id > p 这样的选择符，浏览器是先遍历页面上每个p元素并确定其父元素的id。后代选择符#id a也是同样的原理，开销非常大。

Safari和WebKit的架构师 David Hyatt 在一篇《Writing Efficient CSS for use in the Mozilla UI》（《在Mozilla UI中编写搞笑的CSS》）文章中揭示了这些内容，在有关CSS选择符性能的文章中，这篇是被引用次数最多的文章之一：

样式系统从最右边的选择符开始向左匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。

理解了选择符从右到左的匹配之后，我们就可以从另一个角度看CSS选择符，并将其调整得更高效。解析来继续了解 David Hyatt 提供的编写搞笑选择符指南：

避免使用通配规则除了传统意义上的通配选择符 * ，相邻兄弟元素选择符、子选择符、后代选择符、属性选择符都归纳到“通配规则”分类下。推荐仅使用id、类、标签选择符。
不要限制ID选择符 div#id 简化为#id
不要限制类选择符 li.chapter 改写为.li-chapter 或者 .list-chapter
让规则越具体越好不要试图编写像“ol li a”这样的长选择符，最好创建像.list-anchor一样的类
避免使用后代选择符通常处理后代选择符的开销是最高的，而是用子选择符也可以得到想要的效果，并且更高效。
避免使用标签————子选择符如果有像”#id>li>a”这样基于标签的子选择符，那么应该使用一个类来关联每个标签元素，如.list-anchor
质疑子选择符的所有用途检查所有使用子选择符的地方，尽可能用具体的类取代他们
依靠继承了解哪些属性可以通过继承而来，避免对这些属性重复指定规则。

CSS选择符的性能
复杂的选择符影响性能大量低效的CSS选择符会对性能产生负面影响。
重心在关键选择符上从右到左匹配，关键选择符在最右边。

转载于:https://www.cnblogs.com/JoannaQ/archive/2012/11/20/2778319.html

weixin_34148340

关注

1
点赞
踩
0

收藏

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

前言：半途出家做Front End，以前只是大概知道点，现在就必须从头把css好好看看啦，呜呜~~~~~~一、基本选择器序号选择器含义1.*通用元素选择器，匹配任何元素2.E标签选择器，匹配所有使用E标签的元素3..infoclass选择器，匹配所有class属性中包含info的元素4.#f...
复制链接

扫一扫