CSS3选择器
2015-09-06 23:14
651 查看
## css3新增选择器 ##
一. 字符串匹配属性选择器
E[att^="val"] ie6不兼容(^表示以这个值开头的元素)
E[att$="val"] ie6不兼容($表示以这个值结尾的元素)
E[att*="val"] 表示这个值包含的字符串
E[att="val"] 表示属性直接等于这个值
二. 结构性伪类选择器
(1)匹配父级元素的第N个(要使这个属性生效,p对象必须是某个对象的子元素)(ie6.7.8 Firefox2.0 3.0不兼容)
语法:P:nth-child{color:#000000}
(2)匹配父级元素中的倒数第N个元素
语法:P:last-child(n){color:#000000};(n表示倒数的第几个)
(3)匹配同级同类中的第N个元素
语法:p:nth-of-type{};(其他元素会无视)
(4)匹配同级同类元素中的倒数第N个元素
语法:P:last-of-type{}
(5)匹配父元素中的最后一个元素
语法:P:last-child{color:#000000};
(6)匹配同级元素中的第一个元素
语法:P:first-of-type{}
(7)匹配父级元素中的唯一一个元素
语法:P:only-child{};
(8)匹配同类型院中的兄弟元素
语法:P:only-of-type{};(对其他元素无影响,声明的P元素中能有一个匹配,没有任何子元素的元素)
三. UI元素状态伪类选择器
四. 否定伪类选择器/过滤选择器
五. 目标伪类选择器
六. 通用兄弟选择器
一. 字符串匹配属性选择器
E[att^="val"] ie6不兼容(^表示以这个值开头的元素)
E[att$="val"] ie6不兼容($表示以这个值结尾的元素)
E[att*="val"] 表示这个值包含的字符串
E[att="val"] 表示属性直接等于这个值
二. 结构性伪类选择器
(1)匹配父级元素的第N个(要使这个属性生效,p对象必须是某个对象的子元素)(ie6.7.8 Firefox2.0 3.0不兼容)
语法:P:nth-child{color:#000000}
(2)匹配父级元素中的倒数第N个元素
语法:P:last-child(n){color:#000000};(n表示倒数的第几个)
(3)匹配同级同类中的第N个元素
语法:p:nth-of-type{};(其他元素会无视)
(4)匹配同级同类元素中的倒数第N个元素
语法:P:last-of-type{}
(5)匹配父元素中的最后一个元素
语法:P:last-child{color:#000000};
(6)匹配同级元素中的第一个元素
语法:P:first-of-type{}
(7)匹配父级元素中的唯一一个元素
语法:P:only-child{};
(8)匹配同类型院中的兄弟元素
语法:P:only-of-type{};(对其他元素无影响,声明的P元素中能有一个匹配,没有任何子元素的元素)
三. UI元素状态伪类选择器
四. 否定伪类选择器/过滤选择器
五. 目标伪类选择器
六. 通用兄弟选择器
相关文章推荐
- CSS3的布局学习
- CSS3的布局学习
- CSS3弹性盒模型
- HTML+CSS入门
- css中背景 字体 文体属性练习
- css制作三角形,下拉框三角形
- [持续更新]CSS3学习笔记(一)伪类选择器&自定义字体&背景图片
- 关于CSS浮动与绝对定位的个人感悟,看完这篇文章能得到很多相关问题的解释
- CSS,给我们不一样的体验
- CSS3:3D转换
- CSS从图标集里截取某一图标
- 浅谈css中的position
- 使用CSS3配合IE滤镜实现渐变和投影的效果
- 举例详解CSS中position属性的使用
- 如何配置一个软件系统的总体样式(用qss文件)
- css 多个不定数量提交按钮居中显示,纯css解决
- POI实战-java开发excel详解之样式
- checkbox大小调整 样式设置
- css中table tr:nth-child(even)改变tr背景颜色: IE7,8无效
- @media css样式