css选择器2

CSS选择器

元素选择器

选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。

通配符选择器

显示为一个星号（*）。该选择器可以与任何元素匹配。

* {color:red;}
#该规则使文本每个元素显示为红色

CSS类选择器

*.important {color:red;} 和 .important {color:red;}效果完全相同。
1、结合元素选择器

#只想要h1标题显示红色
h1.important {color:red;}

选择器现在会匹配 class 属性包含 important 的所有 h1 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。
2、多类选择器
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔，词的顺序无关紧要。

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

<p class="important warning">
This paragraph is a very important warning.
</p>
#同时包含这两个词的元素背景为银色

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

ID选择器

与类选择器不同：
1、在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
2、ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

属性选择器

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

[title]
{ background:silver;}
#包含标题（title）的所有元素背景变为银色
<p title="百度">百度</p>
<a href="www.baidu.com" title="百度">百度</a>
<h1 class="important" title="important">This heading is very important.</h1>

也可以只对有 title/href 属性的锚（a 元素）应用样式。

a[href]
{color:red;}
#该样式不能作用于不包含特定属性的特定元素

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

a[href][title] {color:red;}
#将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色

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>
#第一个超链接的文本变为红色，但是第二个或第三个链接不受影响

注意：属性与属性值必须完全匹配，属性值也可以包含用空格分隔的值列表。

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

p[class~="important"] {color: red;}
#选择 class 属性中包含 important 的元素

子串匹配属性选择器

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

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

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

特定属性选择器

*[lang|="en"] {color: red;}
#这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素

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

后代选择器

如果您希望只对 h1 元素中的 em 元素应用样式

h1 em {color:red;}

这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中。当然也可以在 h1 中找到的每个 em 元素上放一个 class 属性，但是显然，后代选择器的效率更高。

**注意：**两个元素之间的层次间隔可以是无限的。不论子元素的嵌套层次多深。

子元素选择器

与后代选择器相比，选择范围更加小，后代选择器可以选择任意嵌套内的后代，但是子元素选择器只能选择作为某元素子元素
的元素。

h1 > strong {color:red;}

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
#第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响

相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素。用一个结合符只能选择两个相邻兄弟中的第二个元素。

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>

li + li {font-weight:bold;}
#只能让第二三个列表项变粗，第一个不受影响

注意： 选择器结合怎么读：

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

选择紧接在table元素后的所有兄弟元素ul，table元素包含在body元素中，body元素是table元素的子元素。