CSS:选择器

0. 通用选择器

* { margin: 0; padding: 0; }

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}    /* 选定的链接,鼠标左击不放 */

提示

  • 在 CSS 定义中,:hover 必须被置于 :link:visited 之后,才是有效的。

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

  • :link:visited 称为链接伪类,只能应用于锚元素;:hover:active:focus 称为动态伪类,理论上可以用于任何元素。

2、伪类与 CSS 类

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

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

3、:focus

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

Any element (most commonly <input>s and <textarea>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> 元素。
p>li:first-child 匹配所有 <p> 元素的第一 <li> 元素。
p:first-child li 匹配所有作为任何元素的第一个子 <p> 元素中的所有 <li> 元素。

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

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; }
/* 定义选中的文本颜色与背景色 */

扩展阅读

伪类 vs 伪元素

伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。

注意,伪元素选择器选择出来的部分不在 DOM 里,也不能对其绑定事件。如果你对伪元素前面的选择器定义的元素绑定了事件,伪元素同样会生效。 永远记得伪元素生成的是 表现

伪类::active:focus:hover:link:visited:first-child:lang:target

伪元素:::after::before::first-letter::first-line::selecton

阅读 1.3k

推荐阅读
Teraflopst
用户专栏

我的专栏

7 人关注
18 篇文章
专栏主页