CSS_ID和Class选择符 -优快云博客

博客已经迁移至萌萌的IT人，谢谢支持

--------------------------------------------------

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--> 
   

则表示返回顶部