1. 元素选择器

p { line-height: 1.5em; }
h2 { color: # 696969; }

2. id 和 类选择器

id .class

3. 关系选择器

A B：后代选择器 （所有后代）
A > B：子选择器（直接后代）
A + B：相邻兄弟选择器（AB为兄弟，仅紧邻 A 的 B 生效）
A ~ B：一般兄弟选择器（A 之后的所有 B 兄弟生效）

注意：子选择器：IE 7 中如果父元素和子元素之间有 HTML 注释，会出现问题。相邻兄弟选择器也一样。
提示：当 li+li 时，会在除第一个 li 之外的所有 li 生效。

4. 属性选择器

1、A[attr]：定位具有属性 attr 的任何元素 A：

input[required] { border:1px solid # f00;}
/ 必填属性"required"的input /
2、A[attr="val"]：完全匹配，定位具有属性 attr 且属性值为 val 的任何元素 A：

input[type="password"] {border:1px solid # aaa;}
3、A[attr|="val"]：定位具有属性 attr 且属性值为 val，或以 "val-" 开头 的任何元素 A：

p[class|="a"] {color:# 333;}
/ class="a" 以及 class="a-b"） /
4、A[attr~="val"]：该选择器定位具有属性 attr 且属性值为 完整 "val" 的任何元素 A：

div[title~="english"] {color:# f88;}
/ title="english" 以及 title="chinese english" /
5、A[attr*="val"]：定位具有属性 attr 且属性值任意位置 包含 "val" 字符串 的元素 A，val 可以是一个完整的单词，也可以是一个单词中的一部分：

a[title="link"] {text-decoration:underline;}
/ title="aaalinkzzz" */
6、A[attr^="val"]：定位具有属性 attr 且属性值 以 "val" 开头 的任何元素 A：

div[class^="a"] {color:# 666;}
/ class="a"、class="abc" 以及 class="abc zzz" /
/ 但 class="zzz abc" 不是 /
7、A[attr$=val]：该选择器与 A[attr^=val] 正好相反，定位具有属性 attr 且属性值 以 "val" 结尾 的任何元素 A：

div[class$="a"] {color:# f00;}
/ class="nba"、class="cba" 以及 class="cn cba" /
/ 但 class="cba cn" 不是 /
注意：IE6 不支持属性选择器。

5. 伪类

1、锚伪类

a:link {color: red} / 未访问的链接 /
a:visited {color: green} / 已访问的链接 /
a:hover {color: blue} / 鼠标移动到链接上 /
a:active {color: yellow} / 选定的链接，鼠标左击不放 /
提示

1. 在 CSS 定义中，:hover 必须被置于 :link 和 :visited 之后，才是有效的。

2. 在 CSS 定义中，:active 必须被置于 :hover 之后，才是有效的。

3. :link 和 :visited 称为链接伪类，只能应用于锚元素；:hover、:active 和 :focus 称为动态伪类，理论上可以用于任何元素。

2、伪类与 CSS 类

伪类可以与 CSS 类配合使用：

a.red:visited {color:# FF0000;}

3、:focus

:focus 向拥有键盘输入焦点的元素添加样式。

Any element (most commonly s and s) are in "focus" when they are selected and ready to enter text.

input:focus{ background-color:yellow; }
textarea:focus { background: pink; }

4、:first-child

p:first-child 匹配作为任何元素的第一个子 元素。
p>li:first-child 匹配所有 元素的第一 元素。
p:first-child i 匹配所有作为任何元素的第一个子 元素中的所有 元素。

提示： 另一种形式 p:nth-child(3) 匹配作为任何元素的第3个子 元素。

6. 伪元素

伪元素可用于定位文档中包含的文本，为与伪类进行区分，伪元素使用双冒号 :: 定义，但单冒号 : 也能被识别。

1、::first-line

p::first-line{ color: red; }
/ 对 p 元素的第一行文本进行格式化 /
注意：::first-line 伪元素只能用于块级元素。

可应用的属性：
font properties、color properties、background properties、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear

2、::first-letter

p::first-letter { font-size:xx-large; }
/ 向文本的首字母设置特殊样式 /
注意：::first-letter 伪元素只能用于块级元素。

可应用的属性：
font properties、color properties、background properties、margin properties、padding properties、border properties、text-decoration、vertical-align (only if "float" is "none")、text-transform、line-height、float、clear

3、结合 CSS 类：

p.article:first-letter {color:# ff0000;}

4、::before 与 ::after

常常使用 contnet 属性生成额外的内容并插入在标记中：

a[href^=http]::after { content:"link" }
/ 在页面的a链接的后面插入文字link /

h1::before { content:url(hm.gif) }
/ 在每个h1 前插入一幅图片 /

5、::selection

::selection { background:# 444; color:# fff; }
/ 定义选中的文本颜色与背景色 /

m. :lang 伪类

@todo

n. 通用选择器

@todo

补充：伪元素跟伪类都是选择器的补充，但是，伪类表示的是一种“状态”比如 hover，active 等等，而伪元素表示文档的某个确定部分的表现，比如 ::first-line 伪元素只作用于你前面元素选择器确定的一个元素的第一行。
注意，伪元素选择器选择出来的“部分” 不在 DOM 里，也不能对其绑定事件。如果你对伪元素前面的选择器定义的元素绑定了事件，伪元素同样会生效。 永远记得 伪元素生成的是“表现”。
伪元素选择器只包含以下几种:
::after、::before、::first-letter、::first-line、::selecton

关键字：css, css选择器

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！