CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

1、选择器

  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)

2、优先级为:

!important > id > class > tag

important 比 内联优先级高,但内联比 id 要高

3、CSS3新增伪类举例:

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

4、CSS3有哪些新特性?

CSS3实现圆角(border-radius),阴影(box-shadow), 对文字加特效(text-shadow、),线性渐变(gradient),

旋转(transform) transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器 多背景 rgba 在CSS3中唯一引入的伪元素是::selection. 媒体查询@media,多栏布局 border-image

CSS3中新增了一种盒模型计算方式: box-sizing 。盒模型默认的值是 content-box , 新增的值是 padding-box 和 border-box ,几种盒模型计算元素宽高的区别如下:

content-box(默认)

布局所占宽度Width:Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height: Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box

布局所占宽度Width:Width = width(包含padding-left + padding-right) + border-top + border-bottom

布局所占高度Height:Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

布局所占宽度Width:Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height: Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

css3部分注意事项的更多相关文章

  1. 如何处理CSS3属性前缀

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  2. 详解CSS3属性前缀(转)

    原文地址 CSS3的属性为什么要带前缀 使用过CSS3属性的同学都知道,CSS3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀.这是为什么呢? 我的理解是,浏览器厂商以前就一直在实 ...

  3. 如何处理CSS3属性前缀(转载)总结

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  4. CSS知识总结之浏览器(持续更新)

    web页面浏览器渲染过程 1.解析html文件,并构建DOM树: 在DOM树中,每一个html标签都有一个对应的节点,并且每一个文本也有一个对应 的节点(js的textNode),DOM树的根节点就是 ...

  5. CSS知识总结之浏览器

    web页面浏览器渲染过程 1.解析html文件,并构建DOM树: 在DOM树中,每一个html标签都有一个对应的节点,并且每一个文本也有一个对应 的节点(js的textNode),DOM树的根节点就是 ...

  6. 网页布局要注意的事项,以及CSS3需要特别注意的地方。

    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;隐藏超出部分,出省略号 一定要先布局!布局!布局!要先设置好色块,将位置确 ...

  7. CSS3伪类与伪元素的区别及注意事项

    CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特 ...

  8. CSS3硬件加速需要注意的事项

    webkit浏览器会把所有需要动画的元素放到复合层中渲染,另外以下两种情况也会使不需要动画的元素也放到复合层中渲染,这样会导致元素动画不流畅(原则是需要的动画才让它在复合层中渲染) 1,元素有一个包含 ...

  9. 百分比相对计算注意事项CSS3

    百分比计算 1.涉及元素定位,和大小计算,基于元素自身的包含块. 2.元素背景图的大小计算,位置计算,基于元素自身的宽,高. 2.元素图片边框使用的图图片大小计算,基于元素自身的宽,高.

随机推荐

  1. Lua 跟 C++ 的交互

    Lua 和 C++ 是这样交互的 乱七八糟的前戏: 1. 到官网下载 Lua 文件  可參考 ->  Lua 下载与配置 2. 设置环境  可參考  ->  VS 配置Lua环境 交互过程 ...

  2. SQL语句多表连接查询语法

    一.外连接 1.左连接  left join 或 left outer join SQL语句:select * from student left join score on student.Num= ...

  3. 解析java中volatilekeyword

    在java多线程编程中常常volatile,有时候这个keyword和synchronized 或者lock常常有人混淆.详细解析例如以下: 在多线程的环境中会存在成员变量可见性问题: java的每一 ...

  4. 大话设计模式宏观总结——创建型&amp;结构型&amp;行为型

    师傅验收项目的时候.问大话设计模式那三种类型的差别和联系是什么,顿时我傻了眼.由于除了知道这三种类型分别如何称呼以外.从来都没想过为什么这样划分?于是,我便回答:我没想过这个问题.若是从字面上来理解的 ...

  5. Robot Framework 使用技巧 快捷键

        ctrl+alt+space 自动带出相关关键字,以及相关用法,里边有对应参数的说明. Ctrl+鼠标悬浮 直接显示关键字的相关用法 F5 关键字说明 (方法名函数名)             ...

  6. ASP.NET_SessionId vs .ASPXAUTH why do we need both of them?

    https://stackoverflow.com/questions/23758704/asp-net-sessionid-vs-aspxauth-why-do-we-need-both-of-th ...

  7. Mysql的简单使用(二)

    接上文Mysql的简单使用(一) 字段参数以“(字段名1 数据类型1,字段名2 数据类型2,......)”的形式构建. 关于mysql常用的数据类型,一下是比较常用的几种,想查阅比较详细的资料可以自 ...

  8. cf578c Weakness and Poorness 三分

    其实三分就是一个求单峰函数的最值的东西,用法比较统一.这个题就是观察发现不美好值是一个单峰函数,然后枚举t进行三分就行了. 题干: 给定一个长度为n的数组ai,求一个实数x,使得序列a1-x,a2-x ...

  9. Dice (HDU 4652)

    题面: m 面骰子,求1. 出现n个连续相同的停止 ;2. 出现n个连续不同的停止的期望次数.(n, m ≤ 10^6 ) 解析: 当然要先列式子啦. 用f[i](g[i])表示出现i个连续相同(不相 ...

  10. sort与sorted的区别

    描述 我们需要对List进行排序,Python提供了两个方法对给定的List L进行排序 :         方法1.用对List的成员函数sort进行排序        方法2.用内置函数sorte ...