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

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

第8章 CSS选择器

8-1 什么是选择器

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

选择器{样式
}
复制代码

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

 <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>选择器</title><style type="text/css">body{font-size:12px;color:red;    }</style></head><body><p>每一条css样式声明（定义）由两部分组成。</p></body>
</html>
复制代码

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

8-2 标签选择器

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

<html> <body> <h1> <p> <img>等
例：
p{font-size:24px;line-height:1.6em;}
复制代码

8-3 类选择器

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

语法：
<style type="text/css">
.类选择器名称{css样式代码;}
</styte>
复制代码

注意：
1.英文圆点开头；
2.类选择器名称可以起任意名称；

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

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

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

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

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

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

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>类选择器</title><style type="text/css">.setFont{color:green;}.setSize{font-size:22px;}</style></head><body><p>标签选择器就是<span class="setFont">html</span>代码中的<span class="setSize">标签。</span></p></body>
</html>
复制代码

8-4 ID选择器

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

为标签设置id="ID名称"，而不是class="类名称"；
ID选择符的前面是井号"#",而不是英文圆点""；
ID选择符在文档中只能出现一次，而类(class)选择器可以出现多次。

语法：
<style type="text/css">
#ID名称{css样式代码;}
</style>
<span id="ID名称">...</span>
复制代码

8-5 类和ID的区别

相同点：
可以应用于任何元素

不同点：

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

以下为正确表达：
<p><span class="stress">ID选择符</span>在文档中只能出现一次，<span class="stress">而类(class)选择器</span>可以出现多次。</p>以下为错误表达：
<p><span id="stress">ID选择符</span>在文档中只能出现一次，<span id="stress">而类(class)选择器</span>可以出现多次。</p>
复制代码

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

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

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

8-6子选择器

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

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

如：

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>子选择符</title><style type="text/css">.food>li{border:1px solid red;}</style></head><body>
<ul class="food"><li>水果<ul><li>香蕉</li><li>苹果</li><li>梨</li></ul></li><li>蔬菜<ul><li>白菜</li><li>油菜</li><li>卷心菜</li></ul></li>
</ul>
</body>
</html>
复制代码

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

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

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

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>子选择符</title><style type="text/css">.food li{border:1px solid red;}</style></head><body>
<ul class="food"><li>水果<ul><li>香蕉</li><li>苹果</li><li>梨</li></ul></li><li>蔬菜<ul><li>白菜</li><li>油菜</li><li>卷心菜</li></ul></li>
</ul>
</body>
</html>
复制代码

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

8-8 通用选择器

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

<style type="text/css">
* {color:red;font-size:20px;}
</style>
复制代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>* 选择符</title>
<style type="text/css">
* {color:red;font-size:20px;}
</style>
</head>
<body><p>最近读了一本小说，觉得异常有趣。</p>
</body>
</html>
复制代码

8-9 伪类选择符

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

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

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

8-10 分组选择符

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

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

相当于

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