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

时间: 2024-12-24 09:32:17

CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性的相关文章

CSS3新增伪类--好用的:target

  问:如果让你实现下图,点击跳转后,让内容1增加一个背景颜色,你会怎么做呢? 可能很多小伙伴第一反应是用JS,给跳转绑定点击事件,然后用DOM获取到内容1,在给其添加css样式. 如果我跟你说用css来实现,你会不会一脸蒙蔽,然后想骂人.哈哈哈.其实用CSS3新增的伪类:target就能轻松搞定. W3C是这样定义的,如下图: 并且该伪类兼容性也很好,现代浏览器都支持,只有ie8及以下不支持. 有兴趣的小伙伴可以试试下面我写的demo <!DOCTYPE html> <html>

css3新增伪类

1.p:first-of-type            选择属于其父元素的首个 <p> 元素的每个 <p> 元素 2.p:first-child ,            匹配属于其父元素中的首个子元素(子元素:first-child) table tr:first-child{} 3.p:last-of-type             选择属于其父元素的最后 <p> 元素的每个 <p> 元素. 4.p:last-child              

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)  选择属于其父元素的第二个子元素的每

css新增伪类

css3新增伪类 :first-of-type p:first-of-type 选择属于其父元素首 <p> 元素每 <p> 元素 :last-of-type p:last-of-type 选择属于其父元素 <p> 元素每 <p> 元素:only-of-type p:only-of-type 选择属于其父元素唯 <p> 元素每 <p> 元素:only-child p:only-child 选择属于其父元素唯元素每 <p> 元

CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?

1.CSS选择符有哪些? 类型选择符(body).群组选择符(h1,h2,h3,span).包含选择符(h2 span).ID选择符(#id).Class选择符(.content) 2.哪些属性可以继承? CLASS属性,伪类A标签,列表ul.li.dl.dd.dt可以继承 3.优先级算法如何计算? 优先级就近原则 版权声明:本文为博主原创文章,未经博主允许不得转载.

HTML/CSS 选择符优先级

CSS的选择符优先级 1.同级样式默认后者覆盖前者 2.样式优先级 类型(1) < class[type](10)=伪类(10) < id(100) < style行间样式(1000) < style内部样式 < link外部引入样式 选择符的相应值综合相加起来大的优先级高 注 : 相应值仅仅是代表他们的等级, 11个类型选择符的优先级仍然小于1个类选择符,以此类推 3.important(IE7及以上) 加了important的样式属性优先级最高. 例 .box{backg

CSS选择符优先级引起的样式失效

选择符优先级带来的样式失效: 由于CSS选择符优先级可能引起某些样式失效,这个问题初学者可能会碰上,但是往往并不容易发现. 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落

[JavaScript忍者系列] — CSS选择符引擎入门

http://www.cnblogs.com/newyorker/archive/2013/02/14/2891298.html 本文的目标读者是入门级Web前端开发人员. 本文介绍了CSS选择符表达式引擎的基本原理.CSS选择符引擎几乎是前端开发人员每天在使用的工具.本文将逐一介绍实现该引擎的各种策略.首先,我们介绍基于W3C标准API的方法. W3C标准的Slectors API 能够支持的平台: Safari 3+, Firefox 3.1+, Internet Explorer 8+,

30个你必须记住的CSS选择符

30个你必须记住的CSS选择符 整理 本文摘自:http://yanhaijing.com/css/2014/01/04/the-30-css-selectors-you-must-memorize/ 04 January 2014 号外号外:专注于移动端的fullPage.js来啦!!!快点我查看 所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1