css学习心得-为样式找到应用目标
2015-04-12 00:00
225 查看
常用选择器
# 类型选择器
# 后代选择器
伪类
:link :visited 链接伪类 ,只能用于锚元素
:hover :active :focus 动态伪类,可以应用于任何元素
ps: ie6 忽略掉 :focus伪类。ie7任何元素都支持:hover,但是会忽略掉:active 和 :focus
通用选择器
*
高级选择器
子选择器和相邻同胞选择器
区别所有后代和直系后代(子元素)
#nv>li{
}
兼容性:ie7+ ,但是针对于这样的写法,如果在ie7中,html中存在注释的话,就会出现问题。
在ie6中,可以通过通用选择器模拟子选择器的效果。
做法:
相邻 元素(同一个父级下某个元素之后的元素)(只是一个元素)
PS: 同子元素选择器一样,如果html之间存在注释的话,也会存在问题的。
属性选择器
ps: ie6 不支持该写法
层叠和特殊性
可以通过!important
层叠采用以下重要度次序
标有!important 的用户样式
标有!important的作者样式
作者样式
用户样式
浏览器/用户代理应用的样式
使用类标示页面类型,使用id标示特定页面。
继承
# 类型选择器
# 后代选择器
伪类
:link :visited 链接伪类 ,只能用于锚元素
:hover :active :focus 动态伪类,可以应用于任何元素
ps: ie6 忽略掉 :focus伪类。ie7任何元素都支持:hover,但是会忽略掉:active 和 :focus
通用选择器
*
高级选择器
子选择器和相邻同胞选择器
区别所有后代和直系后代(子元素)
#nv>li{
}
兼容性:ie7+ ,但是针对于这样的写法,如果在ie7中,html中存在注释的话,就会出现问题。
在ie6中,可以通过通用选择器模拟子选择器的效果。
做法:
// 先在所有后代应用你希望子元素具有的样式。 #nav li{ background:url(pig.jpg) no-repeat left top; padding-left:20px } // 通过通用选择器覆盖子元素的后代上的样式。 #nav li *{ background-img:none; padding-left:0; }
相邻 元素(同一个父级下某个元素之后的元素)(只是一个元素)
h2 + p{ }
PS: 同子元素选择器一样,如果html之间存在注释的话,也会存在问题的。
属性选择器
a[title]{ } // 根据某个属性是否存在对元素应用样式 a[title]:hover{ cursor:pointer; } // 可以根据属性值应用样式 a[rel="nofollow"]{ }
ps: ie6 不支持该写法
// ie6 的样式效果 #header{ } // 其他样式 [id="header"]{ }
层叠和特殊性
可以通过!important
层叠采用以下重要度次序
标有!important 的用户样式
标有!important的作者样式
作者样式
用户样式
浏览器/用户代理应用的样式
使用类标示页面类型,使用id标示特定页面。
继承
相关文章推荐
- 《精通CSS高级web标准解决方案》——第一章、第二章(为样式找到应用目标)即选择器
- 《精通CSS:高级Web标准解决方案》系列(01):为样式找到应用目标
- 第2章 为样式找到应用目标
- css学习-对表单和数据表格应用样式
- CSS基础应用学习系列(4)――用CSS对列表应用样式
- css学习-对链接应用样式
- CSS叠层样式学习心得【二】
- 对列表应用样式和创建导航条--Css学习笔记(五)
- CSS叠层样式学习心得【一】
- 为样式找到应用目标-CSS选择器
- css学习-对列表应用样式和创建导航条
- 对表单和数据表格应用样式--Css学习笔记(六)
- 对链接应用样式--Css学习笔记(四)
- css中类,ID,伪类等的学习心得
- css学习的一些心得
- 通过dreamweaver学习了解应用css
- CSS层叠样式的学习[1]
- 如何走向高阶---css的学习心得
- CSS基础应用学习系列(1)——基于图像的翻转
- DHTML之CSS学习心得(1)