CSS和html如何结合起来——选择符及优先级
1.选择符
| 兼容性 | ||
| 统配选择符 | * | |
| 元素选择符 | body | |
| 类选择符 | .class | |
| id选择符 | #id | |
| 包含原则符 | p strong (所有后代) | |
| 子代选择符 | p>strong (紧跟子代) | lte IE7 |
| 相邻选择符 | h1+p (h1后面第一个p元素) | lte IE7 |
| 属性选择符 | button[class] (带有class属性的button) | lte IE7 |
| button[class="switcher"] (class等于switcher) | lte IE7 | |
| button[class~="switcher"] (class中包含独立switcher) | lte IE7 | |
| button[class|="switcher"] (class以switcher开头-连字符分割) | lte IE7 | |
| 伪类(不同状态) | a:link a:hover a:visited a:active (:hover 也可用于其它元素) | lte IE7 |
| input : focus (当拥有键盘输入焦点时添加样式) | lte IE7 | |
| ul: first-child (向元素的第一个子元素添加样式) | lte IE7 | |
| p:lang(fl) (带有lang元素为fl 的p元素添加样式) | lte IE7 | |
| 伪对象(额外信息) | p:before {content:'XX' } (在元素之前添加内容) | lte IE7 |
| p:after {content:'XX' } (在元素之后添加内容) | lte IE7 | |
| p: first-letter (向文本的第一个字母添加样式) | lte IE7 | |
| p: first-line (向文本的首行添加特殊样式) | lte IE7 | |
| 选择符组合, | div#header,div#footer |
2.优先级
/*
lte:就是Less than or equal to的简写,也就是小于或等于的意思。 lt :就是Less than的简写,也就是小于的意思。 gte:就是Greater than or equal to的简写,也就是大于或等于的意思。 gt :就是Greater than的简写,也就是大于的意思。 ! :就是不等于的意思,跟javascript里的不等于判断符相同。
*/
开发人员编辑的CSS样式中根据选择符组合来决定优先级别,权重值会累加。
| 权重值 | 选择符或属性 |
| 最高 | !important |
| 1000 | HTML标签内style属性 (不建议使用,结构样式分离) |
| 100 | ID选择符 |
| 10 | 类选择法、属性选择符 |
| 1 | 标签选择符、伪类及伪对象 |
| 0 | 其它选择符:如通配选择符 |
元素本身设置的样式高于继承的样式,不用考虑权重值。
CSS和html如何结合起来——选择符及优先级的更多相关文章
- 说说ID选择符、类选择符和HTML标记选择符的优先级顺序
ID选择符.类选择符和HTML标记选择符三者之间的优先级顺序是:ID选择符>类选择符>HTML标记选择符,但是可以用!important提升优先权. 如: p{color:#f ...
- CSS第二天总结 更多的选择符
CSS的选择符非常多,今天继续总结后面的选择符 1.id和class选择符某些情况下我们用关系选择符或者伪类选择符无法选中一些元素时,我们可以给这些元素起 个名字或者分类,这就是id和class属性. ...
- css之属性及剩余的选择符
今天的课程加速了,比平时快了些,但觉得很不错.nice~ 属性选择符 E[att] 选择具有att属性的E元素. input[type]{color: #red;} <input t ...
- CSS 中常用的选择器(选择符)
一.标签选择器:直接将HTML标签(Tag)作为选择器,可以是p.h1.dl.strong等HTML标签.如: p { font:12px;}em { color:blue;}dl { float:l ...
- 3 CSS 定位&浮动&水平对齐&组合选择符&伪类&伪元素
CSS Position(定位):元素的定位与文档流无关 static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中 静态定位的元素不会受到top,bottom,left,right影 ...
- css那些事儿1 css选择符与管理
结合当下作为一名net程序员,难以找到工作情况下,先学习前端知识,前端现在已成为web和app的一个交叉点,web前端化,app使用h5技术前端化,至于什么后台数据库 缓存 消息队列的路线如果没有大型 ...
- HTML/CSS 选择符优先级
CSS的选择符优先级 1.同级样式默认后者覆盖前者 2.样式优先级 类型(1) < class[type](10)=伪类(10) < id(100) < style行间样式(1000 ...
- HTML第三讲(选择符)
本次课程讲CSS中的选择符 1.基本选择符 基本选择符有三个 1.标记名选择符 所谓的标记名选择符就是直接在样式中使用标记名定义,譬如以下代码: (此种选择符的特点是所有相同的标记名可以同时定义不需要 ...
- CSS基础篇之选择符
关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...
随机推荐
- 请给出linux中查看系统已经登录用户的命令?
w命令 第一行:当前系统运行了多久和系统负载 谁正在远程登录系统并且在干什么 [root@martin ~]# w 11:30:33 up 4 days, 18:10, 2 users, load a ...
- jmeter模拟spike测试(尖峰测试)
概述 尖峰测试(Spike testing)在性能测试中属于压力测试的一个子集.指的是在某一瞬间或者多个频次下用户数和压力陡然增加的场景. 为了验证我们的网站在访问用户急剧增加的情况下,或者短时间内反 ...
- eclipse 工具在工作中实用方法
不断更新记录工作中用到的实用技巧 1.快捷方式管理多个工作空间 参数: -showlocation 设置eclipse顶部显示工作空间位置 -data 文件位置 设置打开的工作空间位置 创建eclip ...
- C++程序设计2(侯捷video all)
一.转换函数Conversion function(video2) 一个类型的对象,使用转换函数可以转换为另一种类型的对象. 例如一个分数,理应该可以转换为一个double数,我们用以下转换函数来实现 ...
- 【React】react学习笔记01-概念与基本使用
俺为啥要学这玩意: 家里的杂事好不容易处理完了,开始正式静下心来学习~博主是做后端开发的,js基础不深,之前也是用React写过许多东西了,但是基本上都是用的CV大法,别人的组 件修修改改拿来 ...
- 【Netty整理01-快速入门】Netty简单使用Demo(已验证)
多处摘抄或手打,为了十积分厚着脸皮标为原创,惭愧惭愧~本篇文章用于快速入门搭建一个简单的netty 应用,如想稍微深入系统的了解,请参照本人下一篇博客,链接: 参考地址: 官方文档:http://ne ...
- 自己挖的坑跪着也要填完---mapper配置文件和java源文件在同一包下
本来准备研究下mybatis源码执行流程的,就随意搭建了个项目,所有配置如下: 一切看似都是那么的正常,然而执行的时候:Exception in thread "main" org ...
- 随时发布:REST API文档的代码仓库中的持续集成与协作
本文主要内容:API文档提供了预测客户成功的关键路径:在代码附近的文档上进行协作可以更好地检查代码和文档文件,提高自动化效率,并专门针对文档进行质量测试:提供通用文档框架,标准,自动化和工具,以提高团 ...
- java判断年份是否为闰年
在t1.jsp 中,设置一个表单,可以输入年份,提交到另外一个action进行计算,如果算出来是闰年,那么就跳转到a1.jsp(显示闰年),如果是平年就跳转到a2.jsp(显示平年). 要求:需要把计 ...
- Windows使用Python统一设置解析器路径
碰到的问题: .py文件放在cgi-bin文件夹下面,这个.py文件都要设置"#!python.exe路径"来告诉CGI如何找解析器解析这个.py的文件,我是想知道这个路径可否统一 ...