基本规则

CSS的一个核心特性是能向文档中的一组元素类型应用某些规则

规则结构

每个规则分为两部分：选择器（selector）和声明块（declaration block）

我是缩小后的图

选择器定义了将影响文档中的哪些部分。

元素选择器

文档的元素就是最基本的选择器

1
2
3
4
5
6
<h1>大学</h1>
<p>一种功能独特的文化机构...</p>
<h2>西安交通大学</h2>
<p>西安交通大学是国家教育部直属重点大学，为我国最早兴办的高等学府之一...</p>
<h3>软件学院</h3>
<p>西安交通大学软件学院，是2001年国家批准的首批“示范性软件学院”...</p>
1
2
3
4
5
6
7
8
9
html {
    color: orange;
}
h1 {
    color: aqua;
}
p {
    color: silver;
}

CSS选择器-1-2

声明和关键字

声明格式：

属性 + ':' + 值 + ';'

值可以是一个关键字，也可以是该属性可取关键字的一个列表，关键字之间用空格分开；唯一的例外是font属性，可以使用/分隔字体大小和行高

1
2
3
p {
    font: larger/200% '华文楷体';
}

CSS选择器-1-3

分组

选择器分组

若想同时改变不同选择器的属性，可以将不同的选择器放在一起，以,分隔

1
2
3
h1, h2 {
    color: violet;
}

CSS选择器-1-4

通配选择器（*）

这个选择器可以与任意元素匹配

1
2
3
* {
    color: red;
}

声明分组

对同一选择器设置多个样式

1
2
3
4
5
h1 {
    color: aqua;
    background: brown;
    font: 50px/150% '华文楷体';
}

CSS选择器-1-5

类选择器和ID选择器

类选择器（class selector）

1
2
3
4
5
6
<h1>大学</h1>
<p>一种功能独特的文化机构...</p>
<h2>西安交通大学</h2>
<p>西安交通大学是国家教育部直属重点大学，为我国<span class="warning">最早兴办</span>最早兴办的高等学府之一...</p>
<h3 class="warning">软件学院</h3>
<p>西安交通大学软件学院，是<span class="warning">2001年国家批准的首批“示范性软件学院”</span>...</p>

对于HTML文档，可以使用点号.加类名的方式表示类选择器，并且可以结合简单选择器

1
2
3
4
5
6
h3.warning, span.warning {
   color: red;
}
span.warning {
   font-style: italic;
}

CSS选择器-2-1

如果想选择所有类名相同的元素，可以在类选择器中忽略通配选择器

1
2
3
.warning {
    color: red;
}

多类选择器

在HTML中，一个class值可能包含一个词列表，各词之间用空格分隔，没有顺序

1
<h3 class="warning urgent">软件学院</h3>

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素

1
2
3
.warning.urgent {
    background: silver;
}

CSS选择器-2-2

ID选择器（ID selector）

ID选择器类似于类选择器，用#标记，同样可以忽略通配选择器

比较

  • 可以为任意多个元素设定相同的class，但是一个id只能对应一个元素

  • ID选择器不能结合使用，因为ID属性不允许有以空格分隔的词列表

  • 如果想确定应向一个给定元素应用哪些样式，ID能包含更多含义

属性选择器

根据元素的属性来选择元素

1
2
3
4
5
6
<h1>大学</h1>
<p>一种功能独特的文化机构...</p>
<h2>西安交通大学</h2>
<p>西安交通大学是国家教育部直属重点大学，为我国<span class="warning">最早兴办</span>最早兴办的高等学府之一...</p>
<h3 class="warning" id="software">软件学院</h3>
<p>西安交通大学软件学院，是<span class="warning urgent">2001年国家批准的首批“示范性软件学院”</span>...</p>

简单属性选择

  • 如果希望选择有某个属性的元素，而不论该属性的值是什么，则可以用方括号

    1
    2
    3
    *[class] {
        color: red;
    }

    CSS选择器-3-1

  • 可以根据多个属性进行选择，只需将属性选择器链接在一起

    1
    2
    3
    *[class][id] {
        color: red;
    }

    CSS选择器-3-2

根据具体属性值选择

只选择有特定属性值的元素，必须与属性值完全匹配，如果属性值是列表，必须一一匹配

1
2
3
*[class="warning urgent"] {
    color: red;
}

CSS选择器-3-3

根据部分属性值选择

如果属性能接受词列表，使用~=可以根据其中的任意一个词进行选择

1
2
3
span[class~="urgent"] {
    color: red;
}

CSS选择器-3-3

子串匹配属性选择器

类型 描述
[att^="value"] 选择att属性以"value"开头的所有元素
[att$="value"] 选择att属性以"value"结尾的所有元素
[att*="value"] 选择att属性包含子串"value"的所有元素 
1
2
3
4
5
6
7
8
9
span[class^="war"] {
    color: red;
}
span[class$="ent"] {
    font-style: italic;
}
span[class*="g u"] {
    border: solid 2px teal;
}

CSS选择器-3-4

特定属性选择器

[att|="val"]可以匹配属性值等于val或以val-开头的所有元素

使用文档结构

后代选择器（descendant selector）

1
2
3
4
5
6
7
8
9
10
11
12
13
<h1>数学</h1>
<h2 id="numbers">数字
  <ul>
    <li>整数</li>
    <li>小数
      <ul>
        <li>0.5</li>
        <li>2.9</li>
      </ul>
    </li>
    <li>分数</li>
  </ul>
</h2>

在一个后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器

1
2
3
#numbers ul li ul li {
    color: red;
}

选择子元素

1
2
<p>There is an <strong>apple</strong> on the table.</p>
<p>It is <em>very <strong>delicious</strong></em></p>

如果只想选择一个元素的子元素（不包含后代元素），可以使用子结合符>，子结合符两边可以有空白符，可以结合后代选择器

1
2
3
p>strong {
    color: red;
}

CSS选择器-4-2

选择相邻兄弟元素

1
2
3
4
5
6
7
8
9
10
11
12
<div>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
  <ul>
    <li>A list item</li>
    <li>Another list term</li>
    <li>Yet another list item</li>
  </ul>
</div>

要选择紧接在一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟结合符+，邻兄弟结合符两边可以有空白符

1
2
3
4
5
6
ol+ul {
    font-style: italic;
}
li+li {
    color: red;
}

CSS选择器-4-3

伪类和伪元素

伪类选择器和伪元素选择器可以：

  • 为文档中不一定具体存在的结构指定样式

  • 为某些元素（甚至是文档本身）的状态所指示的幻想类指定样式

  • 会根据另外某种条件而非文档结构向文档中的某些部分应用样式

  • 无法通过研究文档的标记确切地推断出采用何种方式应用样式

伪类选择器

链接伪类

伪类名 描述
:link 指示作为超链接并指向一个未访问地址的所有锚
:visited 指示作为已访问地址超链接的所有锚

动态伪类

伪类名 描述
:focus 指示当前拥有输入焦点的元素，也即是可以接受键盘输入或者能以某种方式激活的元素
:hover 指示鼠标指针停留在哪个元素上
：active 指示被用户输入激活的元素 
1
2
<a href="http://www.xjtu.edu.cn">西安交通大学</a>
<a href="http://www.baidu.com">baidu</a>
1
2
3
4
5
6
7
8
9
10
11
12
a:link {
    color: navy;
}
a:visited {
    color: gray;
}
a:hover {
    color: red;
}
a:active {
    color: yellow;
}

CSS选择器-5-1

1
2
3
4
5
<h1>Input your infomation</h1>
<ul>
  <li>Name <input type="text"> </li>
  <li>Title <input type="text"> </li>
</ul>
1
2
3
4
5
6
7
input:focus {
    background: silver;
    font-weight: bold;
}
h1:hover {
    background: yellow;
}

CSS选择器-5-2

选择第一个子元素

element:first-child选择可以作为首个子元素的element元素

1
2
3
4
5
6
<p>Universities:</p>
<ul>
  <li>PKU</li>
  <li>XJTU</li>
</ul>
<p>Institute</p>
1
2
3
4
5
6
p:first-child {
    color: blue;
}
li:first-child {
    color: red;
}

结合伪类

可以在同一个选择器中结合使用伪类，顺序不影响，不能把互斥的伪类放在一起

伪元素选择器

伪元素能在文档中插入假想的元素，所有伪元素必须放在出现该伪元素的选择器的最后面

设置首字母样式

:first-letter用于设置一个块级元素首字母的样式，而且仅对该首字母设置样式

1
<h1>You are my sunshine!</h1>
1
2
3
h1:first-letter {
    color: red;
}

CSS选择器-5-4

设置第一行样式

:first-line可以用来设置元素中的第一个文本行

1
<p>HTML (HyperText Markup Language) is the most basic building block of the Web....</p>
1
2
3
p:first-line {
    color: lightgreen;
}

CSS选择器-5-5

:first-letter和:first-line的CSS属性有一些限制

设置之前和之后样式

允许插入生成的内容，然后使用伪元素:before和:after设置样式

1
<p>You are my sunshine</p>
1
2
3
4
5
6
7
8
p:before {
    content: "I love you. ";
    color: red;
}
p:after {
    content: "☀️";
    font-size: xx-large;
}

CSS选择器-5-6