几个必须掌握的css概念:重用、子选择器和组选择器

简介:  最近由于工作原因,接触到一些css方面的东西,收集了一些相关资料贴出来,希望对大家有用.重用:经常会用到一些基本的式样叠加,比如字体的颜色和加粗。
 最近由于工作原因,接触到一些css方面的东西,收集了一些相关资料贴出来,希望对大家有用.
重用:
经常会用到一些基本的式样叠加,比如字体的颜色和加粗。网页中可能同时出现三种情况:1.字体为红色  2.字体加粗 3.字体红色加粗
这时我们只需要定义前两个css:
.red{color:red;}
.b{font-weight:bold;}
第三种情况时用<div class="red b"></div>

子选择器:
相对来说,简化html文件的代码更加重要,因此在css中使用子选择器非常有益,同时也使css代码更加容易理解。比如下面的代码:
<div id="sub_nav">
<ul>
<li> <a href="#">Item 1</a></li>>
<li> <a href="#">Item 2</a></li>
<li> <a href="#">Item 3</a></li>
</ul>
</div>
如果div li a都有各自的式样,采用子选择器,可以省略代码中li 和a 的class属性,从而简化代码:
#sub_nav { /* Some styling */ }
#sub_nav li { /* Some styling */ }
#sub_nav a { /* Some styling */ }
组选择器:
当一些元素类型、class或者id都有共同的一些属性,你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。
例如:定义所有标题的字体、颜色和margin,你可以这样写:
h1,h2,h3,h4,h5,h6 {
"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
如果在使用时,有个别元素需要定义独立样式,你可以再加上新的定义,可以覆盖老的定义,例如:
h1 { font-size:2em; }
h2 { font-size:1.6em; }
重用、子选择器和组选择器的灵活使用可以非常有效的减少代码,同时非常有利的增加代码的可读性,具体的应用需要在具体编写过程中体会。
相关文章
|
21天前
|
XML 前端开发 数据格式
css核心组成部分包括选择器、属性和值。
【4月更文挑战第5天】css核心组成部分包括选择器、属性和值。
18 7
|
4月前
|
前端开发 算法
css 选择器有哪些?优先级?哪些属性可以继承?
css 选择器有哪些?优先级?哪些属性可以继承?
29 0
|
4月前
|
前端开发
CSS中两个类选择器写一起的作用,可分有逗号和没有
CSS层叠样式表设计当中,两个类选择器写在一起,那么如果这两个类选择器之间没有使用英文的“,”隔开,而是使用空格,那么一般表示的是选择第一个类选择器的子元素中类名为第二个类选择器的所有元素,即这两个类选择器一般是父、子元素(或后代元素)的递进关系,目的是为了
35 1
|
前端开发 开发者
CSS 重要概念之选择器
在前端开发中,CSS 是一种用于控制网页样式和布局的语言。其中选择器是 CSS 中非常重要的一个概念,它可以用来定位 HTML 元素并设置其样式。下面我们来详细介绍一下 CSS 选择器。
73 0
|
JavaScript
jQuery选择器之基本选择器(简单)及层次选择器(重要)
jQuery选择器之基本选择器(简单)及层次选择器(重要)
170 37
|
前端开发
CSS 学习6.层次选择器
CSS 学习6.层次选择器
CSS 学习6.层次选择器
|
前端开发
CSS常用选择器和关系选择器的基本用法
父子关系直接包含的关系,祖先后代关系,直接或间接包含的关系 ,祖先后代也包含,兄弟关系, 拥有共同的父元素。
183 0
CSS常用选择器和关系选择器的基本用法
|
前端开发 JavaScript
【CSS】基础选择器,包括标签选择器、类选择器、id选择器和通配符选择器...
有关基础选择器的学习记录,包括标签选择器、类选择器、id选择器和通配符选择器...
295 0
【CSS】基础选择器,包括标签选择器、类选择器、id选择器和通配符选择器...
|
Web App开发 前端开发 JavaScript
浅谈逻辑选择器 -- 父选择器它来了!
浅谈逻辑选择器 -- 父选择器它来了!
128 0
浅谈逻辑选择器 -- 父选择器它来了!