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

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

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

【 tulaoshi.com - Html 】

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

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

  看起来像这样:

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

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

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

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

(本文来源于图老师网站,更多请访问http://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”的段落上。

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

延伸阅读
标签: Web开发
英文原文: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ 中文翻译: http://www.dudo.org/article.asp?id=197 注: 本文写于2006年1月,当时IE7、IE8和Firefox3还未发行,文中所有说的浏览器支持均未包括这三个版本的浏览器。在IE8和Firefox3中,文中的大部分选择符已经被支持[dudo注] 在2005年的9月和1...
E:hover伪类选择符,是我们最熟悉不过的一个伪类了,而且运用也是非常的广泛,可以说在互联网中每个网站上面都会出现它的影子。我们不可否认已经对这个伪类选择符已经是相当的熟悉,但你是否真正的将它的功能发挥到淋漓尽致呢?嘿嘿只要善于发现,我们就可以创造出非常有意思的东西来,大家是否还记得之前的分享给大家的一篇文章《创意CSS技巧...
标签: Web开发
今天有点闲,想向大家请教一下id和class的使用。 按照字面的意思,id是指一个元素在整个文档中的唯一标志,而class则是它所属的类别。按照语法,同名的id在一个文档里只应该出现一次,而class名可重复使用。 但是在具体使用的时候,哪些样式该用id,哪些样式改用class呢?有个答案很简单: 那些只会在页面中出现一次的元素...
标签: Web开发
今天有点闲,想向大家请教一下id和class的使用。 按照字面的意思,id是指一个元素在整个文档中的“唯一标志”,而class则是它所属的“类别”。按照语法,同名的id在一个文档里只应该出现一次,而class名可重复使用。 但是在具体使用的时候,哪些样式该用id,哪些样式改用class呢?有个答案很简单: 那些只会在页面中出现一次的元...
标签: Web开发
CSS的命名在webjx.com中,曾经多次讨论过。说实话,看到这个题目时我觉得这有什么好讨论的,肯定会是场一边倒的讨论。因为个人比较倾向于短命名,简单优雅,可能是出于程序员的洁癖,容不得任何冗余的东西。和我一个想法的人应该不在少数吧! 先看下长命名和短命名的定义: !-- 长命名:使用前缀体现上下文环境的CSS命名方式。 -- d...

经验教程

935

收藏

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