CSS选择器——我要找到你

　　　什么是选择器，在Web开发中如果你要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

　　　CSS选择器主要有： ID选择符>类选择器 >标签选择器

　　　下面我们一一介绍这几种选择器，问我用的是VS2107，在这样的开发环境下操作演示，建立一个Web项目，在建立一个HTML页和一个样式表，在添加中就能找到。

标签选择器：最直观

　　用标签，来选择网页元素，可以能是最直观的方法了，如同根据家庭地址找人一样的自然。基本格式是：标签名空格后面是：用花括号{ }包起来的声明块。然后，将要设置的样式声明，以[属性名，冒号：属性值]的方式写在声明块中，每个样式之间用分号分隔，属性值不要加引号。这与HTML标签中的属性值是不一样的。标签选择符在实际工作中很少单独使用，与其他类型的选择符，组合在一起已达到精确定位元素的目的。

HTML页的代码如下，完整版，接下的选择器将简写。

<!DOCTYPE html>
<!--
    创建人：高占路
-->
<html>
<head>
    <meta charset="utf-8" />
    <title>css测试</title>     <!--打开网页显示标题的名称-->>
    <link href="CSS/StyleSheet1.css" rel="stylesheet" type="text/css" />  <!--链接css的样式代码-->>
</head>
<body>

    <h1>标签选择器测试</h1>
    <h1>永远用事实说话</h1>
    <br />               <!--分隔符 -->
    <div>测试</div>      <!--<div> </div>  块级标签 -->
    <br />
    <div>博客总结</div>
</body>
</html>

样式表代码

/*
 * 创建人:高占路
 * CSS选择器：Id选择器>类选择器 >HTML标签选择器 
 */
body {                         /*整体的设置*/
    color:#f00;                /*全部红色颜色*/
}   

h1{
     color:forestgreen;   /*设置文本颜色为绿色*/
     font-size :36px;     /*设置文本字体大小为36px*/
 }

id选择器：用情专一的好男人

　　　id选择器用id选择符选择的元素，必须在当前页面中，是唯一的，打开HTML页，我们看到两个标题文本，第一个标题中的文本是：标签选择器测试，第二标题中的文本是：永远用事实说话。我们的目标是把：永远用事实说话设置成蓝色。打开CSS样式表，标签选择器试下，会选中所以的h1文字就都成蓝色了。这时我们给第二个h1,添加一个id属性 id=”blue”，然后咋css样式表中写如下css样式表，这时你就会发现只有第二个文本变成了蓝色。这就说明我们选到了页面中，id等于blue的元素，并且是唯一得。
id选择符通常来设置网页中唯一的元素，如网页的头部，尾部，目标栏等，大多与布局元素配对使用。

HTML

<body>
    <h1>标签选择器测试</h1>
    <h1 id="blue">永远用事实说话</h1>
</body>

css样式表

#blue{
     color:#0094ff;   /*设置文本颜色为蓝色*/   
 }

类选择器　给元素穿衣服

　　　俗话说：物以类聚，人与群分。网页中的元素也是一样的，在页面中，总有一些元素永远一样的外观，一样的大小，一样的边距等，完全可以将这些元素，划分到一类中，进行统一管理，简化样式设计。例如,有四个标签文本，我想让第一个，第三个字体36px，颜色为蓝色，这时我们就能用id选择器了，因为违反了一个页面中只能用唯一得一个元素，这时我们要用类选择器可以完美做到。如下代码

<body>
    <h1  class="circle">标签选择器测试</h1>
    <h1>永远用事实说话</h1>    
    <h1  class="circle">测试</h1>      
    <h1>博客总结</h1>
</body>

.circle{
     font-size :36px;     /*设置文本字体大小为36px*/
     color:#0094ff;   /*设置文本颜色为蓝色*/   
 }

　　　今天总结这些东西，希望对大家有帮助！细微差别可以讨论。