css

>尖括号  http://www.w3school.com.cn/css/css_selector_child.asp 选择子元素

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

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

h1 > strong {color:red;}

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

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

 

 

+号 http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp

选择相邻兄弟 语法解释

相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。

注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。

请看下面这个文档树片段:

<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>

在上面的片段中,div 元素中包含两个列表:一个无序列表,一个有序列表,每个列表都包含三个列表项。这两个列表是相邻兄弟,列表项本身也是相邻兄弟。不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。

 

 

属性选择器

如果您希望把包含标题(title)的所有元素变为红色,可以写作:

*[title] {color:red;}

 

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

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

a[href][title] {color: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 的元素,可以用下面这个选择器做到这一点:

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

 

子串匹配属性选择器

下面为您介绍一个更高级的选择器模块,它是 CSS2 完成之后发布的,其中包含了更多的部分值属性选择器。按照规范的说法,应该称之为“子串匹配属性选择器”。

很多现代浏览器都支持这些选择器,包括 IE7。

下表是对这些选择器的简单总结:

类型                                        描述

[abc^="def"]           选择 abc 属性值以 "def" 开头的所有元素

[abc$="def"]            选择 abc 属性值以 "def" 结尾的所有元素

[abc*="def"]            选择 abc 属性值中包含子串 "def" 的所有元素

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

举例来说,如果希望对指向 W3School 的所有链接应用样式,不必为所有这些链接指定 class,再根据这个类编写样式,而只需编写以下规则:

a[href*="w3school.com.cn"] {color: red;}

 

特定属性选择类型

最后为您介绍特定属性选择器。请看下面的例子:

*[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>

 

 

和CSS2 - :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>

 

 

为 XML 文档使用属性选择器

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

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

planet[moons] {color:red;}

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

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

 

同样地,XML 语言也可以利用这种方法来设置样式。

下面我们再回到行星那个例子中。假设只希望选择 moons 属性值为 1 的那些 planet 元素:

planet[moons="1"] {color: red;}

上面的代码会把以下标记中的第二个元素变成红色,但第一个和第三个元素不受影响:

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

 

 

伪类

W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2)。

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

 

 

伪元素

W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2)。

属性                      描述                                               CSS

:first-letter            向文本的第一个字母添加特殊样式。   1

:first-line               向文本的首行添加特殊样式。            1

:before                 在元素之前添加内容。                      2

:after                    在元素之后添加内容。                      2

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。