CSS 作为前端三件套中的装饰部件有着重要地位，本文在结合W3School及网易云课堂相关课程基础上梳理一下CSS样式表引入方式及选择器相关的知识点。

CSS 三种引入方式

行间样式

  • 写法：在标签中添加style属性，例如：
1
<div style="width:100px;"></div>	//引号中为相应的CSS样式，注意分号“;”
  • 优点：优先级最高；
  • 缺点：影响范围小，代码重用率低，不利于维护，不推荐使用；

内部样式

  • 写法：在head标签中，内嵌style标签，在标签中通过选择器来控制样式
  • 优点：加载速度快，不需要请求服务器；
  • 缺点：不利于代码重用

外部样式

  • 写法：

    1.链接式：在head标签中内嵌link标签，用来关联一个CSS文件，在CSS文件中，通过选择器在控制样式；链接式使用的是HTML的规则，在网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的。

    1
    <link rel="stylesheet" href="xxx/example.css">	//href引号中是.CSS文件的路径

    2.导入式：在head标签中内嵌style标签，用来关联一个CSS文件，在CSS文件中，通过选择器在控制样式，这与链接式导入法相同；导入式使用的是CSS的规则，在整个网页装载完后再装载CSS文件，如果网页比较大的话则会出现先显示无样式的页面，闪烁之后，才出现网页的样式。故不推荐使用

    1
    2
    3
    <style type="text/css">
        @import"mystyle.css";	//import引号中是.css文件的路径
    </style>

  • 优点：利于代码重用；

  • 缺点：需要加载服务器；

CSS 元素选择器

标签选择器

最常见的选择器，直接将文档元素作为选择器，实现方法为：
标签名  { 属性:属性值;    //CSS样式，同样注意分号“;” }

1
2
h1 { font-size: 20px; }
p { color: red; }

id 选择器

首先在相应的标签中添加一个名为id的属性，例如：

1
<p id="name">His name is Ray.</p>

然后使用#添加选择器：
#id名  { 属性:属性值;    //CSS样式，同样注意分号“;” }

1
#name { color:red; }

注意：
1、id名要以英文字幕开头；
2、id名是唯一的，不可重复；
3、id选择器不能结合使用，因为id属性不允许有以空格分隔的词列表。
4、id选择器可能区分大小写，这取决于文档的语言。

类选择器

首先在相应的标签中添加一个名为class的属性，例如：

1
2
3
<p class="name">
    His name is Ray.
</p>

然后使用.添加选择器：
.类名  { 属性:属性值;    //CSS样式，同样注意分号“;” }

1
.name {color:red;}

注意：
1、class名要以英文字母开头；
2、class名可以重复，因此它可以同时控制多个标签的样式；
3、可以结合标签选择器使用。例如：

1
p.name {color:red;}

此时选择器会匹配class属性包含name的所有p元素，而其他任何类型的元素都不匹配，不论其是否有此class属性。即选择器p.name解释为：“其class属性值为name的所有段落”。
4、可以使用class词列表。在 HTML 中，一个class值中可能包含一个词列表，各个词之间用空格分隔。那么这时可以这样处理，将两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。例如：

1
.name.sex {background-color: red;}

此时该选择器会去匹配class属性值同时包含name和sex的标签，若没有则该样式无法实现。

属性选择器

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器，而不仅限于class和id属性。实现方法为：

首先在相应的标签中添加一个属性，例如：

1
<a href="www.floretten.com" title="nextNote" target="_blink">Ray</a>

然后使用[]添加选择器：
[属性]  { 属性:属性值;    //CSS样式，同样注意分号“;” }

1
a[href] {color:red;}

此时，选择器只匹配a元素中的href元素，除此之外，还可以根据多个属性进行选择，只需将属性选择器链接在一起。

1
a[href][title] {color:red;}

注意：
1、属性选择器并不限于这一种形式，如下表：

选择器 描述
[attribute] 用于选取带有指定属性的元素
[attribute=value] 用于选取带有指定属性和值的元素
[attribute`=value ] 用于选取属性值中包含指定词汇的元素
[attribute|=value ] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
[attribute^=value ] 匹配属性值以指定值开头的每个元素
[attribute$=value ] 匹配属性值以指定值结尾的每个元素
[attribute*=value ] 匹配属性值中包含指定值的每个元素

2、在使用属性=属性值选择器时，要求属性值必须完全适配，如果属性值包含用空格分隔的值列表，匹配就会出问题。

后代选择器

后代选择器可以让样式只在文档某些结构中起作用，而在其他部分不起作用。例如：

1
div p {color:red;}

此时样式只会对div元素中的p元素及其所有后代及起作用，而对div中其他部分不起作用。

1
2
3
4
<div>
    <h2>His <strong>name</strong> is <strong>Ray</strong></h2>
    <p>His <strong>name</strong> is <strong>Ray</strong></p>
</div>

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。

因此，div p选择器可以解释为“作为div元素后代的任何p元素”。如果要从左向右读选择器，可以换成以下说法：“包含p的所有div会把以下样式应用到该p”。

子元素选择器

相比于后代选择器，子元素选择器影响范围更小，它只能选择作为某元素子元素的元素,即两者必须是直接的父子关系。

1
div > p {color:red;}

这句代码中只会对含有div的子元素p标签及其后代起作用，如果改成div > strong，该样式则无效。

后代选择器和子选择器结合使用

1
div.name p > strong

上面的选择器会选择作为p元素子元素的所有strong元素，这个p元素本身从div元素继承，该div元素有一个包含name的class属性。

1
2
3
4
5
<div class="name">
<p>
His <strong>name</strong> is <strong>Ray.</strong>
</p>
</div>

伪类

语法：

1
selector : pseudo-class {property: value}

伪类可与 CSS 类搭配使用

1
selector.class : pseudo-class {property: value}

比较常见的是锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

1
2
3
4
a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

选择器分组

如果希望多个元素具有相同的样式，可以将多个选择器用逗号,分组在一起，例如：

1
h2,body,p,td,th,pre,.name,.sex {color:green;}

在选择其中，逗号告诉浏览器规则中包含多个选择器，样式对它们都起作用。

有关 CSS 更多内容可以访问：W3School