CSS基础教程

主页资讯文章代码电子书

选择器（selector）

CSS提供了几种方式，可以让开发者将css样式应用到指定的html元素。本节内容将会讲述这些方式。

一.CSS规则（rules）

首先，我们简单的看下css语法的结构，假设有如下css规则：

.class-rule {
    background: red;
    color: green;
}

上面是一个简单的css规则，它将类名为class-rule的所有元素的背景色设置为红色，颜色设置为绿色。在css代码中，.class-rule称之为选择器（Selector）, 用于说明这个样式规则将应用于哪个元素。大括号之间包裹的内容是属性声明（Declaration）部分，一个规则可以有多个样式声明，例如上面中有两个声明,background和color。每个声明由属性名称（Property）和属性值（Value）组成。

二.简单选择器

简单选择器使用html元素的类型名（type）、类名（class）、属性（attribute）和Id指定元素。

通配选择器

通配选择器（universal selector）使用一个通配符号*表示匹配所有元素。

* {
    margin: 0;
    padding: 0;
}

这个规则表示将所有元素的外边距和内边距都设置为0。一般在项目中，我习惯用这段代码，覆盖浏览器的默认样式，使元素初始边距为0。

类型选择器

类型选择器（type selector）也叫做标记选择器（tag selector），使用元素的tag名作为选择器。

p {
    font-size: 18px;
    font-weight: bold;
}

上面的规则将页面中所有的段落（paragraph）的字体设置为18px粗体。

类选择器

一个html元素可以有0个或者多个类名。

<p class="p1 bold">This is a statment.<p>
<p class="p2">This is a statment.<p>

我们可以使用类名作为选择器，来指定特定的html元素。为了区别类型选择器和类选择器，类选择器使用.加上类名作为选择器名称。将以下规则用于页面：

.bold {
    color: red;
}

页面中第一个段落文字将会显示为红色，因为.bold表示这个规则应用于类名包含bold的元素。

ID选择器

一般html页面中，元素的ID是唯一的。虽然多个元素拥有相同的id，浏览器并不会报错，但是我们在写html时，也要遵循这个规范，保证所有元素的id都是唯一的。

可以使用id作为选择器，指定css规则应用的元素。为了使用id作为选择器，我们用符号#放置于id前面，表示这是一个ID选择器。看下面的代码：

<p id="p1">This is first paragraph.</p>
<p id="p2">This is second paragraph.</p>

...
<style>
    #p1 {
        color: red;
    }
    #p2 {
        color: blue;
    }
</style>

p1会显示为红色，p2显示为蓝色。html的每个元素的id字段，不能像类名那样设置为多个，例如下面这样是错误的。

<p id="id1 id2">This is a paragrahp.</p>

属性选择器

html元素可以设置属性，例如上面的class和id都是html元素的属性，我们也可以添加更多的属性。

<p att1="1" att2="2" att3="3">This is a paragraph.</p>

属性选择器用中括号[attributeName='attributeValue']表示，attributeName表示属性名称，attributeValue指示这个属性的值。例如，将包含属性att，并且属性值为attValue的元素的颜色改为红色，可以这样写：

[att='attValue'] {
    color: red;
}

我们也可以，不设置属性值，那么这个规则就会被应用于所有含att属性的元素。

[att] {
    color: red;
}

有一点需要注意的是，属性值不是大小写敏感的。如果选择器为[att='attValue'], 那么下面两个元素都会应用这个规则：

<p att="attValue">This is a paragraph.</p>
<p att="ATTVALUE">This is a paragraph.</p>

可以在选择器中添加s标记[att='attValue' s]，表示此时属性选择器是大小写敏感的。默认情况是不分大小写的，也可以添加i标记显示指定这个选择器非大小写敏感。

除了大小写敏感标记符号，你还可以指定属性值部分匹配元素属性值。

/* 匹配href属性值包含“example.com”的元素 */
[href*='example.com'] {
  color: red;
}

/* 匹配href属性值以“https”开头的元素 */
[href^='https'] {
  color: green;
}

/* 匹配href属性以“.com”结尾的元素 */
[href$='.com'] {
  color: blue;
}

组合选择器

一个规则，并不一定只设置一个选择器，可以设置多个选择器，用逗号隔开即可。

p,
a,
#id,
.class {
    color: red;
}

这个规则会匹配所有段落p、所有链接a、id为id的元素和所有类名为class的元素，我们称这种选择器为组合选择器。

三. 伪类和伪元素

伪类

伪类（Pseudo-classes），使元素在不同状态下，应用不同的样式规则。例如，当鼠标悬浮在元素上时，可以使用:hover指定规则应用于这个状态。

// 当鼠标悬浮在段落p上时，颜色为红色
p:hover {
    color: red
}

后面我会补充关于伪类更多的细节，这里只做简单的介绍。

伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。使用伪元素，就好像你在html页面中插入了一个新的元素。伪元素用双冒号::表示。

.my-element::before {
  content: 'Prefix - ';
}

这个规则，会应用到类名为my-element的元素，在该元素前插入Prefix-文字。也可以使用::after修改元素后面的样式。

还可以使用::marker修改某些标记，例如修改无序列表前面的点或者有序列表前面的数字样式。使用::selection修改用户选择某段文字后显示的样式。

li::marker {
    color: red;
}

p::selection {
    background: green;
    color: white;
}

四.复杂选择器

组合器

组合器（combinator）是位于两个选择器中间的符号，例如div>p中>就是一个组合器。组合器有以下几种：

后代选择器 : 用空格（`）表示，匹配父元素后代子孙节点中的元素，例如div p`匹配div中所有的段落，不一定是儿子结点，也可以是孙子结点。
相邻下一个兄弟节点：用+表示，匹配同级节点的紧邻下一个元素。例如div+p匹配div后面与该div紧邻着的段落，p与div之间不能有其他元素。
后面所有的兄弟节点：用~表示，匹配同级节点的后面的元素，不要求是紧邻的元素。例如div~p匹配div后面所有同级的<P>元素。
子选择器：用>表示，匹配某个元素的孩子结点。例如div>p表示div中所有p孩子元素。

复合选择器

你可以组合多个选择器，增强代码的可读性和规则的功能。例如，你想将规则应用于类名为cls的<a>元素，将其颜色设置为红色，可以这样写：

a.cls {
    color: red;
}

注意，与组合器不同的是，复合选择器在选择器之间不包含任何符号和空格。

附：参考资料

MDN: selectors
谷歌learn css：selectors

（完）