`
ningzhisheng
  • 浏览: 11782 次
  • 性别: Icon_minigender_1
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS教程8 CSS的Class以及ID选择器

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

Example Source Code [www.52css.com]
#top {
    background-color: #ccc;
    padding: 1em
}

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

Example Source Code [www.52css.com]
<div id="top">
<h1>Chocolate 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属性的段落。
分享到:
评论

相关推荐

    JQUERY选择器 id选择器<br> 2)  $('.class')  css选择器,class类名<br>

    2) $('.class') css选择器,class类名 3) $('element') 标签选择器,例如p,h1,div 4) $('*') 全选择器,可选择所有的html标签(影响范围较大甚用) 5) $('sele1,sele2') 用‘,'逗号隔开可以选择...

    CSS3样式表-选择器.pptx

    在CSS语法格式: 选择器{属性:值;} ...&lt;标签名 id=“id选择器名”&gt;…标签名&gt; 2 id选择器 2 类选择器,可以为标有特定class值的HTML元素指定样式规则。 类选择器 定义类选择器的语法格式 使用类选择

    详解CSS选择器HTML标签

    详解CSS选择器标签HTML 选择器 类别CLASS 选择器

    HTML5&CSS3网页制作:属性选择器.pptx

    使用选择器可以方便的定位于指定的元素,而不用使用额外的class或id,通过这种方式也可以让我们的代码和样式更加简洁、灵活、易控制。;属性选择器;属性选择器;E[att^=value]属性选择器;E[att^=value]属性选择器;E...

    CSS Id 和 Class

    如果你要在HTML元素中设置CSS样式,你需要在元素中设置”id” 和 “class”选择器。 id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#...

    CSS选择器

    Web前端css3选择器 参考文档: https://man.ilovefishc.com/css3/ 一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 ...

    css选择器apolo

    * css选择器 * 冒泡原理 * 如果后面的表达式无效,只返回有效表达式匹配的结果 * author chenyipeng * e-mail: yia0223@gmail.com * ps: 如有bug请多多包涵 * 参考: jquery css选择器 * 目前实现 * #id ...

    解决CSS样式冲突的几个办法(小结)

    通过使用组合器(Combinator)将选择器的描述写得更加精确(参考CSS选择器 – MDN ),例如对于下述代码片段,如果想给.cellphones中的.apple增加样式,只使用.apple,势必会对.fruit中的.apple也造成影响。...

    微信小程序 CSS 选择器::after和::before的简单使用

    前两天看文档看到选择器那块儿的时候,前面4个基本都能理解:.class,#id,element,element, element,但后面两个::after和::before(文档中说,分别表示在view 组件的后面和前面插入内容),表示有点没有理解。...

    详细了解CSS中的class与id区别及用法

    对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用id,以及它们用法与限制是怎么样的。接下来我们就来详细了解CLASS与ID基本属性及用法。 Class 在程序中称“类”,同时在CSS...

    jquery CSS选择器笔记

    去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记。 这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看...class选择器,匹配所有class属性中包含info的元素 4. #footer

    该不该使用ID选择器?浅谈对CSS的ID选择器的使用建议

    关于ID选择器和class选择器不同,这里使用#class的值不同标签可以发生重复。但是id不允许!!!id选择器不能结合使用id属性通常和js配合使用 CSS Code复制内容到剪贴板 #label { background-color: red; }  ...

    你不可不知的CSS选择器

    一、五大基本选择符 ...2. #X(ID)#+id名,这是日常常用的css选择器,用于匹配id为XXX的元素,id选择器的优势是精准,高优先级(优先级基数为100,远高于class的10),作为javascript脚本钩子的不二选择,

    css介绍快速学习

    8.class选择器: 在标签中定义class属性并赋值。通过标签名.class值 对该标签进行样式设置。 例: 相同标签设置不同样式的时候,用class进行区分。 p.pclass_1 {color:#FF0000;} p.pclass_2 {color:#0000FF;} &lt;p ...

    CSS中选择器的权重值的计算

    CSS 选择器权重值 CSS 具有自己的优先级计算方法,而不仅仅是行间&gt;内部&gt;外部、ID&gt;class&gt;元素 1. 样式类型 行间样式 我的行间CSS样式。 内联样式 &lt;style type="text/css"&gt; h1{font-size:12px; color:#000; ...

    老生常谈jquery id选择器和class选择器的区别

    实例如下: &lt;!...&lt;...link href="style.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"/&gt; [removed][removed] &lt;script type="text/javascript

    css样式优先选择器

    css样式优先选择&lt;style type="text/css"&gt; &lt;!-- *{font-size:20px} .class3{ font-size: 12px; } --&gt; &lt;/style&gt;

    详解CSS3选择器的使用方法汇总

    4 E.myclass是类class选择符(CSS1):以class属性包含myclass的E对象作为选择符。5 E F:包含选择符(CSS1):选择所有被E元素包含的F元素。CSS3新增的通用选择器:同级元素通用选择器:1 通用选择器E~F{}:匹配的是...

    css串联选择器和后代选择器使用方法

    串联选择器:作用在同一个标签上 复制代码代码如下:&lt;div class=”a” id =”qq”&gt;&lt;span&gt;look at the color&lt;/span&gt;&lt;/div&gt; &lt;p&gt;css: #qq.a{….}   后代选择器:作用在不同标签上 复制代码代码如下:&lt;div id =”qq”&gt;...

    CSS选择符.docx

    CSS选择符详解,内容包括元素选择符、类选择符、ID选择符、属性选择符及文档结构选择。。。。。。 CSS选择符 一、 普通选择符 1、 元素选择符:h2 {font: large/150% sans-serif;} 2、 类选择符:p.warning.help {...

Global site tag (gtag.js) - Google Analytics