设计师学习HTML/CSS之路-08-白红宇

不了解前端的UI不是好美工，以下是慕课网HTML+CSS基础教程学习笔记，不废话，Start!

第8章 CSS选择器

8-1 什么是选择器

每一条css样式声明（定义）由两部分组成

选择器{    样式}复制代码

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象。如：

选择器

每一条css样式声明（定义）由两部分组成。

复制代码

以上代码中，body就是选择器。

8-2 标签选择器

标签选择器就是html代码中的标签。如：

    等例：p{font-size:24px;line-height:1.6em;}复制代码

8-3 类选择器

单独对某一个内容定义选择器

语法：

注意：

1.英文圆点开头；

2.类选择器名称可以起任意名称；

使用方法：

第一步：使用合适的标签把要修饰的内容表记起来，如：

<span>将被修饰内容</span>

第二步：使用class="类选择器名称"为标签设置一个类，如：

<span class="setFont">将被修饰内容</span>

第三部：设置类选择器css样式，如：

.setFont{color:green;font-size:14px}

类选择器

标签选择器就是html代码中的标签。

复制代码

8-4 ID选择器

ID选择器类似于上一节的类选择器，但也有一些区别：

为标签设置id="ID名称"，而不是class="类名称"；

ID选择符的前面是井号"#",而不是英文圆点""；

ID选择符在文档中只能出现一次，而类(class)选择器可以出现多次。

语法：...复制代码

8-5 类和ID的区别

相同点：

可以应用于任何元素

不同点：

类(class)选择器在一个文档中，可以使用多次，ID选择器只能在文档中使用一次。

以下为正确表达：

ID选择符在文档中只能出现一次，而类(class)选择器可以出现多次。

以下为错误表达：

ID选择符在文档中只能出现一次，而类(class)选择器可以出现多次。

复制代码

可以使用类(class)选择器词列表方法为一个元素同事设置多个样式，ID选择器则不行。

以下为正确表达：.stress{color:red;}.bigsize{font-size:25px;}最近读了一本小说，觉得 异常有趣。
以下为错误表达：#stressid{
    color:red;}#bigsizeid{font-size:25px;}最近读了一本小说，觉得 异常有趣。
复制代码

总结：类选择器(class)比ID选择器更具灵活性。

8-6子选择器

子选择器用于选择指定标签元素的第一代子元素。即大于符号(>)

语法：.类名称>第一代子标签{border:1px solid red;} 复制代码

如：

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

包含选择器，即加入空格，用于选择指定标签元素下的后辈元素。

语法：.类名称 标签{border:1px solid red;} 复制代码

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

8-8 通用选择器

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素

复制代码

* 选择符

最近读了一本小说，觉得异常有趣。

复制代码

8-9 伪类选择符

伪类选择符它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色。

a:hover{color:red;}复制代码

上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。

8-10 分组选择符

当想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）。如

h1,span{color:red;}复制代码

相当于

h1{color:red;}span{color:red;}复制代码