有关css的选择器优先级以及父子选择器
css，又称样式重叠表，如今的网页的样式基本是div+css写出来的，功能十分强大，要想在html文件中引入css文件需要在<head></head>标签内输入一行：<link rel=" stylesheet " type=" text/css " href=" XXX.css ">
css的一些基本样式也不一 一做介绍了，这个在手册以及一些学习网站上都会有，大家可以自行查阅；
css中有四种不同的选择器：1.类选择器（class选择器）；2.id选择器；3.html元素选择器；4.通配符选择器；
1.class选择器的使用：
. 类选择器名{ //类选择器前面的 . 一定要加
属性名：属性值；
...
}
2.id选择器的使用：
# id选择器名{ //在样式表中，id选择器的优先级最高
属性名：属性值；
...
}
3.html元素选择器：
html标签名{ // eg： a{ } img{ } body{ } 等等
属性名：属性值； //当定义一个html元素选择器后，所有该元素的样式都会发生改变
...
}
//同一html元素选择器中也可进行分类处理
html标签名.类名{ // eg: a . cls1 { a . cls2 {
属性名：属性值； 属性名：属性值； 属性名：属性值；
... ... ...
} } }
/* 应用到页面中 <a class="cls1"> 这个会渲染出a.cls1的样式
<a class="cls2"> 这个会渲染出a.cls2的样式 */
4.通配符选择器：
* { //通配符选择器会作用于所有的样式，大部分用来定义初始化所有内外页边距，但是其优先级是最低的
属性名：属性值； //通常一些有经验的web前端工程师习惯性把页边距清零
... //margin：0px ； padding：0px；
}
四个选择器的优先级： id选择器 > class选择器 > html元素选择器 > 通配符选择器 ；
父子选择器： //eg： <span="id">我<span>这里</span>有<span>一段</span>代码</span>
# id { // " 我 "，“ 有 ” ，“ 代码 ” 会渲染这个样式
属性名：属性值；
}
# id span{ // “ <span>这里</span>” 会渲染这个样式
属性名：属性值；
}
# id span span { // “ <span>一段</span> ” 会渲染这个样式
属性名：属性值；
}
父子选择器总结：父子选择器中可以有多层级（但在实际开发中不建议超过三层），
父子选择器有严格的层级关系；
任何类型的选择器都可以有父子选择器；
多个css文件可以相互引用，使用@import url（“被引入的路径和文件名”）指令引入 ；
有关css的选择器优先级以及父子选择器的更多相关文章
- css引入方式优先级以及不同选择器的优先级区别
我们都知道css有3种基本设置方式即 1.行内也叫嵌入式 例如: <div style='background:red'></div> 2.内联式,在html文件中用style ...
- 深入理解CSS选择器优先级
题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...
- CSS学习之选择器优先级与属性继承
CSS学习之选择器优先级与属性继承 选择器优先级 其实选择器是具有优先级的,我们来看下面这一组案例: <!DOCTYPE html> <html lang="en" ...
- 伪元素选择器，选择器优先级，CSS修改文字属性，CSS修改字体属性，CSS修改其他属性
伪元素选择器 未使用元素选择器的效果 第一行:伪元素选择器:选择部分内容 第二行:伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 ::selection:选择指定元 ...
- CSS选择器优先级
1.类的覆盖顺序和应用的时候引用的顺序没关系,覆盖顺序取决于类定义的顺序 例如: .a{ color:red } .b{ color:green } 由于b晚于a定义,所以b覆盖a,反 ...
- css几个优先级测试和!important
css样式不加!important情况下的有默认优先级 ,用!important提高优先级,最常见的css样式选择器的优先级测试.之前博文里也用到了提升优先级的方法: 测试结果:加了!importan ...
- css笔记09：选择器优先级
1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- python 46 css组合选择器 及优先级 、属性选择器
一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器: d ...
- css知多少（6）——选择器的优先级
1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...
随机推荐
- B.3 字典
在框架中,字典的选择要比列表少得多.只有三个主流的非并发 IDictionary<TKey, TValue> 实现,此外还有 ExpandoObject (第14章已介绍过). Concu ...
- collections、random、hashlib、configparser、logging模块
collections模块 在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型:Counter.deque.defaultdict. ...
- python爬虫10 | 网站维护人员：真的求求你们了，不要再来爬取了！！
今天 小帅b想给大家讲一个小明的小故事 ... 话说 在很久很久以前 小明不小心发现了一个叫做 学习python的正确姿势 的公众号 从此一发不可收拾 看到什么网站都想爬取 有一天 小明发现了一个小黄 ...
- The merchant
The merchant Time Limit: 3000MS Memory Limit: 65536K Description There are N cities in a cou ...
- 洛谷 P1843 奶牛晒衣服
题目背景 熊大妈决定给每个牛宝宝都穿上可爱的婴儿装 . 于是 , 为牛宝宝洗晒衣服就成了很不爽的事情. 题目描述 熊大妈请你帮助完成这个重任 . 洗完衣服后 , 你就要弄干衣服 . 衣服在自然条件下用 ...
- hdu1068 Girls and Boys --- 最大独立集
有一个集合男和一个集合女,给出两集合间一些一一相应关系.问该两集合中的最大独立集的点数. 最大独立集=顶点总数-最大匹配数 此题中.若(a,b)有关.则(b,a)有关.每个关系算了两次,相当于二分图的 ...
- HTML导航 - 点击更改背景
步骤一: 在须要添加效果的<li>标签中添加onclick事件:<li onclick="setcurrent(this)"> 步骤二: 加入JS代码: f ...
- 使用百度地图API进行Android地图应用开发（Eclipse）
随着基于位置的服务的兴起,地图类App呈现爆发趋势.随着而来的是地图供应商开放大量的API.供开发人员开发基于PC或者移动端的应用程序. 如今我们研究使用百度地图SDK进行Android项目的开发. ...
- Struts2 自己定义下拉框标签Tag
自己定义标签主要包含三个步骤: 1.编写java类,继承TagSupport类. 2.创建tld文件,影射标签名和标签的java类. 3.jsp页面引入tld. 样例:自己定义下拉框标签 假设页面上有 ...
- K度限制MST poj 1639
/* k度限制MST:有一个点的度<=k的MST poj 1639 要求1号点的度不超过k 求MST 我们先把1号点扔掉 跑MST 假设有sum个连通分支 然后把这sum个分支连到1上 就得到了 ...