认清CSS的类class和标识id选择符

2016-01-29 11:47 14 1 收藏

认清CSS的类class和标识id选择符,认清CSS的类class和标识id选择符

【 tulaoshi.com - Html 】

  在CSS初级教程中我们仅仅考虑了HTML选择符──以HTML标签形式出现。你当然可以用类选择符class和标识选择符id来定义自己的选择符。这样做的好处是,依赖于class或者id,你可以不同地表现相同的HTML元素。

  在CSS中,类选择符在一个半角英文句点(.)之前,而id则在半角英文井号(#)之前。

  看起来像这样:

  #top { background-color: #ccc; padding: 1em }

  .intro { color: red; font-weight: bold; }

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/html/)

  HTML与CSS的连接用属性id和class。像这样:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/html/)

以下是引用片段:
#top { background-color: #ccc; padding: 1em }  //id
.intro { color: red; font-weight: bold; }//class


  应用如下:


以下是引用片段:
<div id="top" 
<h1Chocolate curry</h1
<p class="intro"网页制作爱好者-www.devdao.com</p 
<p class="intro"http://www.devdao.com/</p 
</div

  id和class不同之处在于,id用在唯一的元素上,而class则用在不止一个的元素上。

  你也可以为一个指定的HTML元素应用选择符,把HTML选择符放置在前面就可以了,所以, p.jam { whatever }会应用在有类“jam”的段落上。

来源:https://www.tulaoshi.com/n/20160129/1483371.html

延伸阅读
标签: Web开发
rules::=selector        左括号declarations右括号declarations::= declaration{SEMICOLONdeclaration}[SEMICOLON]SEMICOLON::=分号declaration::=propertyCOLONvalueCOLON::=冒号value::=keyword listkeyword list::=keyword{SPACEkeyword}SPACE::=空格 通常会用空格做为value之间的分隔符,有...
E:hover伪类选择符,是我们最熟悉不过的一个伪类了,而且运用也是非常的广泛,可以说在互联网中每个网站上面都会出现它的影子。我们不可否认已经对这个伪类选择符已经是相当的熟悉,但你是否真正的将它的功能发挥到淋漓尽致呢?嘿嘿只要善于发现,我们就可以创造出非常有意思的东西来,大家是否还记得之前的分享给大家的一篇文章《创意CSS技巧...
标签: Web开发
今天有点闲,想向大家请教一下id和class的使用。 按照字面的意思,id是指一个元素在整个文档中的唯一标志,而class则是它所属的类别。按照语法,同名的id在一个文档里只应该出现一次,而class名可重复使用。 但是在具体使用的时候,哪些样式该用id,哪些样式改用class呢?有个答案很简单: 那些只会在页面中出现一次的元素...
标签: Web开发
今天有点闲,想向大家请教一下id和class的使用。 按照字面的意思,id是指一个元素在整个文档中的“唯一标志”,而class则是它所属的“类别”。按照语法,同名的id在一个文档里只应该出现一次,而class名可重复使用。 但是在具体使用的时候,哪些样式该用id,哪些样式改用class呢?有个答案很简单: 那些只会在页面中出现一次的元...
标签: Web开发
前面的学习我们仅仅使用HTML选择器(在HTML页面里为html标签,如 P) 现在我们学习使用clss和id定义属于自己的选择器。 这样,同样的html元素可以通过class或ID使用不同的表现。 在CSS里,使用点号(.)创建class选择器,使用hash符号(#)创建ID选择器。 例子: #top {     background-color:&...

经验教程

143

收藏

51
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部