最近学习发现忘记了许多关于选择器的使用,于是复习了一波,现在将内容做了以下整理
关于选择器大概可以分为以下几类:
标签选择器、类选择器、ID选择器、普遍选择器、层次选择器、多选择器、属性选择器、伪类选择器、伪元素选择器 。具体如下:
标签选择器
标签选择器又叫元素选择器,换句话说,文档的元素就是最基本的选择器,使用元素
名称直接选中元素即可
例如:
<style>
p{
height:100px;
border:1px solid red;
}
</style>
类选择器(
Class selectors
)
类选择器以点
"."
开头,后面紧跟一个类名。类名不允许有空格,与元素中
class
属性的
值保持一致。一个元素可以有多个
class
的值,每个值通过空格分割开。类名相同的元素
属于一类元素。
例如:
<style>
.first{font-weight: bold;}
.done {text-decoration: line-through;}
</style>
ID
选择器(
ID selectors
)
ID
选择器以
"#"
开头,后面紧跟一个
ID
名,在一个文档中,
ID
值不能重复,因此在选
择文档中唯一元素的时候该选择器比较有用。
例如:
<style>
#polite { font-family: cursive;}
#rude { font-family: monospace;text-transform: uppercase;}
</style>
普遍选择器(
Universal selector
)
使用
"*”
来表示普遍选择器,表示选择所有元素,通常用在组合选择器中。
例如:
<style>
.left-nav>* { width:200px; background-color:#fafafa}
</style>
选择器-层次选择器
1.后代选择器( descendant selector )
l
使用
“ ”
隔开两个选择器。例如
“ul li”
表示选择
ul
的后代元素
li
,
li
可以为
ul
的直接子元
素,也可以为
ul
的孙子元素。
2.子代选择器(child selector)
l
使用
“>”
隔开两个选择器。例如
“ul>li”
表示选择
ul
的直接子代元素
li,ul
的孙子元素
li
无
法被选择到。
3.相邻同胞选择器(adjacent sibling selector) 下一个兄弟元素
l
使用
“+”
隔开两个选择器。例如
".one+*"
表示选择
class
为
"one"
元素的下一个兄弟元
素。
4.一般同胞选择器( general sibling selector) 之后所有的兄弟元素
l
使用
“~”
隔开两个选择器。例如
".one~*"
表示选择
class
为
"one"
元素之后的所有兄弟
元素。
选择器-多选择器
1.组合选择器
l
多个选择器组合使用,使用
“,”
分割。
l
例如
"div,.one,#tt"
表示选择
div
元素,
class
为
one
的元素以及
id
为
tt
的元素
2.嵌套选择器
l
多个选择器嵌套使用。例如
"div.one"
表示
class
为
one
的
div
元素。
选择器-属性选择器
[attr] 选择具有attr属性的元素、无论该属性的值是什么
l [attr=val] 选择具有attr属性的、并且attr的值为val元素
l [attr^=val] 选择具有attr属性的、并且attr的值以val开头的元素
l [attr$=val] 选择具有attr属性的、并且attr的值以val结尾的元素
l [attr*=val] 选择具有attr属性的、并且attr的值包含val的元素
l [attr~=val] 选择具有attr属性的、并且attr的值之一为val的元素
选择器-伪类选择器
伪类以
":"
开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中。
1.子代元素相关的伪类选择器
l:only-child
选中独生子元素
l:first-child
选中作为别人第一个孩子的元素
l:last-child
选中作为别人最后一个孩子的元素
l:nth-child(n)
选中作为别人第几个孩子元素的元素
l:nth-last-child(n)
选中作为别人倒数第几个孩子的元素
l:first-of-type
选中作为别人每种类型中的第一个孩子的元素
l:last-of-type
选中作为别人每种类型中的最后一个孩子的元素
l:nth-of-type(n) 选中作为别人每种类型中的第几个孩子的元素
l:nth-last-of-type(n)
选中作为别人每种类型中的倒数第几个孩子的元素
ü 上面的n可以为元素的序号,也可以为特殊的字符,比如odd,even,n从1开始
2.元素状态相关伪类选择器
l :link
未被访问的状态,a标签
l :visited
已访问过的状态,a标签
l :hover
鼠标悬停的状态,a标签,其他标签也可用
l :active
活动的状态, a标签,其他标签也可用
l :focus
聚焦的状态
l :checked
用户选中的单选按钮和复选按钮
l :default
默认选中的单选按钮和复选按钮
l :enabled、 :disabled 可用的表单控件、禁用的表单控件
l :valid 、:invalid
通过验证的、不通过验证的
l :required、:optional 必填的和选填的
l :in-range 、:out-of-range
在范围内的、在范围外的
选择器-伪元素选择器
伪元素以
"::"
开头,用在选择器后,用于选择指定的元素
::after 选中之后的不存在的节点,可配合content属性进行内容填充
l ::before
选中之前的不存在的节点,可配合content属性进行内容填充
l ::first-letter 选中第一个文本字符
l ::first-line
选中第一行文本
l ::selection 选中用户在选择的时候的文本