CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性
CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考。
CSS 选择符:
1) id选择器(# myid)
2) 类选择器(.myclassname)
3) 标签选择器(div, h1, p)
4) 相邻选择器(h1 + p)
5) 子选择器(ul > li)
6) 后代选择器(li a)
7) 通配符选择器( * )
8) 属性选择器(a[rel = "external"])
9) 伪类选择器(a: hover, li:nth-child)
可继承的样式:
1) font-size
2) font-family
3) color
4) text-indent
不可继承的样式:
1) border
2) padding
3) margin
4) width
5) height
优先级算法:
1) 优先级就近原则,同权重情况下样式定义最近者为准;
2) 载入样式以最后载入的定位为准;
3) 3.!important > id > class > tag
4) important 比 内联优先级高,但内联比 id 要高
CSS3新增伪类举例:
1) p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
2) p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
3) p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
4) p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
5) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
6) :enabled :disabled 控制表单控件的禁用状态。
7) :checked 单选框或复选框被选中。
CSS3有哪些新特性?
1) CSS3实现圆角(border-radius),阴影(box-shadow),
2) 对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)
3) transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4) 增加了更多的CSS选择器 多背景 rgba
5) 在CSS3中唯一引入的伪元素是 ::selection.
6) 媒体查询,多栏布局
7) border-image
CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性的更多相关文章
- CSS3新增伪类--好用的:target
问:如果让你实现下图,点击跳转后,让内容1增加一个背景颜色,你会怎么做呢? 可能很多小伙伴第一反应是用JS,给跳转绑定点击事件,然后用DOM获取到内容1,在给其添加css样式. 如果我跟你说用cs ...
- CSS3新增了哪些新特性
一.是什么 css,即层叠样式表(Cascading Style Sheets)的简称,是一种标记语言,由浏览器解释执行用来使页面变得更为美观 css3是css的最新标准,是向后兼容的,CSS1/2的 ...
- CSS3新增伪类
p:last-of-type 选择其父元素的最后的一个P元素 p:last-child 选择其父元素的最后子元素(一定是P才行) p:first-of-type ...
- CSS3新增伪类汇总
:root 选择文档的根元素,等同于 html 元素 :empty 选择没有子元素的元素 :target 选取当前活动的目标元素 :not(selector) 选择除 selector 元素意外的元素 ...
- CSS3新增伪类有那些?
p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child ...
- CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?
CSS 选择符有哪些? 1.id选择器(#id) 2.类选择器(.class) 3.标签选择器(div,h1,p) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器 ...
- HTML/CSS 选择符优先级
CSS的选择符优先级 1.同级样式默认后者覆盖前者 2.样式优先级 类型(1) < class[type](10)=伪类(10) < id(100) < style行间样式(1000 ...
- 30个你必须记住的CSS选择符
所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...
- 说说ID选择符、类选择符和HTML标记选择符的优先级顺序
ID选择符.类选择符和HTML标记选择符三者之间的优先级顺序是:ID选择符>类选择符>HTML标记选择符,但是可以用!important提升优先权. 如: p{color:#f ...
随机推荐
- SQL记录-PLSQL记录
PL/SQL记录 PL/SQL记录就是可以容纳不同类型的数据项的数据结构.记录由不同字段,类似于数据库表的行. 例如,要保留跟踪图书馆中的书籍.可能要跟踪有关每本书下面的属性类似:标题,作者,主题 ...
- node.js+express,实现RESTful API
node代码如下(exptest.js): var express = require('express'); var bodyParser = require('body-parser'); var ...
- poj 1776 Task Sequences
http://poj.org/problem?id=1776 题意: 有一个机器要完成N个作业, 给你一个N*N的矩阵, M[i][j]=1,表示完成第i个作业后不用重启机器,继续去完成第j个作业 M ...
- bzoj千题计划230:bzoj3205: [Apio2013]机器人
http://www.lydsy.com/JudgeOnline/problem.php?id=3205 历时一天,老子终于把它A了 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 因为不懂spfa ...
- bzoj千题计划224:bzoj1023: [SHOI2008]cactus仙人掌图
又写了一遍,发出来做个记录 #include<cstdio> #include<algorithm> #include<iostream> using namesp ...
- Java获取时间,将当前时间减一年,减一天,减一个月
在Java中操作时间的时候,需要计算某段时间开始到结束的区间日期,常用的时间工具 Date date = new Date();//获取当前时间 Calendar calendar = Calenda ...
- iOS数据库操作之coredata详细操作步骤
CHENYILONG Blog iOS数据库操作之coredata详细操作步骤 技术博客http://www.cnblogs.com/ChenYilong/ 新浪微博http://weibo.com/ ...
- 第12月第15天 mysqlx boost reswift
1. INSTALL PLUGIN mysqlx SONAME 'mysqlx.so' https://yq.aliyun.com/articles/38288 2. boost boost::sha ...
- spring如何管理mybatis(二) ----- SqlSession的线程安全性
在之前的文章中我们了解到最终的数据库最终操作是走的代理类的方法: @Override public Object invoke(Object proxy, Method method, Object[ ...
- springcloud使用Hystrix实现微服务的容错处理
使用Hystrix实现微服务的容错处理 容错机制 如果服务提供者相应非常缓慢,那么消费者对提供者的请求就会被强制等待,知道提供者相应超时.在高负载场景下,如果不作任何处理,此类问题可能会导致服务消费者 ...