CSS选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/aaaa99996666/article/details/54311983

什么是选择器？

每一条css样式声明（定义）由两部分组成，形式如下：

选择器{样式;}

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

类选择器

类选择器在css样式编码中是最常用到的，格式如下：
.类选择器名称{css样式代码}
注意:
1.英文圆点开头；
2.类选择器名称可以任意起名（但是不能用中文）

使用方法：
1.使用合适的标签把要修饰的内容标记起来，如下：

			<span>Kity_Pei</span>

2.使用class=“类选择器名称”为标签设置一个类，如下：

			<span class="name">Kity_Pei</span>

3.设置类选择器css样式

			.name{color:red;}

Demo代码

<!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="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
  </body>
</html>

ID选择器

ID选择器在css样式编码中是最常用到的，格式如下：
#ID选择器名称{css样式代码}
注意:
1.以符号"#"开头；
2.ID选择器名称可以任意起名（但是不能用中文）

使用方法：
1.使用合适的标签把要修饰的内容标记起来，如下：

			<span>Kity_Pei</span>

2.使用id=“ID选择器名称”为标签设置一个类，如下：

			<span id="name">Kity_Pei</span>

3.设置类选择器css样式

			#name{color:red;}

Demo代码

<!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选择器只能在文档中使用一次；2.可以使用类选择器词列表方法为一个元素同时设置多个样式。