`
ningzhisheng
  • 浏览: 12264 次
  • 性别: 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属性的段落。
分享到:
评论

相关推荐

    CSS选择器.pdf

    首先,元素选择符是最基本的类型,包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示,可以选中所有元素,常用于统一设置页面元素的外边距和内边距。但是,由于其作用域较大,使用时应...

    前端必须掌握的css选择器方法

    下面是前端开发中经常使用的 30 个 CSS3 选择器,包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...

    CSS中CLASS和ID的区别.doc

    首先,从语法上看,`id`和`class`的选择器在CSS文件中以不同的符号表示。`id`选择器使用井号`#`作为前缀,如`#exampleId`,而`class`选择器则使用点`.`作为前缀,如`.exampleClass`。 其次,`id`和`class`在页面中...

    CSS教程(实例大全)

    在本“CSS教程实例大全”中,我们将深入探讨CSS的核心概念、选择器、布局技术以及一些高级特性,旨在帮助初学者和进阶者全面掌握CSS。 ### 1. CSS基础 - **选择器**:CSS的选择器是用于选取HTML元素的规则,如类...

    30个最常用css选择器解析

    选择器分为五种基本类型:标签选择器、class选择器、ID选择器、后代选择器和伪类选择器。 1. 星状选择符(*) 星状选择符(*)是CSS选择器中最简单的一种,作用于所有元素。例如:`* { margin: 0; padding: 0; }`...

    HTML5&CSS3网页制作:CSS基础选择器.pptx

    为了巩固所学,你可以尝试一个练习,使用上述四种不同的选择器来实现一个简单的样式效果,例如设置标题颜色、段落字体、链接样式以及一个特殊ID元素的背景色。这样可以帮助你更好地理解和应用CSS基础选择器。

    CSS教程(CHM格式),含多个css教程

    选择器用于选取要应用样式的元素,如`h1`用于选择所有一级标题,`.class`用于选择类名为特定值的元素,`#id`用于选择ID为特定值的元素。声明由属性和值组成,如`color:red;`设置元素颜色为红色。 2. **盒模型**:...

    一种可视化的方式来分析选择器在CSS中的特殊性

    2. **类选择器、属性选择器和伪类**(.class, [attr], :pseudo-class):每个这类选择器赋予10个单位。 3. **标签选择器和伪元素**(element, :pseudo-element):每个这类选择器赋予1个单位。 4. **通用选择器、子...

    css样式优先选择器

    如果一个选择器同时包含了标签名和ID(如`span#id3`),它的优先级高于单纯只有ID的选择器(如`#id3`),同样,标签加类的选择器(如`span.class3`)优先级高于只有类的选择器(如`.class3`)。这是因为这种组合选择...

    哎。。。。作过试验。。css选择器.

    8. **相邻兄弟选择器**: 使用`+`操作符,选择紧跟在另一个元素后面的同级元素。例如,`p + a`会选择紧跟在`p`元素后面的`a`元素,并移除其下划线。 9. **伪类**: - 链接伪类:`a:link`, `a:visited`, `a:hover`...

    css选择器的应用

    ### CSS选择器的应用 #### CSS概述与引入方式 CSS(层叠样式表)是一种用于定义HTML文档中元素样式的语言。它允许开发者控制网页布局、颜色、字体等外观特性,从而增强网页的表现力。CSS可以通过多种方式引入: -...

    CSS教程(ppt)

    例如,`p`选择器用于选取所有段落,`#header`选择器选取id为"header"的元素,`.class`选择器选取class为"class"的所有元素。 2. **声明**: 声明由一个属性和一个值组成,用冒号分隔,如`color: red;`表示将文本颜色...

    CSS选择器详细介绍

    常用选择器是 CSS 选择器中最基本的选择器,包括三种类型:ID 选择器、类选择器和标签选择器。 * ID 选择器:根据元素的 ID 来选择元素,例如 `#demoDiv{color:#FF0000;}`。在 HTML 中,元素可以定义一个 ID 属性,...

    详解CSS选择器HTML标签

    本文将深入探讨CSS选择器的几个主要类型,包括HTML标签选择器、类别(Class)选择器、专用ID选择器、选择器组合筛选、选择器集体声明、选择器的嵌套、子选择器以及属性选择器。 1. **HTML标签选择器**:这是一种最...

    CSS3选择器总结CSS3选择器总结

    CSS选择器可以分为多种类型,包括id选择器、类选择器、标签选择器、交叉选择器、群组选择器、后代选择器和通用选择器。 - id选择器:通过元素的id属性来选择特定元素,使用#符号加上id名作为选择器(如#idname)。 ...

    树使用css选择器优化代码(IE7+,firefox3,opera9,chrom下可用)

    CSS选择器分为多个级别,从基础的ID选择器(#id)、类选择器(.class)、元素选择器(element)到更复杂的后代选择器(element element)、子代选择器(element &gt; element)、属性选择器[element[attr]]、伪类选择器(:hover, :...

    scrapy爬虫之CSS选择器(比前面两个更全)

    相比XPath或其他方法,CSS选择器往往更简洁、直观,对于前端开发者来说尤其友好。 在Scrapy中,`Selector`类提供了对文档进行解析和提取数据的功能,而CSS选择器就是其主要的数据定位手段。使用CSS选择器,你可以像...

Global site tag (gtag.js) - Google Analytics