前面的学习我们仅仅使用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属性的段落。
现在我们学习使用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属性的段落。
发表评论
-
CSS教程17 CSS的优先级特性Specificity
2010-07-22 12:00 705如果同个元素有两个或以上冲突的CSS规则,浏览器有一些基本的规 ... -
CSS教程16 CSS的伪元素Pseudo Elements
2010-07-22 11:59 659伪元素吸附在选择上和pseudo classes伪类很像,像这 ... -
CSS教程15 CSS的At-Rules@规则
2010-07-22 11:58 694At-rules分装不同的CSS规 ... -
CSS教程14 CSS网页布局Page Layout
2010-07-22 11:57 806使用CSS布局非常简单,如果你习惯使用tables布局,可能开 ... -
CSS教程13 CSS的display属性
2010-07-22 11:56 732操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式 ... -
CSS教程12 CSS的Background Images 背景图片
2010-07-22 11:56 919背景图片Background Images有许多属性可以操作。 ... -
CSS教程11 CSS的属性缩写
2010-07-22 11:55 634一些CSS属性允许使用一串值代替许多属性,值使用空格分开。 ... -
CSS教程10 CSS的Pseudo Classes 伪类
2010-07-22 11:54 590请你注意一些CSS伪类属性不被所有浏览器支持,但有四个伪类可以 ... -
CSS教程9 CSS的Grouping and Nesting分组和嵌套
2010-07-22 11:53 428Grouping 分组 当许多选择器有同样属性时,可以使 ... -
CSS教程7 CSS属性结合起来使用
2010-07-22 11:51 690如果你学完HTML初级教程即可学习CSS初级教程,使用CSS处 ... -
CSS教程6 CSS的Border边框
2010-07-22 11:48 594CSS Borders 边框 边框可以运用到body里的 ... -
CSS教程5 Margin和Padding
2010-07-22 11:45 595margin和padding用来隔开元素,margin是隔开元 ... -
CSS教程4 CSS的Text 文本
2010-07-22 11:44 687有一系列属性可以改变网页文字的大小和形状,概要如下: fon ... -
CSS教程3 CSS的color颜色
2010-07-22 11:43 1057css可以处理16,777,216颜色,可以使用名字、rgb ... -
CSS教程2 选择器 、属性、值
2010-07-22 11:41 702HTML有标签,CSS有选择器。选择器是给内部和外部样式里面的 ... -
CSS教程1CSS的应用
2010-07-22 11:37 653CSS教程 1、CSS的应用 一、In-line 行内 ...
相关推荐
2) $('.class') css选择器,class类名 3) $('element') 标签选择器,例如p,h1,div 4) $('*') 全选择器,可选择所有的html标签(影响范围较大甚用) 5) $('sele1,sele2') 用‘,'逗号隔开可以选择...
在CSS语法格式: 选择器{属性:值;} ...<标签名 id=“id选择器名”>…标签名> 2 id选择器 2 类选择器,可以为标有特定class值的HTML元素指定样式规则。 类选择器 定义类选择器的语法格式 使用类选择
详解CSS选择器标签HTML 选择器 类别CLASS 选择器
使用选择器可以方便的定位于指定的元素,而不用使用额外的class或id,通过这种方式也可以让我们的代码和样式更加简洁、灵活、易控制。;属性选择器;属性选择器;E[att^=value]属性选择器;E[att^=value]属性选择器;E...
如果你要在HTML元素中设置CSS样式,你需要在元素中设置”id” 和 “class”选择器。 id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#...
Web前端css3选择器 参考文档: https://man.ilovefishc.com/css3/ 一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 ...
* css选择器 * 冒泡原理 * 如果后面的表达式无效,只返回有效表达式匹配的结果 * author chenyipeng * e-mail: yia0223@gmail.com * ps: 如有bug请多多包涵 * 参考: jquery css选择器 * 目前实现 * #id ...
通过使用组合器(Combinator)将选择器的描述写得更加精确(参考CSS选择器 – MDN ),例如对于下述代码片段,如果想给.cellphones中的.apple增加样式,只使用.apple,势必会对.fruit中的.apple也造成影响。...
前两天看文档看到选择器那块儿的时候,前面4个基本都能理解:.class,#id,element,element, element,但后面两个::after和::before(文档中说,分别表示在view 组件的后面和前面插入内容),表示有点没有理解。...
对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用id,以及它们用法与限制是怎么样的。接下来我们就来详细了解CLASS与ID基本属性及用法。 Class 在程序中称“类”,同时在CSS...
去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记。 这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看...class选择器,匹配所有class属性中包含info的元素 4. #footer
关于ID选择器和class选择器不同,这里使用#class的值不同标签可以发生重复。但是id不允许!!!id选择器不能结合使用id属性通常和js配合使用 CSS Code复制内容到剪贴板 #label { background-color: red; } ...
一、五大基本选择符 ...2. #X(ID)#+id名,这是日常常用的css选择器,用于匹配id为XXX的元素,id选择器的优势是精准,高优先级(优先级基数为100,远高于class的10),作为javascript脚本钩子的不二选择,
8.class选择器: 在标签中定义class属性并赋值。通过标签名.class值 对该标签进行样式设置。 例: 相同标签设置不同样式的时候,用class进行区分。 p.pclass_1 {color:#FF0000;} p.pclass_2 {color:#0000FF;} <p ...
CSS 选择器权重值 CSS 具有自己的优先级计算方法,而不仅仅是行间>内部>外部、ID>class>元素 1. 样式类型 行间样式 我的行间CSS样式。 内联样式 <style type="text/css"> h1{font-size:12px; color:#000; ...
实例如下: <!...<...link href="style.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"/> [removed][removed] <script type="text/javascript
css样式优先选择<style type="text/css"> <!-- *{font-size:20px} .class3{ font-size: 12px; } --> </style>
4 E.myclass是类class选择符(CSS1):以class属性包含myclass的E对象作为选择符。5 E F:包含选择符(CSS1):选择所有被E元素包含的F元素。CSS3新增的通用选择器:同级元素通用选择器:1 通用选择器E~F{}:匹配的是...
串联选择器:作用在同一个标签上 复制代码代码如下:<div class=”a” id =”qq”><span>look at the color</span></div> <p>css: #qq.a{….} 后代选择器:作用在不同标签上 复制代码代码如下:<div id =”qq”>...
CSS选择符详解,内容包括元素选择符、类选择符、ID选择符、属性选择符及文档结构选择。。。。。。 CSS选择符 一、 普通选择符 1、 元素选择符:h2 {font: large/150% sans-serif;} 2、 类选择符:p.warning.help {...