基本选择器
- 通用选择器(匹配所有元素)
* {
格式:* {}
}
- 元素选择器(html元素)
h1 {
格式:元素名 {}
}
- 类选择器(class类名)
.name {
格式:.类名 {}
}
- id选择器(元素id是唯一的)
#ol {
格式:#id名 {}
}
复合选择器
- 交集选择器(两个元素构成,第一个必须是元素选择器,第二个必须是类选择器或者id选择器)
span.content {
格式:元素.类名 或 元素#id名 {}
}
- 并集选择器(两个或者两个以上的任意选择器构成)
h2, p, span {
格式:选择器1, 选择器2, 选择器3 {}
}
- 后代选择器(选择器1的所有子元素)
body .content {
格式:选择器1 选择器2 选择器3 {}
}
- 子元素选择器(选择器1的直接子元素)
body > .content {
格式:选择器1 > 选择器2 {}
}
- 相邻兄弟选择器(匹配紧跟在选择器1元素后的相邻元素,且两个元素拥有共同的父元素)
.content + p {
格式:选择器1 + 选择器2 {}
}
- 通用兄弟选择器(匹配在选择器1元素后的相邻元素,且两个元素拥有共同的父元素)
.content ~ p {
格式:选择器1 ~ 选择器2 {}
}
伪元素选择器
- ::first-line选择器(匹配文本块的第一行内容)
::first-line { /*只对块级元素的第一行生效*/
格式:::first-line {}
}
p::first-line { /*指定对p元素的第一行生效*/
格式:p::first-line {}
}
- ::first-letter选择器(匹配文本块的第一个字符)
::first-letter {
格式:::first-letter {}
}
::first-letter { /*只对div元素的第一个字符生效*/
格式:div::first-letter {}
}
- ::before选择器和::after选择器(在元素的最前面或最后面插入内容)
a::before { /*在a元素的开头插入内容*/
content:插入的内容
}
a::after { /*在a元素的末尾插入内容*/
content:插入的内容
}
- ::selection选择器(匹配用户选中的部分文本)
::selection {
属性:属性值
}
伪类选择器
动态伪类选择器
- :link(链接未被访问时)
- :visited(链接被访问过时)
- :hover(鼠标悬停在链接上方时)
- :active(鼠标点下链接的那一刻)
- :focus(元素获得焦点时)
a:link { color:pink; }
UI伪类选择器
- :enabled(表单元素可用的样式)
- :disabled(表单元素禁用的样式)
- :checked(表单元素选项被选中时的样式 0.
- :required(表单必选元素的样式)
- :optiional(表单可选元素的样式)
- :default(表单默认元素的样式)
:enabled { color:red; }
- :valid(用户输入合法的样式)
- :invalid(用户输入不合法的样式)
input:valid { color:green; }
属性选择器
input[value] { /* 选择input标签中具有value属性的元素 */
color:red;
}
input[value="hello"] { /* 选择input标签中value属性值为hello的元素 */
color:red;
}
input[value^="icon"] { /* 选择input标签中value属性值以icon开头的元素 */
color:red;
}
input[value$="icon"] { /* 选择input标签中value属性值以icon结尾的元素 */
color:red;
}
input[value*="icon"] { /* 选择input标签中value属性值包含icon的元素 */
color:red;
}
结构伪类选择器
ul li:first-child { /* 匹配父元素ul中的第一个子元素li */
color:red;
}
ul li:last-child { /* 匹配父元素ul中的最后一个子元素li */
color:red;
}
ul li:nth-child(n) { /* 匹配父元素ul中的第n个子元素li */
color:red;
}
ul li:nth-child(even) { /* 匹配父元素ul中所有偶数的子元素li */
color:red;
}
ul li:nth-child(odd) { /* 匹配父元素ul中所有奇数的子元素li */
color:red;
}
ul li:nth-child(2n) { /* 匹配父元素ul中所有偶数的子元素li */
color:red;
}
ul li:nth-child(2n+1) { /* 匹配父元素ul中所有奇数的子元素li */
color:red;
}
ul li:nth-child(5n) { /* 匹配父元素ul中5倍数的子元素li */
color:red;
}
ul li:nth-child(n+5) { /* 匹配父元素ul中从第5个以后的子元素li */
color:red;
}
ul li:nth-child(-n+5) { /* 匹配父元素ul中前5个子元素li */
color:red;
}
区别:
1.nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和选择的元素匹配
2.nth-of-type 对父元素里面指定的子元素进行排序选择。先去匹配子元素,然后再根据子元素找第n个孩子
ul li:first-of-type { /* 指定类型li的第一个 */
color:red;
}
ul li:last-of-type { /* 指定类型li的最后一个 */
color:red;
}
ul li:nth-of-type { /* 指定类型li的第n个 */
color:red;
}
待更新......
1 条评论