CSS选择器总结
2016-03-12 23:16
555 查看
选择器 优先级 实例
ID选择器 100
类选择器 10
伪类选择器 10 :link :visited :focus :hover :actived :lang
UI元素状态伪类 E:enabled{}匹配所有用户界面(form表单)中处于可用状态的E元素
E:disabled{}匹配所有用户界面(form表单)中处于不可用状态的E元素
E:checked{}匹配所有用户界面(form表单)中处于选中状态的E元素
结构性伪类 E:first-child{}匹配父元素中第一个E元素
E:last-child{}匹配父元素中最后一个E元素
E:nth-child(n){}匹配第n个子元素E
E:nth-last-child(n){}匹配倒数第n个结构子元素E
E:nth-of-type(n){}匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n){}匹配同类型中的倒数第n个同级兄弟元素E
E:first-of-type{}匹配同级兄弟元素中的第一个E元素
E:only-child{}匹配属于父元素中唯一子元素的E
E:only-of-type{}匹配属于同类型中唯一兄弟元素的E
E:root{} 不常用 匹配文档的根元素。在HTML中,根元素永远是HTML
E:empty{} 不常用 匹配没有任何子元素(包括text节点)的元素E
否定伪类 p:not(s){}匹配所有不匹配简单选择符s的元素p
目标伪类 不常用
属性选择器 10
简单属性选择器 h1[foo]{color:red;}
具体属性值选择器 h1[foo="sun"]{color:red;} 选择foo属性值是sun的所有h1元素
子串匹配属性选择器 h1[foo*="sun"]{color:red;} 选择foo属性值中包含sun的所有h1元素
h1[foo^="sun"]{color:red;} 选择foo属性值以sun开头的所有h1元素
h1[foo$="sun"]{color:red;} 选择foo属性值以sun结尾的所有h1元素
元素选择器 1
子元素选择器 h1 > span{color:red;}
相邻兄弟元素选择器 h1 + h1{font-size:20px;}
伪元素选择器 1 p::first-letter{}设置段落p的首字母样式
p::first-line{} 设置段落p的首行样式
p::before{} p::after{}
p::selection{}设置被用户选取部分的样式
ID选择器 100
类选择器 10
伪类选择器 10 :link :visited :focus :hover :actived :lang
UI元素状态伪类 E:enabled{}匹配所有用户界面(form表单)中处于可用状态的E元素
E:disabled{}匹配所有用户界面(form表单)中处于不可用状态的E元素
E:checked{}匹配所有用户界面(form表单)中处于选中状态的E元素
结构性伪类 E:first-child{}匹配父元素中第一个E元素
E:last-child{}匹配父元素中最后一个E元素
E:nth-child(n){}匹配第n个子元素E
E:nth-last-child(n){}匹配倒数第n个结构子元素E
E:nth-of-type(n){}匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n){}匹配同类型中的倒数第n个同级兄弟元素E
E:first-of-type{}匹配同级兄弟元素中的第一个E元素
E:only-child{}匹配属于父元素中唯一子元素的E
E:only-of-type{}匹配属于同类型中唯一兄弟元素的E
E:root{} 不常用 匹配文档的根元素。在HTML中,根元素永远是HTML
E:empty{} 不常用 匹配没有任何子元素(包括text节点)的元素E
否定伪类 p:not(s){}匹配所有不匹配简单选择符s的元素p
目标伪类 不常用
属性选择器 10
简单属性选择器 h1[foo]{color:red;}
具体属性值选择器 h1[foo="sun"]{color:red;} 选择foo属性值是sun的所有h1元素
子串匹配属性选择器 h1[foo*="sun"]{color:red;} 选择foo属性值中包含sun的所有h1元素
h1[foo^="sun"]{color:red;} 选择foo属性值以sun开头的所有h1元素
h1[foo$="sun"]{color:red;} 选择foo属性值以sun结尾的所有h1元素
元素选择器 1
子元素选择器 h1 > span{color:red;}
相邻兄弟元素选择器 h1 + h1{font-size:20px;}
伪元素选择器 1 p::first-letter{}设置段落p的首字母样式
p::first-line{} 设置段落p的首行样式
p::before{} p::after{}
p::selection{}设置被用户选取部分的样式
相关文章推荐
- CSS学习(十三)-文本换行符技巧
- CSS3 Background-clip
- CSS如何实现”右部宽度固定,左部自适应“的布局
- a标签的四个css伪类(link、visited、hover、active)样式理解
- css3:animation
- CSS 下拉菜单
- 获取样式
- CSS3实现图形曲线阴形和翘边阴影
- CSS布局一
- 【牛腩】HTML+CSS基础了解
- CSS——relative
- CSS居中问题终极解决方案
- CSS——隐性改变display类型
- CSS--浏览器CSS Hack 收集
- CSS--填坑常用代码分享
- css中的display
- css中的content的使用
- 多个块标签float:left之后水平居中解决办法
- HTML, CSS学习笔记(完整版)
- [DIV/CSS] CSS3的content属性详解