一、类型选择符
什么是类型选择符?指以网页中已有的标签类型作为名称的行径符。body是网页中的一个标签类型,div,p,span都是。
如下:
body {}
div {}
p {} 转自:奈薇建站网(www.nev.cn)
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标签*/ 转自:奈薇建站网(www.nev.cn)
CSS选择符是非常自由与灵活的,可以根据页面的需要,使用各种选择符,尽量结构化与优化CSS文件.
分享到:
相关推荐
《深入理解CSS选择符的匹配方式》 在网页前端开发中,CSS选择符的使用技巧对页面性能至关重要。本文着重探讨CSS选择符的匹配方式,旨在帮助开发者优化样式规则,提升网页加载速度。 1. 选择符类型及其性能影响: ...
下面将详细解释各种CSS选择符及其用途。 1. **类型选择符**: 类型选择符基于HTML元素的标签名来应用样式。例如,`body`选择符将样式应用于整个文档的主体,而`p`选择符则针对所有段落。在给定的例子中,`body`内的...
CSS选择符是CSS样式表中用于指定...CSS选择符是构建高效、精确CSS样式的重要工具,通过合理的组合和运用,可以实现丰富的页面布局和动态效果。了解并熟练掌握各种选择符的用法,对于提升网页设计的效率和质量至关重要。
(7)利用 CSS 预处理器(如 Sass 或 Less)来管理复杂的选择符和嵌套,预处理器可以在编译时优化选择符结构,提高效率。 (8)对于大型项目,考虑使用 CSS 模块化工具,如 CSS Modules 或 CSS-in-JS 解决方案,...
本篇将详细解释不同类型的CSS选择符及其用法。 一、类型选择符 类型选择符是基于HTML元素标签名来选择元素的。例如,`body { font-size:12px; }` 将设置整个文档的字体大小为12像素,而`p { color:blue; }` 则会使...
在这个【CSS选择符补充】的整理中,我们将深入探讨上下文选择符、特殊上下文选择符、继承与上下文选择符的作用、ID与类的区别、属性选择符以及伪类和伪元素的应用。 首先,上下文选择符允许我们根据元素的层级关系...
### CSS选择符与盒模型 在网页设计与开发过程中,CSS(层叠样式表)扮演着极其重要的角色,它能够帮助我们控制HTML元素的布局、颜色、大小等样式。本篇将详细介绍CSS中的选择符与盒模型,以及相关的伪类和选择符...
本节将深入探讨如何使用CSS选择符来展示XML文档,包括类型选择符、ID选择符、类选择符、包含选择符以及选择符分组。 1. **类型选择符**: 类型选择符是直接使用XML标记名作为选择符,如`<title>`。在CSS中,这可以...
在这个4.2单元的课堂实践中,我们将学习四种CSS选择符的使用方法,包括ID选择符、类选择符、包含选择符以及选择符分组,以实现对XML文档中的特定元素进行格式化。 首先,ID选择符是通过在XML元素上设置唯一的`id`...
文章中提到的“属性及剩余的选择符”是指CSS中除了常见的类型、类和ID选择符之外的,根据元素的属性以及特定条件进行选择的其他选择符类型。 在CSS中,属性选择符可以根据元素的属性以及属性值的不同状态来选取元素...
在Web前端开发中,CSS(层叠样式表)是用于描述网页表现形式的语言,它允许开发者对页面元素进行样式化,从而提高用户体验和...在编写CSS时,应该根据实际需求选择合适的选择符类型,以确保样式的一致性和可管理性。
CSS基础中的CSS选择符是网页开发人员在布局和样式化网页元素时必须掌握的一项关键技术。选择符告诉浏览器应该将一组样式规则应用到哪些元素上。本知识点介绍如下分类: 1. 通配选择符 通配选择符用符号“*”表示,...
在编写CSS时,除了遵循上述规则外,还应该注意如下几点:首先,精简CSS选择符,不要使用冗长且复杂的组合选择符。其次,优化CSS的书写顺序,将最具体的规则放在前面,以此来提高匹配效率。此外,避免在CSS中使用不必...
### CSS选择符说明 #### 一、类型选择符 类型选择符是最基本的选择符类型,它直接使用HTML标签名称作为选择标准。例如: ```css body { font-size: 12px; } ``` 上述代码表示将整个`<body>`标签内的文字大小...
这些特殊的选择符结合基本选择符(如元素选择符、类选择符、ID选择符等)一起,可以帮助开发者构建出更复杂、更精准的CSS规则。它们在处理页面布局和交互时,尤其是动态内容或响应式设计时,能提供更大的灵活性。...
【CSS类别选择符详解】 CSS(层叠样式表)是网页设计中不可或缺的一部分,它赋予了网页丰富的表现力和灵活性,让网页系统美感的未来得以实现。本教程由曹鹏老师精心讲解,针对初级到中级的网页设计师,旨在提升大家...