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 ...
随机推荐
- kubernetes实战篇之为默认账户创建镜像拉取密钥
系列目录 上一节我们分别使用纯文本账户密码和docker的config文件一创建一个kubernetes secret对象,并且把它添加到containers的imagePullSecrets字段用以 ...
- 从零到一,利用kubeadm在ubuntu server 16.04 64位系统离线安装kubernetes v1.10.0
说明 初步接触kubernets,记录学习过程 本教程目的利用kubeadm在ubuntu server 16.04 64位系统离线安装kubernets v1.10.0 环境信息 节点IP地址 角色 ...
- (转)Java 8 中的 Streams API 详解
为什么需要 Stream Stream 作为 Java 8 的一大亮点,它与 java.io 包里的 InputStream 和 OutputStream 是完全不同的概念.它也不同于 StAX 对 ...
- ZigBee入门第一天
按键查询控制灯的状态 1.宏定义灯和按键 2.按键和灯初始化 3.用if语句消抖的方法,实现按键控制灯的状态 相关寄存器 PxSEL PxDIR #include"ioCC2530.h&qu ...
- Java学习笔记之---比较接口与抽象类
Java学习笔记之---比较接口与抽象类 抽象类是描述事物的本质,接口是描述事物的功能 接口与抽象类的异同 1.一个类只能继承一个父类,但是可以有多个接口 2.抽象类中的抽象方法没有方法体,但是可以有 ...
- 微信小程序 键盘显示短信验证码
1.场景描述: IOS系统 一些APP或者微信小程序在收到短信验证码的时候会在键盘上自动保存验证码信息,当用户点击的时候,会自动赋值到当前所点击的输入框中 2.案例: 2.实现: TIPS:这个功能是 ...
- Spark 中的机器学习库及示例
MLlib 是 Spark 的机器学习库,旨在简化机器学习的工程实践工作,并方便扩展到更大规模.MLlib 由一些通用的学习算法和工具组成,包括分类.回归.聚类.协同过滤.降维等,同时还包括底层的优化 ...
- ~~函数基础(二):返回值&作用域~~
进击のpython 函数的返回值和作用域 上文我们讲到了函数的基础--参数的相关问题 举的例子也都是带有print的函数定义 但是有个问题就出现了:我不想打印这个函数处理后的参数 我想拿到这个参数然后 ...
- ~~在python中踩过的坑以及问题~~(不断更新)
python说简单也不难,但是在这其中大大小小的点 真的是有够折磨人欸! 1. input 输入的时候,即使输入的是数字,数据类型也是字符串 2. 字符串本质上来看可以看作有序数组 3 ...
- 【AI】Android Pie中引入的AI功能
前言 “无AI,不未来”,绝对不是一句豪情壮语,AI早已进入到了我们生活当中.去年Google发布的Android Pie系统在AI功能方面就做了重大革新,本文就对Google在新系统中引入的AI功能 ...