CSS选择符详解

核心提示:什么是类型选择符?指以网页中已有的标签类型作为名称的行径符。body是网页中的一个标签类型,div,p,span都是。

一、类型选择符

什么是类型选择符?指以网页中已有的标签类型作为名称的行径符。body是网页中的一个标签类型,div,p,span都是。
如下:

body {}
div {}
p {}
span {}

二、群组选择符

对于XHMTL对象,可以对一组同时进行了相同的样式指派。
使用逗号对选择符进行了分隔,这样书写的优点在于同样的样式只需要书写一次即可,减少代码量,改善CSS代码结构。
使用时应该注意"逗号"是在半角模式下,并非中文全角模式。
如下:

h1,h2,h6,p,span
{
font-size:12px;
color:#FF0000;
font-family: arial;
}

三、包含选择符

对某对象中的子对象进行样式指点定,这样选择方式就发挥了作用。
需要注意的是,仅对此对象的子对象标签有效,对于其它单独存在或位于此对象以外的子对象,不应用此样式设置。
这样做的优点在于,帮我们避免过多的id、class设置,直接对所需的元素进行定义。
如下:

h2 span
{
color:red;
}
如下:
body h1 span strong
{
font-weight:bold;
}

四、id选择符

根据DOM文档对象模型原理所出现的选择符,对于一个XHTML文件,其中的每一个标签都可以使用一个id=""的形式进行一个名称指派,但需要注意,在一个XHTML文件中id是具有唯一性而不可以重复的。
在div css布局的网页中,可以针对不同的用途进行命名,如头部为header、底部为footer。
XHTML如下:

<div id="content"></div>

CSS如下:

#content
{
font-size:14px;
line-height:120%;
}

五、class选择符

其实id是对于XHTML标签的扩展,而class是对SHTML多个标签的一种组合,class直译的意思是类或类别。
对于XHTML标签使用class=""进行名称指派。与id不同,class可以重复使用,对于多个样式相同的元素,可以直接定义为一个class。
使用class的优点已不言自明,它对CSS代码重用性有良好的体现,众多的标签均可以使用一个样式来定义而不需要每一个编写一个样式代码。
XHTML如下:

<p class="he"></p>
<span class="he"></span>
<h5 class="he"></h5>

CSS如下:

.he
{
margin:10px;
background-color:red;
}

六、标签指定式的选择符

如果想同时使用id和class,也想同时使用标签选择符,可以使用如下的方式:

h1#content {}
/*表示所有id为content的h1标签*/
h1.p1 {}
/*表示所有class为p1的h1标签*/

标签指定式选择符的精度介于标签选择符及id/class选择符之间,是常用的选择符之一。

七、组合选择符

对于上面的所有选择符而言,进行组合使用。如下:

h1 .p1 {}
/*表示h1下的所有class为p1的标签*/
#content h1 {}
表示id为content的标签下的所有h1标签
h1 .p1,#content h1 {}
/*表示h1下的所有class为p1的标签以及id为content的标签下的所有h1标签*/
h1#content h2{}
/*id为content的h1标签下的h2标签*/

CSS选择符是非常自由与灵活的,可以根据页面的需要,使用各种选择符,尽量结构化与优化CSS文件.

时间: 2024-10-31 10:35:59

CSS选择符详解的相关文章

CSS&amp;nbsp;Selector&amp;nbsp;-&amp;nbsp;CSS选择符详解

一.类型选择符 什么是类型选择符?指以网页中已有的标签类型作为名称的行径符.body是网页中的一个标签类型,div,p,span都是. 如下: body {} div {} p {} span {} 二.群组选择符 对于XHMTL对象,可以对一组同时进行了相同的样式指派. 使用逗号对选择符进行了分隔,这样书写的优点在于同样的样式只需要书写一次即可,减少代码量,改善CSS代码结构. 使用时应该注意"逗号"是在半角模式下,并非中文全角模式. 如下: h1,h2,h6,p,span {   

CSS标签语法:详解选择符中的关系选择符

文章简介:CSS标签语法:详解选择符中的关系选择符. 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪对象选择符.在众多的选择符中,可以让我们根据自己的需要更加灵活性的选择合适的选择符来对样式进行编写,达到最大的质量和效率. 今天就为大家介绍下选择符中的关系选择符,"关系"这可是一等一的大事啊,我们得理清楚,这样做事情才能更加的有效率.不然在CSS中有你受的,哈哈.关系选择符有四个类别:包含选择符.子选择符.相邻选择符.兄弟选择符.接下来

Python中的类与对象之描述符详解

 这篇文章主要介绍了Python中的描述符详解,属于Python学习过程中类与对象的基本知识,需要的朋友可以参考下     描述符(Descriptors)是Python语言中一个深奥但却重要的一部分.它们广泛应用于Python语言的内核,熟练掌握描述符将会为Python程序员的工具箱添加一个额外的技巧.为了给接下来对描述符的讨论做一些铺垫,我将描述一些程序员可能会在日常编程活动中遇到的场景,然后我将解释描述符是什么,以及它们如何为这些场景提供优雅的解决方案.在这篇总结中,我会使用新样式类来指代

CSS盒子模式详解二

自本人教程<CSS盒子模式详解>发表以来,一直获得各位网友的好评与支持,今天应各位网友的要求,也为了答谢各位网友的支持,本人将推出续篇教程,以加深各位网友对CSS盒子模式的理解.此教程面向读者还是DIV排版入门者,如果你是高手,那就不要浪费自己时间了. 本人这次将讲解一个纵向CSS导航栏实例的制作,在讲解过程中将会延用之前发表教程所讲到的"盒子"概念,如果你没有看过本人之前的那篇教程,又或者你还不理解什么是"盒子"这一概念,请先通过下面的两个链接阅读本人

ECMAScript 5中的属性描述符详解

 这篇文章主要介绍了ECMAScript 5中的属性描述符详解,本文讲解了Object.defineProperty.数据描述符.存取描述符.获取属性描述符.对象控制等内容,需要的朋友可以参考下     属性描述符是ES5中新增的概念,其作用是给对象的属性增加更多的控制. Object.defineProperty 要研究属性描述符,首先要谈谈 Object.defineProperty 方法.这个方法的作用是给对象定义新属性或修改已存在的属性.其原型如下: 代码如下: Object.defin

请写出对以下三组CSS选择符的理解:#test, .test, .test.subTest.

问题描述 请写出对以下三组CSS选择符的理解:#test, .test, .test.subTest. 解决方案 #test: id选择器 应用到id为test元素上.test:类选择器 通过指定元素class名称为test,应用该样式.test .subTest 表示一种样式的层次结构 eg<div class="test"> <div class="subTest"></div></div> 亲,看看中意否?

CSS入门:css选择符

css 一.选择符模式模式/含义/内容描述 * 匹配任意元素.(通用选择器) E 匹配任意元素 E (例如一个类型为 E 的元素).(类型选择器) E F 匹配元素 E 的任意后代元素 F .(后代选择器) E > F 匹配元素 E 的任意子元素 F .(子选择器) E:first-child 当元素 E 是它的父元素中的第一个子元素时,匹配元素 E .(:first-child 伪类) E:link E:visited 如果 E 是一个目标还没有访问过(:link)或者已经访问过(:visit

网页制作知识之详细讲解CSS选择符

css|网页 一.选择符模式 模式/含义/内容描述 * 匹配任意元素.(通用选择器) E 匹配任意元素 E (例如一个类型为 E 的元素).(类型选择器) E F 匹配元素 E 的任意后代元素 F .(后代选择器) E > F 匹配元素 E 的任意子元素 F .(子选择器) E:first-child 当元素 E 是它的父元素中的第一个子元素时,匹配元素 E .(:first-child 伪类) E:link E:visited 如果 E 是一个目标还没有访问过(:link)或者已经访问过(:v

小技巧:CSS 选择符有哪些?如何合理运用?

css|技巧 CSS selector 选择符是我们进行CSS网页布局的基础.CSS selector到底有哪些,如何合理的运用呢?选择符可以分为三类,除了第一类HTML selector之外,其它两类我们是可以自己命名的,在进行命名时,注意包含语义,或者添加必要的注释,使我们的代码更清晰,易读. HTML selector 标签选择符 HTML selector就是HTML的标签,如:DIV,TD,P,H1等等,如你用 CSS 定义了它们,在CSS文章所控制的页面中这个标签的性质就按照你的定义