CSS 笔记——选择器

1. 选择器

（1）类型选择器（标签选择器）

基本语法

E { sRules }

使用说明

类型选择器。以文档对象(Element)类型作为选择器。选择面较大，适合做某种标签元素外观的常规设置。

代码示例

<style type="text/css" media="screen">

    p {

        text-align: center;

        color: red;

    }

    h1 {

        text-align: right;

        color: green;

    }

</style>

<body>

    <h1>This heading will be center-aligned</h1>

    <p>This paragraph will also be center-aligned.</p>

</body>

（2）通用选择器

基本语法

* { sRules }

使用说明

通用选择器。选定文档目录树(DOM)中的所有类型的单一对象。假如通用选择器不是单一选择器中的唯一组成，“*”可以省略。

代码示例

<style type="text/css" media="screen">

    * {

        text-align: center;

        color: blue;

    }

</style>

<body>

    <h1>This heading will be center-aligned</h1>

    <p>This paragraph will also be center-aligned.</p>

    <div>This is a div.</div>

</body>

（3）id 选择器

基本语法

#ID { sRules }

使用说明

ID选择器。以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择器。 ID 名称不能以数字开头！

代码示例

<style type="text/css" media="screen">

    #red {

        color:red;

    }

    #green {

        color:green;

    }

</style>

<body>

    <p id="red">这个段落是红色。</p>

    <p id="green">这个段落是绿色。</p>

</body>

（4）class 选择器

基本语法

E.className { sRules }

使用说明

网页中，无论什么标签的元素，只要class属性和该类选择器的名字一致，则被选中。类名的第一个字符不能使用数字！

类选择器在定义的时候，需要在类名字前放置一个 . 符号，以表征这个不是标签选择器，而是类选择器，在使用的时候，则不需要这个. 符号。其效果等同于E [ class ~= className ]

一个元素属于某种类选择器控制范围，加上class属性就可以了。类选择可以跨标签，无论什么标签，只要class属性和该类名字一致，就属于这个类选择器控制范围。一个标签可以被多个类选择器修饰，同样的类选择器，如果属性有冲突，将会覆盖前头的属性值，定义（非调用）在后头的优先级高于前头。

代码示例

<style type="text/css" media="screen">

    .red {

        color: red;

        text-align: left;

    }

    .center {

        text-align: center;

    }

</style>

<body>

    <h1 class="center">

        This heading will be center-aligned

    </h1>

    <p class="center red">

        This paragraph will also be center-aligned.

    </p>

</body>

（5）属性选择器

基本语法

E [ attr ] { sRules }

E [ attr = value ] { sRules }

E [ attr ~= value ] { sRules }

E [ attr |= value ] { sRules }

使用说明

属性选择器。

选择具有 attr 属性的 E
选择具有 attr 属性且属性值等于 value 的 E
选择具有 attr 属性且属性值为一用空格分隔的字词列表，其中一个等于 value 的 E 。这里的 value 不能包含空格
选择具有 attr 属性且属性值为一用连字符分隔的字词列表，由 value 开始的 E

代码示例

<style type="text/css" media="screen">

    p[class=demo] {

        color: red;

    }

</style>

<body>

    <p class="demo">

        This paragraph will also be center-aligned.

    </p>

</body>

（6）选择器分组

基本语法

E1 , E2 , E3 { sRules }

使用说明

选择器分组。将同样的定义应用于多个选择器，可以将选择器以逗号分隔的方式并为组。

代码示例

<style type="text/css" media="screen">

    h1, p, div {

        text-align: center;

        color: red;

    }

</style>

<body>

    <h1>This heading will be center-aligned</h1>

    <p>This paragraph will also be center-aligned.</p>

    <div>This is a div.</div>

</body>

（7）包含选择器（后代选择器）

基本语法

E1 E2 { sRules }

使用说明

包含选择器。选择所有被 E1 包含的 E2 。即 E1.contains(E2)==true 。即选取某元素的后代元素。

代码示例

<style type="text/css" media="screen">

    div p {

        background-color:yellow;

        text-align: center;

    }

</style>

<body>

    <div>

        <p>段落 1。 在 div 中。</p>

        <span><p>段落 2。 在 div 中的 span 中。</p></span>

    </div>

    <p>段落 3。不在 div 中。</p>

    <p>段落 4。不在 div 中。</p>

</body>

（8）子对象选择器

基本语法

E1 > E2 { sRules }

使用说明

子对象选择器。选择所有作为 E1 子对象的 E2 。与包含选择器相比，子对象选择器只能选择作为某对象子对象的元素。

代码示例

<style type="text/css" media="screen">

    div>p {

        background-color:yellow;

        text-align: center;

    }

</style>

<body>

    <div>

        <h2>标题</h2>

        <p>段落 1。 在 div 中。</p>

        <span><p>段落 2。 在 div 中的 span 中。</p></span>

    </div>

    <p>段落 3。不在 div 中。</p>

    <p>段落 4。不在 div 中。</p>

</body>

（9）相邻兄弟选择器

基本语法

E1 + E2 { sRules }

使用说明

相邻选择器。选择所有作为 E1 元素相邻的下一个元素E2 。选择紧接在另一个元素后的元素，而且二者有相同的父元素。

代码示例

<style type="text/css" media="screen">

    h1+p, div+p {

        text-align: center;

        color: red;

        background-color:yellow;

    }

</style>

<body>

    <h1>This is a heading.</h1>

    <p>This is paragraph.</p>

    <p>This is paragraph.</p>

    <h1>Welcome to My Homepage</h1>

    <div>

        <h1>My name is Donald</h1>

        <p>I live in Duckburg.</p>

        <p>I will not be styled.</p>

    </div>

    <p>My best friend is Mickey.</p>

    <p>I will not be styled.</p>

</body>

（10）后续兄弟选择器

基本语法

E1 ~ E2 { sRules }

使用说明

后续兄弟选择器。选择所有作为 E1 元素之后的兄弟元素 E2 。

代码示例

<style type="text/css" media="screen">

    div~p {

        text-align: center;

        color: red;

        background-color:yellow;

    }

</style>

<body>

    <p>之前段落，不会选中。</p>

    <div>

        <p>段落 1。 在 div 中。</p>

        <p>段落 2。 在 div 中。</p>

    </div>

    <p>段落 3。不在 div 中。</p>

    <p>段落 4。不在 div 中。</p>

</body>

（11）伪类及伪对象选择器

基本语法

E : Pseudo-Classes { sRules } 

E : Pseudo-Elements { sRules }

使用说明

CSS伪类是用来添加一些选择器的特殊效果。

由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

伪类列表

伪类列表	伪类列表	伪类列表	伪对象列表
:link	:hover	:active	:first-letter
:focus	:first-child	:first	:first-line
:visited	:left	:right	:before
:lang			:after

（11.1）:link

基本语法

Selector : link { sRules }

使用说明

设置元素在未被访问前的样式。默认值由浏览器决定。

对于无 href 属性(特性)的 a 对象，此伪类不发生作用。

IE3将 :link 伪类的样式表属性作用于 visited 伪类。

代码示例

a:link { color: red }

:link  { color: red }

（11.2）:hover

基本语法

Selector : hover { sRules }

使用说明

设置对象在其鼠标悬停时的样式。

在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。

代码示例

a:link    { color: red }    /* unvisited links */

a:visited { color: blue }   /* visited links   */

a:hover   { color: yellow } /* user hovers     */

a:active  { color: lime }   /* active links    */

（11.3）:active

基本语法

Selector : active { sRules }

使用说明

设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。

在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。

并且 :active 可以和 :link 以及 :visited 状态同时发生。

代码示例

a:link    { color: red }    /* unvisited links */

a:visited { color: blue }   /* visited links   */

a:hover   { color: yellow } /* user hovers     */

a:active  { color: lime }   /* active links    */

（11.4）:visited

基本语法

Selector : visited { sRules }

使用说明

设置 a 对象在其链接地址已被访问过时的样式。 IE3将 :link 伪类的样式表属性作用于 :visited 伪类。

默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。对于无 href 属性(特性)的 a 对象，此伪类不发生作用。

代码示例

a:link    { color: red }    /* unvisited links */

a:visited { color: blue }   /* visited links   */

a:hover   { color: yellow } /* user hovers     */

a:active  { color: lime }   /* active links    */

（11.5）:focus

基本语法

Selector : focus { sRules }

使用说明

设置对象在成为输入焦点(该对象的 onfocus 事件发生)时的样式。

代码示例

a:focus { background: yellow }

a:focus:hover { background: white }

（11.6）:first-child

基本语法

Selector : first-child { sRules }

使用说明

设置 E 的第一个子对象的样式。

代码示例

* > a:first-child   /* A is first child of any element */

a:first-child       /* Same */

（11.7）:first

基本语法

Selector : first { sRules }

使用说明

设置页面容器第一页使用的样式。仅用于 @page 规则

代码示例

@page :first { margin: 4cm }

（11.8）:left

基本语法

Selector : left { sRules }

使用说明

设置页面容器位于装订线左边的所有页面使用的样式。仅用于 @page 规则。

代码示例

@page :left { margin: 4cm }

（11.9）:right

基本语法

Selector : right { sRules }

使用说明

设置页面容器位于装订线右边的所有页面使用的样式。仅用于 @page 规则。

代码示例

@page :right { margin: 4cm }

（11.10）:lang

基本语法

Selector : lang { sRules }

使用说明

设置对象使用特殊语言的内容的样式。

代码示例

html:lang(fr-ca) { quotes: '? ' ' ?' }

html:lang(de) { quotes: '?' '?' '\2039' '\203A' }

:lang(fr) > Q { quotes: '? ' ' ?' }

:lang(de) > Q { quotes: '?' '?' '\2039' '\203A' }

（11.11）:first-letter

基本语法

Selector : first-letter { sRules }

使用说明

设置对象内的第一个字符的样式。

此伪对象仅作用于块对象。内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。

在此伪对象中配合使用 font-size 属性和 float 属性可以制作首字下沉效果。

代码示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<HTML>

<HEAD>

    <TITLE>Drop cap initial letter</TITLE>

    <STYLE type="text/css">

        P {

            font-size: 12pt;

            line-height: 1.2

        }

        P:first-letter {

            font-size: 200%;

            font-style: italic;

            font-weight: bold;

            float: left

        }

        SPAN {

            text-transform: uppercase

        }

    </STYLE>

</HEAD>

<BODY>

    <P><SPAN>The first</SPAN> few words of an article

        in The Economist.</P>

</BODY>

</HTML>

（11.12）:first-line

基本语法

Selector : first-line { sRules }

使用说明

设置对象内的第一行的样式。

如果未强制指定对象的 width 属性，首行的内容长度可能不是固定的。

代码示例

p:first-line { text-transform: uppercase }

<P>This is a somewhat long HTML

paragraph that will be broken into several

lines. The first line will be identified

by a fictional tag sequence. The other lines

will be treated as ordinary lines in the

paragraph.</P>

（11.13）:before

基本语法

Selector : before { sRules }

使用说明

用来和 content 属性一起使用，设置在对象前(依据对象树的逻辑结构)发生的内容。

（11.14）:after

基本语法

Selector : after { sRules }

使用说明

用来和 content 属性一起使用，设置在对象后(依据对象树的逻辑结构)发生的内容。