CSS 选择器
2017-02-08 17:39
393 查看
1 CSS 元素选择器 (引用http://www.w3school.com.cn/css/css_selector_type.asp)
1.1 最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
1.2 CSS 分组 选择器分组
将任意多个选择器分组在一起，以逗号分隔 对此没有任何限制
1.3 通配符选择器 （*开头）
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个 星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
例如，下面的规则可以使文档中的每个元素都为红色：
1.3 声明分组 也就是多个属性写在一起，使用逗号分隔
h1 {font: 28px Verdana; color: white; background: black;}
2 CSS 类选择器详解(http://www.w3school.com.cn/css/css_selector_class.asp)
2.1 类选择器以 .开头
.important {color:red;} (important 为类名)
2.2 结合元素选择器
类选择器可以结合元素选择器来使用。
p.important {color:red;}
2.3 CSS 多类选择器
一个元素的类有多个列表, .important.warning {background:silver;} 就能匹配
.important.urgent {background:silver;} 能匹配<p class="important urgent warning">，但是不能匹配 <p class="important warning">
3 CSS ID 选择器详解（http://www.w3school.com.cn/css/css_selector_id.asp）
语法： ID 选择器前面有一个 # 号 ， 也称为棋盘号或井号。
*#intro {font-weight:bold;} 或 #intro {font-weight:bold;} 匹配(前面一个*表示通配符) <p id="intro">This is a paragraph of introduction.</p>
类选择器还是 ID 选择器？的区别
区别 1：只能在文档中使用一次（id唯一）
区别 2：不能使用 ID 词列表（id不能有列表，以空格分开多个值）
4 CSS 属性选择器详解(http://www.w3school.com.cn/css/css_selector_attribute.asp)
CSS 2 引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素
4.1简单属性选择： 希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
4.1.1 如果您希望把包含标题（title）的所有元素变为红色，可以写作：*[title] {color:red;}
4.1.2 与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：a[href] {color:red;}
4.1.3 还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写:
a[href][title] {color:red;}
<a title="W3School Home" href="http://w3school.com.cn">W3School</a> 生效
<a href="http://w3school.com.cn">W3School</a> 失效
4.2 根据具体属性值选择
4.2.1 单个属性值
a[href="http://www.w3school.com.cn"] {color: red;}
4.2.2 多个属性值
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
4.2.3 属性与属性值必须完全匹配
p[class="important"] {color: red;} ：不匹配
p[class="important warning"] {color: red;}：匹配
<p class="important warning">This paragraph is a very important warning.</p>
4.2.4 根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
p[class~="important"] {color: red;}
<p class="important warning">This is a paragraph.</a> ：匹配
<p class="important">This is a paragraph.</a> ：匹配
<p class="warning">This is a paragraph.</a> ：不匹配
4.2.3 子串匹配属性选择器
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
*[lang|="en"] {color: red;}
<p lang="en">Hello!</p> ：匹配
<p lang="en-us">Greetings!</p>：匹配
<p lang="en au">G'day!</p> ：不匹配
<p lang="fr">Bonjour!</p> ：不匹配
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
5 CSS 后代选择器
后代选择器（descendant selector）又称为包含选择器。
5.1 根据上下文选择元素
h1 em {color:red;} (h1和em需要以空格分开)
<h1>This is a <em>important</em> heading</h1> ：匹配
<p>This is a <em>important</em> paragraph.</p> ：不匹配
6 CSS 子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
h1 > strong {color:red;} （改成后代选择器 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> ：不匹配
语法解释：
您应该已经注意到了，子选择器使用了大于号（子结合符），两边可以有空白符，这是可选的。
7 CSS 相邻兄弟选择器(也就是后面一个元素)
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p{margin-top:50px;font-weight:bold}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
8 CSS 伪类 (Pseudo-classes)
8.1 语法
伪类的语法： selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。selector.class : pseudo-class {property: value}
PS :提示：伪类名称对大小写不敏感。
8.2 例子 1 - 匹配第一个 <p> 元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的 p 元素
8.3 例子 2 - 匹配所有 <p> 元素中的第一个 <i> 元素
在下面的例子中，选择器匹配所有 <p> 元素中的第一个 <i> 元素：
8.4 例子 3 - 匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：
8.5
伪类
W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。
属性 描述 CSS
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。 2
:lang 向带有指定 lang 属性的元素添加样式。 2
CSS2 - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：
9 CSS 伪元素 (Pseudo-elements)
CSS 伪元素用于向某些选择器设置特殊效果。
9.1 语法
伪元素的语法： selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用： selector.class:pseudo-element {property:value;}
9.2 :first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。"first-line" 伪元素只能用于块级元素。
注释：下面的属性可应用于 "first-line" 伪元素：
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
(P段落第一行文字才变颜色)
9.3 :first-letter 伪元素 （通 上述 9.2 ）
"first-letter" 伪元素只能用于块级元素。
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
p段落第一个字母变颜色，第一个字是中文那就是中文变颜色
p:first-letter
{
color:#ff0000;
}
9.4 伪元素和 CSS 类
伪元素可以与 CSS 类配合使用：
p.article:first-letter
{
color: #FF0000;
}
<p class="article">This is a paragraph in an article。</p>
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
9.5 CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容
9.5 CSS2 - :after 伪元素 (同 上述9.4)
":after" 伪元素可以在元素的内容之后插入新内容。 阅读更多
1.1 最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
<html>
<head>
<style type="text/css">
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<p>这是一段普通的段落。</p>
</body>
</html>
1.2 CSS 分组 选择器分组
将任意多个选择器分组在一起，以逗号分隔 对此没有任何限制
h2, p {color:gray;}1.3 通配符选择器 （*开头）
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个 星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
例如，下面的规则可以使文档中的每个元素都为红色：
<html>
<head>
<style type="text/css">
*{color:red;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<h3>这是 heading 3</h3>
<h4>这是 heading 4</h4>
<p>这是一段<b>普通</b>的段落文本。</p>
</body>
</html>
1.3 声明分组 也就是多个属性写在一起，使用逗号分隔
h1 {font: 28px Verdana; color: white; background: black;}
2 CSS 类选择器详解(http://www.w3school.com.cn/css/css_selector_class.asp)
<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>
2.1 类选择器以 .开头
.important {color:red;} (important 为类名)
2.2 结合元素选择器
类选择器可以结合元素选择器来使用。
p.important {color:red;}
2.3 CSS 多类选择器
一个元素的类有多个列表, .important.warning {background:silver;} 就能匹配
<p class="important warning">
This paragraph is a very important warning.
</p>
.important.urgent {background:silver;} 能匹配<p class="important urgent warning">，但是不能匹配 <p class="important warning">
3 CSS ID 选择器详解（http://www.w3school.com.cn/css/css_selector_id.asp）
语法： ID 选择器前面有一个 # 号 ， 也称为棋盘号或井号。
*#intro {font-weight:bold;} 或 #intro {font-weight:bold;} 匹配(前面一个*表示通配符) <p id="intro">This is a paragraph of introduction.</p>
类选择器还是 ID 选择器？的区别
区别 1：只能在文档中使用一次（id唯一）
区别 2：不能使用 ID 词列表（id不能有列表，以空格分开多个值）
4 CSS 属性选择器详解(http://www.w3school.com.cn/css/css_selector_attribute.asp)
CSS 2 引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素
4.1简单属性选择： 希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
4.1.1 如果您希望把包含标题（title）的所有元素变为红色，可以写作：*[title] {color:red;}
4.1.2 与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：a[href] {color:red;}
4.1.3 还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写:
a[href][title] {color:red;}
<a title="W3School Home" href="http://w3school.com.cn">W3School</a> 生效
<a href="http://w3school.com.cn">W3School</a> 失效
4.2 根据具体属性值选择
4.2.1 单个属性值
a[href="http://www.w3school.com.cn"] {color: red;}
4.2.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.2.3 属性与属性值必须完全匹配
p[class="important"] {color: red;} ：不匹配
p[class="important warning"] {color: red;}：匹配
<p class="important warning">This paragraph is a very important warning.</p>
4.2.4 根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
p[class~="important"] {color: red;}
<p class="important warning">This is a paragraph.</a> ：匹配
<p class="important">This is a paragraph.</a> ：匹配
<p class="warning">This is a paragraph.</a> ：不匹配
4.2.3 子串匹配属性选择器
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
*[lang|="en"] {color: red;}
<p lang="en">Hello!</p> ：匹配
<p lang="en-us">Greetings!</p>：匹配
<p lang="en au">G'day!</p> ：不匹配
<p lang="fr">Bonjour!</p> ：不匹配
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
5 CSS 后代选择器
后代选择器（descendant selector）又称为包含选择器。
5.1 根据上下文选择元素
h1 em {color:red;} (h1和em需要以空格分开)
<h1>This is a <em>important</em> heading</h1> ：匹配
<p>This is a <em>important</em> paragraph.</p> ：不匹配
6 CSS 子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
h1 > strong {color:red;} （改成后代选择器 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> ：不匹配
语法解释：
您应该已经注意到了，子选择器使用了大于号（子结合符），两边可以有空白符，这是可选的。
7 CSS 相邻兄弟选择器(也就是后面一个元素)
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p{margin-top:50px;font-weight:bold}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p{margin-top:50px;font-weight:bold}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>One.</p> ：只有这个元素生效,因为这个元素紧跟在h1元素的后面
<p>Two</p>
<p>Three</p>
</body>
</html>
8 CSS 伪类 (Pseudo-classes)
8.1 语法
伪类的语法： selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。selector.class : pseudo-class {property: value}
PS :提示：伪类名称对大小写不敏感。
8.2 例子 1 - 匹配第一个 <p> 元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的 p 元素
<html>
<head>
<style type="text/css">
p:first-child {
color: red;
}
</style>
</head>
<body>
<p>some text</p> 生效
<p>some text</p> 未生效
</body>
</html>
8.3 例子 2 - 匹配所有 <p> 元素中的第一个 <i> 元素
在下面的例子中，选择器匹配所有 <p> 元素中的第一个 <i> 元素：
<html>
<head>
<style type="text/css">
p > i:first-child {
font-weight:bold;
}
</style>
</head>
<body>
<p> <i>text</i>生效
<i>text</i> 未生效
</p>
<p> <i>text</i>生效
<i>text</i> 未生效
</p>
</body>
</html>
8.4 例子 3 - 匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：
<html>
<head>
<style type="text/css">
p:first-child i {
color:blue;
}
</style>
</head>
<body>
<p> <i>text</i>生效
<i>text</i> 生效
</p>
<p> <i>text</i>未生效
<i>text</i> 未生效
</p>
</body>
</html>
8.5
伪类
W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。
属性 描述 CSS
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。 2
:lang 向带有指定 lang 属性的元素添加样式。 2
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>
显示结果：（相当于替换了值）
一些文本前置值"段落中的引用后置值一些文本。
9 CSS 伪元素 (Pseudo-elements)
CSS 伪元素用于向某些选择器设置特殊效果。
9.1 语法
伪元素的语法： selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用： selector.class:pseudo-element {property:value;}
9.2 :first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。"first-line" 伪元素只能用于块级元素。
注释：下面的属性可应用于 "first-line" 伪元素：
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
(P段落第一行文字才变颜色)
<html>
<head>
<style type="text/css">
p:first-line
{
color: #ff0000;
font-variant: small-caps
}
</style>
</head>
<body>
<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>
</body>
</html>
9.3 :first-letter 伪元素 （通 上述 9.2 ）
"first-letter" 伪元素只能用于块级元素。
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
p段落第一个字母变颜色，第一个字是中文那就是中文变颜色
p:first-letter
{
color:#ff0000;
}
9.4 伪元素和 CSS 类
伪元素可以与 CSS 类配合使用：
p.article:first-letter
{
color: #FF0000;
}
<p class="article">This is a paragraph in an article。</p>
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
9.5 CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1:before { content: "前置内容";} //前置文字
// h1:before { content:url(logo.gif);} //前置图片
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
</body>
</html>
效果：
前置内容This is a heading
The :before pseudo-element inserts content before an element.
9.5 CSS2 - :after 伪元素 (同 上述9.4)
":after" 伪元素可以在元素的内容之后插入新内容。 阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- IE7浏览器下CSS属性选择器二三事
- CSS中奇数选择器与偶数选择器，一句代码怎么实现？
- 前端学习 -- Css -- 属性选择器
- CSS+JS经典的滑轮新闻显示 选择卡
- CSS 选择器
- js中通过 CSS 选择器选取元素
- css笔记09：选择器优先级
- CSS <a>标签选择差异
- CSS中如何选择ul下li的奇数、偶数行
- css 选择符
- jquery+css实现html选择树或树形菜单
- css基础学习-选择器
- css布局之选择切换按钮
- CSS基础-引入方法，选择器，继承
- css 选择器 (学习笔记)
- 根据用户选择用JS切换生效的CSS文件实现网站网页换肤
- CSS 禁止选择（取消被选中背景）
- [Web前端]CSS实现“不可选择，不可复制”面临的问题
- CSS简介与选择器优先级
- Chrome 11的一些新动向：CSS引用、HTML5 日期选择器模型和P2P API