CSS选择器

最新推荐文章于 2021-08-04 04:17:29 发布

tutucute0000

最新推荐文章于 2021-08-04 04:17:29 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/tutucute0000/article/details/24935253

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1. css选择器

css中提供了多种选择器来让我们定位到自己想要的元素。具体如下表格：

模式	含义及说明	名称
*	匹配任意元素	全局选择器
E	匹配任意E元素（即类型为E的元素）。	元素选择器
E F	匹配是E元素后代的任意F元素。	后代选择器
E > F	匹配是E元素子元素的任意F元素。与上者的区别在于，E F中F只要是E的后代就可以，但E > F中F必须是E的child	子元素选择器
E:first-child	当元素E是其父元素的第一个子元素时，匹配E元素。	伪类
E:link E:visited	当元素E是一个超连接的链时，如果目标还未被访问（:link），已经访问（:visited）时，匹配元素E。	伪类
E:hover E:active E:focus	匹配特定用户行为：鼠标移到目标E上（:hover），用户按下鼠标到放开鼠标的这一段时间内（:active），一个元素获得焦点（:focus）。对于a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。	伪类
E:lang(c)	匹配E类型的元素，如果它以（人类）语言c写成（文档语言规定如何确定语言）。这个不太能理解，把w3school的例子copy过来 `<html> <head> <style type="text/css"> q:lang(no) { quotes: "~" "~" } </style> </head> <body> <p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p> </body> </html>` 结果如下：	伪类
E + F	匹配任意F元素，如果紧接在前的是E元素，且E F拥有相同的父元素。	相邻兄弟选择器
E[foo]	匹配任意E元素，如果它设置了"foo"属性（不管值是什么）。如果想引用一个元素的几个属性，可以将多个属性选择器链接在一起，写成例如E[foo][lang]，即匹配同时设置了foo和lang属性的元素。这种多重属性选择对以下3种模式同样适用。	属性选择器
E[foo="warning"]	匹配任意E元素，如果它设置了"foo"属性，并且属性值为"warning"。	属性选择器
E[foo~="warning"]	匹配任意E元素，如果它的"foo"属性值是一个以空格分割的列表，且其中之一为"warning"。例如[foo~="warning"]可以匹配foo值为“important warning"或是"warning not important"的元素。	属性选择器
E[abc^="def"]	匹配任意E元素，如果它的"abc 属性值以 "def" 开头。	属性选择器
E[abc$="def"]	匹配任意E元素，如果它的"abc 属性值以 "def" 结尾。	属性选择器
E[abc*="def"]	匹配任意E元素，如果它的"abc 属性值包含"def"子串。	属性选择器
E[lang\|="en"]	匹配任意E元素，它的"lang"属性值是一个以连字号分割的列表，并且以"en"开头（从左到右算）。例如[lang\|="en"]可以匹配lang值为"en"，"en-US"和"en-cockney"的元素，不能匹配”en US“和"enUS"。	属性选择器
E.warning	仅对HTML适用。等于E[class~="warning"]。例如，.warning可以匹配class="important warning"和class="not important warning"。如果希望可以匹配以空格分割的class值列表中的多个，可以通过把两个类选择器链接在一起，来选择同时包含这些类名的元素，例如.important.warning只会匹配前者。	类选择器
E#myid	匹配任何其ID为"myid"的E元素。ID类型属性的特殊之处在于，没有两个属性可以有相同的值。而且ID 属性不允许有以空格分隔的词列表。	ID选择器

通过上述选择器的组合，我们可以得到一个链状的复杂的选择器。例如

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

为了给某些选择器设置特殊效果，可以在上述链的最后使用如下伪元素：

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

例如:first-letter可以实现首字母大写且下沉的效果

<HTML>
 <HEAD>
  <TITLE>Drop cap initial letter</TITLE>
  <STYLE type="text/css">
   P              { font-size: 12pt; width: 100pt;}
   P:first-letter { font-size: 250%; font-style: italic;
                    font-weight: bold; float: left }
  </STYLE>
 </HEAD>
 <BODY>
  <P>The first few words of an article
    in The Economist.</P>
 </BODY>
</HTML>

为了使多个选择器分享相同的声明，我们可以给选择器分组，做法是用逗号将需要分组的选择器分开。在下面的例子对所有的标题元素进行了分组，使所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6 { color: green;}

2. 选择器的特殊性

文档中同一个元素匹配到多条规则时，选择器的特殊性越大的规则将被优先采用。

一个选择器的特殊性是这样计算的：

如果该规则声明在元素的style属性里，计为1（计为a的值）
计算选择子中ID属性的数量（计为b的值）
计算选择子中其它属性和伪类的数量（计为c的值）
计算选择子中元素名和伪元素的数量（计为d的值）

以a-b-c-d的顺序将4个数字相连，即得到选择器的特殊性。css specification中的示例如下

因此，下述代码中的p元素内容会是红色的，因为元素style属性中的规则具有最大的优先级。

<HTML>
  <HEAD>
    <STYLE type="text/css">
     #x97z { color: blue }
    </STYLE>
  </HEAD>
  <BODY>
    <P ID='x97z' style="color: red">p element</P>
  </BODY>
</HTML>