--------------------------------------------------
CSS的选择器是一种利用DOM节点查找指定位置标签的一种方法
CSS的上下文选择符为我们提供了基于位置的定位，而ID和Class选择符则为了提供了另一套选择元素的方法，当使用ID和Class选择符的时候，我们不用再考虑文档的层次结构，只需要给HTML元素添加id或class属性即可。
类属性
类属性就是HTML标签中的class属性，body标签中的任何HTML元素都可以添加这个属性。，例如下面的HTML代码：
1: <!DOCTYPE html><!--CRLF-->
2: <html><!--CRLF-->
3: <head><!--CRLF-->
4: <title>HTML 5 Template</title><!--CRLF-->
5: <meta charset="utf-8"><!--CRLF-->
6:
<!--CRLF-->
7: <link href="style.css" rel="stylesheet" type="text/css"><!--CRLF-->
8:
<!--CRLF-->
9: </head><!--CRLF-->
10: <body><!--CRLF-->
11: <h1>类属性的演示</h1><!--CRLF-->
12: <p class="specialtext">官无常贵，民无终贱，有能则举之，无能则下之<br></p><!--CRLF-->
13: <p class="specialtext">当官的不可能永远当官，做老百姓的也不会永远当老百姓。有才能的人就把他提拨起来，没有才能的人就把他放下去</p><!--CRLF-->
14:
<!--CRLF-->
15: </body><!--CRLF-->
16: </html><!--CRLF-->
不应用任何样式的运行效果
在上面的HTML代码中，已经给两个p段落添加了specialtext类了
类选择符的格式
.类名
选择符前世是点（.）,后面紧跟类名。
下面为上面的HTML代码的CSS样式
1: p{font-family: helvetica,sans-serif;font-size: 20px}<!--CRLF-->
2: .specialtext{font-style: italic;background-color: blanchedalmond}<!--CRLF-->
运行后的效果
我们添加的CSS样式使得两个p标签中的内容字体都变成了helvetica，而第二条规则，则使h1和第二个p即有specialtext类的两个标签，变成了斜体和添加了背景色
如果我们只想给第二个段落添加样式怎么办呢？比如这里，我想给这段话的解释，添加为背景色
这时我们可以使用标签带类选择符，例如：
1: p{font-family: helvetica,sans-serif;font-size: 20px}<!--CRLF-->
2: .specialtext{font-style: italic;background-color: blanchedalmond}<!--CRLF-->
3: p.specialtext{background-color:white;color: dodgerblue}<!--CRLF-->
此时我们就可以更加细腻的控制第二个段落的样式了
多类选择符
HTML同一标签可以添加多个class类名，它们放置在一对引号中，用空格分隔，即HTML的class属性可以用多个空格分隔的值。
例如：
1: <body><!--CRLF-->
2: <h1 class="specialtext">类属性的演示</h1><!--CRLF-->
3: <p >官无常贵，民无终贱，有能则举之，无能则下之<br></p><!--CRLF-->
4: <p class="specialtext1 specialtext2">当官的不可能永远当官，做老百姓的也不会永远当老百姓。有才能的人就把他提拨起来，没有才能的人就把他放下去</p><!--CRLF-->
5:
<!--CRLF-->
6: </body><!--CRLF-->
1: p{font-family: helvetica,sans-serif;font-size: 20px}<!--CRLF-->
2: .specialtext1.specialtext2 {font-style: italic;background-color: blanchedalmond}<!--CRLF-->
3:
<!--CRLF-->
ID属性
ID与class用法相似，只是把.号变换成了#，通用格式如下
#specialtext {css样式声明}。或者这样写p#specialtext{css样式声明}
那么两者的区别在那里？
ID主要用于在页面中唯一标识一个元素，也就是说每个ID的名称必须独一无二，它的独一无二性,这样可以把JavaScript与某个有关的标签关联起来。还有就是用于同一个页面内的导航，
什么时候使用类？类的目的是标识一组具有相同特征的元素。
比如
1: <body><!--CRLF-->
2:
<!--CRLF-->
3: <h1 class="specialtext">类属性的演示</h1><!--CRLF-->
4: <h2>标题二</h2><!--CRLF-->
5: <h3>标题三</h3><!--CRLF-->
6: <h4 id="id_h4">标题四</h4><!--CRLF-->
7: <h5>标题五</h5><!--CRLF-->
8: <p >官无常贵，民无终贱，有能则举之，无能则下之<br></p><!--CRLF-->
9: <p class="specialtext1 specialtext2">当官的不可能永远当官，做老百姓的也不会永远当老百姓。有才能的人就把他提拨起来，没有才能的人就把他放下去</p><!--CRLF-->
10: <a href="#idp">查看正文</a><!--CRLF-->
11: <p id="idp"><!--CRLF-->
看到上面<a href="#idp">查看正文</a>了没？href的开头有个#，它就表示链接的目标在当前的页面中，所以浏览器不会去触发加载idp目录下的页面了
运行之后的效果，如上，当我们点击查看正文的时候，页面会向下滚动到带有idp的ID属性的p标签上。
如果链接中之后#，比如
1: <a href="#">返回</a><!--CRLF-->
则表示返回顶部
相关推荐
CSS选择符详解，内容包括元素选择符、类选择符、ID选择符、属性选择符及文档结构选择。。。。。。 CSS选择符 一、 普通选择符 1、 元素选择符：h2 {font: large/150% sans-serif;} 2、 类选择符：p.warning.help {...
1，在css样式表中书写时，id选择符前面应该加前缀符号‘#’，而class选择符前面应该加前缀符号‘.’。 2，id属性一般在一个页面中只可以使用一次，而class可以被多次引用。 3，id作为元素的标签，用于区分不同结构...
主要介绍了css选择符类型详细介绍，包括标签选择符、类选择符、ID选择符、包含选择符、通配选择符、选择符分组、标签指定式选择符、组合选择符,需要的朋友可以参考下
本文介绍了CSS 类选择符和ID选择符的区别，分享给大家，具体如下： 类选择符 HTML代码： <div class=one> <div></div> CSS代码： div { width: 200px; height: 200px; border: 1px solid #000; margin: 20px;...
大家看了就明白了css样式中类class与标识id选择符的区别小结
虽然之前已经有不少对于CSS选择符的文章在网络上出现，不过我还是准备以自己的方式来写一写，这也是一种获得乐趣的途径。所以我小小的总结了一下css1及css2选择符... ID选择符(ID Selectors) CSS1 类选择符(Class Sel
二 ID选择符 p#bold {font-weight:bold;} 在HTML中： <p id=bild">这个段落应该是粗体。 三 群选择符 p,h1,h2 {text-align:left;} 选择符之间用逗号隔开 p.navigation,h1#title{ font-weight:bold;} 在...
3 E#myid是id选择符（CSS1）：以唯一标识符id属性等于myid的E对象作为选择符。4 E.myclass是类class选择符(CSS1)：以class属性包含myclass的E对象作为选择符。5 E F：包含选择符(CSS1)：选择所有被E元素包含的F...
②ID和Class选择符;③属性选择符，而上下文选择符的最大好处就是可以方便的实现基于位置为HTML元素添加样式比如我们想位于article和aside标签中的p标签，设置不同的样式 上下文选择符也叫后代组合式选择符，是以...
2.6.5 id及class选择符 2.6.6 标签指定式选择符 2.6.7 组合选择符 2.6.8 伪类及伪对象 2.6.9 通配选择符 2.7 CSS数据单位 2.8 应用CSS到网页中 2.8.1 行间样式表 2.8.2 内部样式表 2.8.3 外部样式表 2.9 样式优先权...
分享一个用纯 CSS3 实现的，漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果，始终显示标签label，并显示 placeholder（占位符）...input class=basic-slide id=name type=text p
一、五大基本选择符 ...2. #X（ID）#+id名，这是日常常用的css选择器，用于匹配id为XXX的元素，id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，
id选择器（id与#idname） class选择器（class与.classname） 虚类选择器 a:link a:visited a:hover a:active (LoVeHAte) 分组选择器 HTML标记符选择器&分组 id选择器 #container { width: 46em; margin: 0 auto; ...
5.7.2 使用ID 还是Class 5.7.3 控制内容显示的display 属性 5.7.4 控制内容显示的visibility 属性 5.7.5 使用text-align 属性的水平居中 5.7.6 使用margin 属性的水平居中 5.8 浮动属性 5.8.1 浮动属性详解 5.8.2 ...
详解CSS优先级的读法，CSS优先级包含四个级别（文内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。 最近看到篇对CSS优先级有比较好的解释的...
但是需要注意这里的“选择符”只能用class的选择选择符，不能使用ID，或者标签名称等其他选择符形式。 而且这个class名称是为拖动单独定义，最好不要定义这个class名称的css样式。如实例那么的并没有在drag上面定义...
3.ID选择器（如：id="name",id="name_txt"） 4.全局选择器（如：*号） 5.组合选择器（如：.head .head_logo,注意两选择器用空格键分开） 6.继承选择器（如：div p,注意两选择器用空格键分开） 7.伪类选择器（如...
CSS属性和选择符 css的语法结构仅仅有三部分组成：选择符（Selector）、属性（property）、和值（value）。 使用方法： selector {Property:value;} 选择符（Selector）指这组样式编码所要针对的对象，可以是一个...