前面的学习我们仅仅使用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 744如果同个元素有两个或以上冲突的CSS规则,浏览器有一些基本的规 ... -
CSS教程16 CSS的伪元素Pseudo Elements
2010-07-22 11:59 685伪元素吸附在选择上和pseudo classes伪类很像,像这 ... -
CSS教程15 CSS的At-Rules@规则
2010-07-22 11:58 723At-rules分装不同的CSS规 ... -
CSS教程14 CSS网页布局Page Layout
2010-07-22 11:57 836使用CSS布局非常简单,如果你习惯使用tables布局,可能开 ... -
CSS教程13 CSS的display属性
2010-07-22 11:56 758操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式 ... -
CSS教程12 CSS的Background Images 背景图片
2010-07-22 11:56 954背景图片Background Images有许多属性可以操作。 ... -
CSS教程11 CSS的属性缩写
2010-07-22 11:55 658一些CSS属性允许使用一串值代替许多属性,值使用空格分开。 ... -
CSS教程10 CSS的Pseudo Classes 伪类
2010-07-22 11:54 609请你注意一些CSS伪类属性不被所有浏览器支持,但有四个伪类可以 ... -
CSS教程9 CSS的Grouping and Nesting分组和嵌套
2010-07-22 11:53 466Grouping 分组 当许多选择器有同样属性时,可以使 ... -
CSS教程7 CSS属性结合起来使用
2010-07-22 11:51 717如果你学完HTML初级教程即可学习CSS初级教程,使用CSS处 ... -
CSS教程6 CSS的Border边框
2010-07-22 11:48 626CSS Borders 边框 边框可以运用到body里的 ... -
CSS教程5 Margin和Padding
2010-07-22 11:45 618margin和padding用来隔开元素,margin是隔开元 ... -
CSS教程4 CSS的Text 文本
2010-07-22 11:44 711有一系列属性可以改变网页文字的大小和形状,概要如下: fon ... -
CSS教程3 CSS的color颜色
2010-07-22 11:43 1081css可以处理16,777,216颜色,可以使用名字、rgb ... -
CSS教程2 选择器 、属性、值
2010-07-22 11:41 727HTML有标签,CSS有选择器。选择器是给内部和外部样式里面的 ... -
CSS教程1CSS的应用
2010-07-22 11:37 682CSS教程 1、CSS的应用 一、In-line 行内 ...
相关推荐
首先,元素选择符是最基本的类型,包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示,可以选中所有元素,常用于统一设置页面元素的外边距和内边距。但是,由于其作用域较大,使用时应...
下面是前端开发中经常使用的 30 个 CSS3 选择器,包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...
首先,从语法上看,`id`和`class`的选择器在CSS文件中以不同的符号表示。`id`选择器使用井号`#`作为前缀,如`#exampleId`,而`class`选择器则使用点`.`作为前缀,如`.exampleClass`。 其次,`id`和`class`在页面中...
在本“CSS教程实例大全”中,我们将深入探讨CSS的核心概念、选择器、布局技术以及一些高级特性,旨在帮助初学者和进阶者全面掌握CSS。 ### 1. CSS基础 - **选择器**:CSS的选择器是用于选取HTML元素的规则,如类...
选择器分为五种基本类型:标签选择器、class选择器、ID选择器、后代选择器和伪类选择器。 1. 星状选择符(*) 星状选择符(*)是CSS选择器中最简单的一种,作用于所有元素。例如:`* { margin: 0; padding: 0; }`...
为了巩固所学,你可以尝试一个练习,使用上述四种不同的选择器来实现一个简单的样式效果,例如设置标题颜色、段落字体、链接样式以及一个特殊ID元素的背景色。这样可以帮助你更好地理解和应用CSS基础选择器。
选择器用于选取要应用样式的元素,如`h1`用于选择所有一级标题,`.class`用于选择类名为特定值的元素,`#id`用于选择ID为特定值的元素。声明由属性和值组成,如`color:red;`设置元素颜色为红色。 2. **盒模型**:...
2. **类选择器、属性选择器和伪类**(.class, [attr], :pseudo-class):每个这类选择器赋予10个单位。 3. **标签选择器和伪元素**(element, :pseudo-element):每个这类选择器赋予1个单位。 4. **通用选择器、子...
如果一个选择器同时包含了标签名和ID(如`span#id3`),它的优先级高于单纯只有ID的选择器(如`#id3`),同样,标签加类的选择器(如`span.class3`)优先级高于只有类的选择器(如`.class3`)。这是因为这种组合选择...
8. **相邻兄弟选择器**: 使用`+`操作符,选择紧跟在另一个元素后面的同级元素。例如,`p + a`会选择紧跟在`p`元素后面的`a`元素,并移除其下划线。 9. **伪类**: - 链接伪类:`a:link`, `a:visited`, `a:hover`...
### CSS选择器的应用 #### CSS概述与引入方式 CSS(层叠样式表)是一种用于定义HTML文档中元素样式的语言。它允许开发者控制网页布局、颜色、字体等外观特性,从而增强网页的表现力。CSS可以通过多种方式引入: -...
例如,`p`选择器用于选取所有段落,`#header`选择器选取id为"header"的元素,`.class`选择器选取class为"class"的所有元素。 2. **声明**: 声明由一个属性和一个值组成,用冒号分隔,如`color: red;`表示将文本颜色...
常用选择器是 CSS 选择器中最基本的选择器,包括三种类型:ID 选择器、类选择器和标签选择器。 * ID 选择器:根据元素的 ID 来选择元素,例如 `#demoDiv{color:#FF0000;}`。在 HTML 中,元素可以定义一个 ID 属性,...
本文将深入探讨CSS选择器的几个主要类型,包括HTML标签选择器、类别(Class)选择器、专用ID选择器、选择器组合筛选、选择器集体声明、选择器的嵌套、子选择器以及属性选择器。 1. **HTML标签选择器**:这是一种最...
CSS选择器可以分为多种类型,包括id选择器、类选择器、标签选择器、交叉选择器、群组选择器、后代选择器和通用选择器。 - id选择器:通过元素的id属性来选择特定元素,使用#符号加上id名作为选择器(如#idname)。 ...
CSS选择器分为多个级别,从基础的ID选择器(#id)、类选择器(.class)、元素选择器(element)到更复杂的后代选择器(element element)、子代选择器(element > element)、属性选择器[element[attr]]、伪类选择器(:hover, :...
相比XPath或其他方法,CSS选择器往往更简洁、直观,对于前端开发者来说尤其友好。 在Scrapy中,`Selector`类提供了对文档进行解析和提取数据的功能,而CSS选择器就是其主要的数据定位手段。使用CSS选择器,你可以像...