CSS 标签选择器
每一条CSS样式声明，都是由两部分组成，形式如下：
选择器{
样式；
}在 { } 之前的部分就是选择器，选择器指明了 { }中的样式的作用对象，也就是 样式 作用于网页中的哪些元素。比如下面代码中的 body 就是选择器；
释意：
也就是指明CSS样式作用的标签范围，即指代标签内容元素；
<!DOCTYPE HTML>
<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>索尼公司是源自日本的跨国综合企业，以研制电子产品为主要事业，经营领域横跨消费电子产品、专业性电子产品、电子游戏、金融、娱乐及养老院等，拥有全世界的品牌知名度。其最早前身为1946年5月创立的“东京通信工业株式会社”，由拥有技术研发背景的井深大与擅长公关、营销的盛田昭夫共同创办。总部位于东京都港区港南的索尼城</p>
</body>
</html>标签选择器：
标签选择器其实就是html代码中的标签。如下面代码中的<html> <body> <p> <img> 都是可以被选择的标签；
示例：
p{
font-size:12px;
line-height:1.6em;
}上面代码的作用就是把P 标签设置为12px字号，行间距设置为1.6em的样式；
CSS类选择器
语法：
.类选择器名称 { CSS样式代码; }注意：
1、英文圆点开头；
2、其中类选择器可以任意起名（但是不能是中文）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
h1{
font-weight:normal;
color:red;
}
</style>
</head>
<body>
<h1>勇气</h1>
<p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
<img src="https://pic.codess.cc/images/2019/03/10/70404352_p0.png" >
</body>
</html>使用方法：
1、使用合适的便签把要修饰的内容标记起来，如下：<span> 胆小如鼠 </span>
2、使用 class = "类选择器名称" 为标签设置一个类，如下：<span class = "stress">胆小如鼠</span>
3、设置类选择器CSS样式，如下：.stress {color:red;} /*类前面要加入一个英文圆点*/
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
.stress{
color:red;
}
.setGreen{
color:green;
}
</style>
</head>
<body>
<h1>勇气</h1>
<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时，我们班上了一节<span class="setGreen">公开课</span>，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
<img src="https://pic.codess.cc/images/2019/03/10/70404352_p0.png" >
</body>
</html>CSS ID选择器
在很多方面。ID选择器都类似于类选择符，但也有一些中友好的区别：
1、为标签设置id = "ID名称"，而不是 class = "类名称"
2、ID选择符的前面是#号，而不是英文圆点.
释意：id 选择器跟类选择器的不同在于标识和前面的符号！
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
#stress{
color:red;
}
#setGreen{
color:green;
}
</style>
</head>
<body>
<h1>勇气</h1>
<p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时，我们班上了一节<span id="setGreen">公开课</span>，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>
</html>类选择器与ID选择器的区别
相同点：
都可以应用于任何元素；
不同点：
1、ID选择器智能在文档中使用一次；
与类选择器不同，一个 HTML文档中ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次；
下面文档是正确的：
<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>下面文档是错误的：
<p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>2、可以使用类选择器列表方法为一个元素同事设置多个样式。
可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，ID选择器是不可以上的，（不能用ID词列表）
下面的代码是正确的：
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>上面代码作用是为"三年级" 这三个文字 文本颜色设置为红色，并且字号为25px.
不能使用ID词列表对文本进行设置，
下面的代码是不正确的：
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...</p>子选择器
子选择器，用大于号 > 表示；用于选择指定标签元素的第一代子元素。
语法：
.food > li { boder:1px solid: red; }行代码的作用是使 class 名为food 下的子元素 li （水果、蔬菜）加入红色实线边框。
<!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;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
.first>span{border:1px solid red;}
</style>
</head>
<body>
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<h1>食物</h1>
<ul class="food">
<li>水果
<ol>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ol>
</li>
<br>
<li>蔬菜
<ol>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ol>
</li>
</ul>
</body>
</html>CSS 包含选择器
包含选择器
即加入空格，用于选择指定标签元素下的后辈元素。
.first span { color:red;}这行代码会使第一段文字内容中的“胆小如鼠”字体变成红色。
请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结： > 作用于元素的第一代后代， 空格作用于元素的所有后代.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>后代选择器</title>
<style type="text/css">
.first span{color:red;}
.food li{
border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
}
</style>
</head>
<body>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<!--下面是本小节任务代码-->
<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>通用选择器
通用选择器是功能最强大的选择器，它使用一个 * 号指定，它的作用是匹配html中所有便签元素。
下面代码使用html中任意标签元素字体颜色全部设置为红色；
示例：
* { color:red; }<!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>
<h1>勇气</h1>
<p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>版权属于：编码书生
本文链接：https://codess.cc/archives/368.html
所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。
除特别注明，您可以自由的转载和修改，但请务必注明文章来源且不可用于商业目的。
