CSS 笔记——选择器

zoukankan html css js c++ java

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 } 
```
使用说明

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

此伪对象仅作用于块对象。内联要素要使用该属性，必须先设定对象的 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 属性一起使用，设置在对象后(依据对象树的逻辑结构)发生的内容。
查看全文

相关阅读:
[codeforces] 97B Superset || 平面分治
 [hdu] 5696 区间的价值 || 序列分治
 [zoj] 1937 [poj] 2248 Addition Chains || ID-DFS
[poj] 2286 The Rotation Game || ID-DFS
[codeforces] 25E Test || hash
luogu P1196 银河英雄传说
 luogu P1357 花园
 luogu P1156 垃圾陷阱
 luogu P1127 词链
 luogu P1131 时态同步

原文地址：https://www.cnblogs.com/xzh0717/p/10629572.html

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

最新文章
模拟赛exam
准确率rate
探女的奶人计划
 计算系数
 坐飞机——：）
食物链
 犯罪团伙
 营养膳食
 运输
 圆圈舞蹈

CSS 笔记——选择器

1. 选择器

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

基本语法

使用说明

代码示例

（2）通用选择器

基本语法

使用说明

代码示例

（3）id 选择器

基本语法

使用说明

代码示例

（4）class 选择器

基本语法

使用说明

代码示例

（5）属性选择器

基本语法

使用说明

代码示例

（6）选择器分组

基本语法

使用说明

代码示例

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

基本语法

使用说明

代码示例

（8）子对象选择器

基本语法

使用说明

代码示例

（9）相邻兄弟选择器

基本语法

使用说明

代码示例

（10）后续兄弟选择器

基本语法

使用说明

代码示例

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

基本语法

使用说明

（11.1）:link

基本语法

使用说明

代码示例

（11.2）:hover

基本语法

使用说明

代码示例

（11.3）:active

基本语法

使用说明

代码示例

（11.4）:visited

基本语法

使用说明

代码示例

（11.5）:focus

基本语法

使用说明

代码示例

（11.6）:first-child

基本语法

使用说明

代码示例

（11.7）:first

基本语法

使用说明

代码示例

（11.8）:left

基本语法

使用说明

代码示例

（11.9）:right

基本语法

使用说明

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