设计师学习HTML/CSS之路-08
2018-08-19 本文已影响2人
HU_Wei
不了解前端的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}
image
<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选择符的前面是井号"#",而不是英文圆点"</span>"；
- 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;}
如：
image
<!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;}
image
<!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>
总结：<strong>></strong>作用于元素的第一代后代，空格作用于元素的所有后代。
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;}
