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元素的子元素。