-
#class
id选择器 选择带有指定id的元素
- 不能以数字开头
- 不能包含特殊字符(&、@、#、$等)
- 一个id属性只能在文档中使用一次!仅一次!
-
.class
class选择器 选择带有指定类(class)的元素
- 最好不要以数字开头,以免在某些浏览器中出现问题
-
*
通配选择器 选中所有元素
两种用法:
- 选择器选取所有元素
- 选择器选择某个元素下的所有元素。例:选择div下的所有元素
div * {
}
-
element
标签选择器 选择指定标签的元素
-
element, element
分组选择器 用于同时选取多个元素
-
element element
后代选择器(descendant selector),又称包含选择器
div p{ /*匹配div下的p*/ /*匹配祖先元素是div的p*/ }
-
element > element
div>p{ /*选择父元素为div的p*/ /*直接子元素*/ }
-
element + element
相邻兄弟选择器
div+p{ /*选择div后的p*/ /*兄弟关系*/ }
-
[attribute]
属性选择器
a[target]{ /*匹配带有target属性的a标签*/ }
-
[attribute=value]
特定
属性选择器
a[target=_blank]{ /*匹配target="_blank"的a标签*/ }
-
[attribute~=value]
包含
[title~=flower]{ /*匹配title属性中包含"flower"的标签*/ }
-
[attribute|=value]
开头
[lang~=zh]{ /*匹配lang属性以"zh"开头的标签*/ }
和
^
的区别:
|
必须是以value值开头,同时后面必须是中划线”-“,绝对不能是下划线”_“,要不就识别不出来 -
:link
普通的、未被访问的链接
-
:visited
用户已访问的链接
-
:active
链接被点击的时刻
-
:hover
鼠标指针位于链接的上方
#####注意事项:
当为链接的不同状态设置样式时,请按照以下次序规则:
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
-
:focus
选择获得焦点的输入字段
-
:first-letter
用于选取指定选择器的首字母
-
:first-line
用于选取指定选择器的首行
-
:first-child
用于选取属于其父元素的首个子元素的指定选择器
-
:before
在被选元素的内容前面插入内容
用 content 属性来指定要插入的内容
-
:after
在被选元素的内容后面插入内容
after伪类清除浮动
:after { content: " "; display: block; height: 0; clear: both; }
-
:lang
-
element1~element2
element1 之后出现的所有 element2。
两种元素必须拥有相同的父元素,但是 element2 不必直接紧随 element1。
-
[attribute^=value]
开头
-
[attribute$=value]
匹配属性值以指定值结尾
的每个元素
-
[attribute*=value]
匹配属性值包含
指定值的每个元素
-
:first-of-type
匹配属于其父元素的特定类型的首个子元素的每个元素
等同于 :nth-of-type(1)
-
:last-of-type
匹配属于其父元素的特定类型的最后一个子元素的每个元素
等同于 :nth-last-of-type(1)
-
:only-of-type
匹配属于其父元素的特定类型的唯一子元素的每个元素
-
:only-child
匹配属于其父元素的唯一子元素的每个元素
-
:nth-child()
匹配属于其父元素的第 N 个子元素,不论元素的类型。
n 可以是数字、关键词或公式。
-
:nth-last-child()
匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。
n 可以是数字、关键词或公式。
-
:nth-of-type()
匹配属于父元素的特定类型的第 N 个子元素的每个元素。
n 可以是数字、关键词或公式。
-
:nth-last-of-type()
匹配属于父元素的特定类型的第 N 个子元素的每个元素,从最后一个子元素开始计数。
n 可以是数字、关键词或公式。
-
:last-child
匹配属于其父元素的最后一个子元素的每个元素
-
:root
匹配文档根元素。
在 HTML 中,根元素始终是 html 元素。
-
:empty
匹配没有子元素(包括文本节点)的每个元素
-
:target
URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。
-
:enabled
匹配每个已启用的元素(大多用在表单元素上)
-
:checked
匹配每个已被选中的 input 元素(只用于单选按钮和复选框)
-
:not
匹配非指定元素/选择器的每个元素
-
::selection
匹配被用户选取的选取是部分