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

基本语法

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 } 

使用说明

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

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

如果未强制指定对象的 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 属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。

posted @ 2019-03-30 22:43  Lomen~  阅读(602)  评论(0编辑  收藏  举报