CSS基础教程:Class以及ID选择器

2016-02-19 13:40 6 1 收藏

下面请跟着图老师小编一起来了解下CSS基础教程:Class以及ID选择器,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

【 tulaoshi.com - Web开发 】

前面的学习我们仅仅使用HTML选择器(在HTML页面里为html标签,如 P)
  现在我们学习使用clss和id定义属于自己的选择器。
  这样,同样的html元素可以通过class或ID使用不同的表现。
  在CSS里,使用点号(.)创建class选择器,使用hash符号(#)创建ID选择器。
  例子:

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

.intro {
    color: red;
    font-weight: bold;
}
  html页面通过id和class属性调用CSS,像下面这样:

div id="top"
h1Chocolate curry/h1
p class="intro"This is my recipe for making curry purely with chocolate/p
p class="intro"Mmm mm mmmmm/p
/div
  id和class的不同指出在于一个页面同一个ID只能只有一次,而class可以无限制使用。
  同样,你可以在html选择器后面使用一个选择器来指定特殊HTML元素,比如p.jam{值}将作用到带有'jam'class属性的段落。

来源:http://www.tulaoshi.com/n/20160219/1604917.html

延伸阅读
标签: Web开发
我很久以前就开始计划着整理一下CSS选择器的浏览器支持,因为CSS3增加了很多非常有用的选择器。CSS属性选择器制作个性化链接样式作为对CSS选择器的初步研究。 kimblim网站整理了一份很全面的CSS选择器支持情况,我将其翻译过来并进行进一步的整理,将其尽可能的简化。同时结合evotech网站整理的CSS选择器支持列表,以及我自己平时总结的一...
标签: Web开发
前面一篇文章介绍了CSS页面布局中HTML结构化,本节讲解如何使用巧妙的使用CSS选择器。 id用于标识页面唯一元素,id的名称是控制某一内容块的手段,通过将某内容块置入div并赋予唯一的id,就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则,就可以完全...
标签: Web开发
当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child+html {} * html {} 只对IE 7 *:first-child+html {} 只对IE 7 和现代浏览器 htmlbody {} 只对现代浏览器(非IE 7) html/**/body {} 最新的Opera 9以下版本 html:first-child {} Safari html[xmlns*=&qu...
标签: Web开发
有三种方法应用CSS 一、In-line 行内 行内样式是在html标签里直接使用style属性  p style="color: red"text/p 设定段落文字红色。 但要记住,最后的HTML应该是独立出来,使用表现文档,所以行内样式应该在任何地方避免。 二、Internal 内部 使用于整个页面的植入内部样式在head标签里面,styl...
标签: Web开发
先看一段代码: div id="top"Hello Phoenix!/div 其中用到了id属性。对应CSS中的 #top{} 再看一段代码: div class="bottom"a href="#"Hello Phoenix!/a/div 其中用到了class属性。对应CSS中的 .bottom a{} 根据CSS2.0手册规定,伪类中就包括了a,例二中就是通过CSS控制超级链接 a 的属性,然后在div中定义该区域的a对应的类名。 因此,...

经验教程

97

收藏

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