CSS选择器介绍

基础选择器

选择器		描述
*{ }	通配符选择器	选择页面上的所有元素 *{ margin:0; padding:0; }
E{ }	元素选择器	选取文档中所有对应名称的元素。 p { color:green;}
.calss	类选择器	选取带有指定类 (class) 的元素 .box{ width:200px;}
#id	id 选择器	选择为带有指定 id 的元素设置样式 #test{ color:red; }

CSS复合选择器

选择器	描述	用法
后代选择器	选择器之间用空格分隔,可以选择作为某元素后代的元素。	.box a{color:red;}
子代选择器	只能选择作为某元素的子元素。	div>p { background-color:yellow; }
相邻选择符	选择紧跟某个元素后面的元素，用 + 符号来表示，	h1 + div {color: red;}
兄弟选择符	可以选择某一个元素同一级别的元素进行样式操作	h1 ~ol { background-color: red;}
群组选择器	将任意多个选择器分在一组。每个选择器用逗号分隔。	h1, h2, h3,.box { color:blue; }

css3属性选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att="val"]	选择具有att属性且属性值等于val的E元素
E[att^="val"]	匹配具有att属性、且值以val开头的E元素
E[att$="val"]	匹配具有att属性、且值以val结尾的E元素
E[att*="val"]	匹配具有att属性、且值中含有val的E元素

结构伪类选择器

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
Elast-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个
E:empty	选择没有任何子元素的目标元素，包括没有空白和任何文本节点
E:not(条件)	选择不满足条件的元素

nth-child(n)参数n详解

• 本质上就是选中第几个子元素
• n 可以是数字、关键字、公式
• n 如果是数字，就是选中第几个
• 常见的关键字有 even 偶数、odd 奇数
• 常见的公式如下(如果 n 是公式，则从 0 开始计算)

first-child first-child 表示选择列表中的第一个标签。

last-child last-child 表示选择列表中的最后一个标签

nth-child(3) 表示选择列表中的第 3 个标签

nth-child(2n) 这个表示选择列表中的偶数标签

nth-child(2n-1) 这个表示选择列表中的奇数标签

nth-child(n+3) 这个表示选择列表中的标签从第 3 个开始到最后。

nth-child(-n+3) 这个表示选择列表中的标签从 0 到 3，即小于 3 的标签。

nth-last-child(3) 这个表示选择列表中的倒数第 3 个标签。

nth-child与nth-of-type区别

• nth-child 选择父元素里面的第几个子元素，不管是第几个类型
• nth-of-type 选择指定类型的元素

伪元素选择器

选择符	简介
E::before	在元素内部的前面插入内容
E::after	在元素内部的后面插入内容
E::first-letter	文本的第一个单词或字（如中文、日文、韩文等）
E::first-line	文本第一行；
E::selection	可改变选中文本的样式；
E::placeholder	用于控制表单输入框占位符的外观

伪元素选择器注意事项

• before 和 after 必须有 content 属性
• before 在内容前面，after 在内容后面
• before 和 after 创建的是一个元素，但是属于行内元素
• 创建出来的元素在 Dom 中查找不到，所以称为伪元素
• 伪元素和标签选择器一样，权重为 1

目标伪类选择器(CSS3)

:target  目标伪类选择器 可用于选取当前活动的目标元素

:target {
        color: red;
        font-size: 30px;
}

伪类选择器

迭择符	描述
E:link	设置超链接a在未被访问前的样式。
E:visited	设置超链接a在其链接地址已被访问过时的样式。
E:hover	设置元素在其鼠标悬停时的样式。
E:active	设置元素在被用户激活（在鼠标点击与释放之间发生的事件〉时的样式。
E:focus	设置元素在成为输入焦点（该元素的onfocus事件发生〉时的样式。
E:checked	匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled	匹配用户界面上处于可用状态的元素E。
E:disabled	匹配用户界面上处于禁用状态的元素E。 CSS 链接的不同状态都可以以不同的方式显示。