CSS选择器详解

kirin77 · 发表于 2022-6-27 14:35

CSS所有选择器列表

CSS选择器用于选择你想要的元素的样式的模式。下面是css所有的选择器

选择器	示例	示例说明	css版本
.class	.intro	选择所有class="intro"的元素	1
#id	#firstname	选择所有id="firstname"的元素	1
*	*	选择所有元素	2
element	p	选择所有< p >元素	1
element,element	div,p	选择所有< div >元素和< p >元素	1
element element	div p	选择< div >元素内的所有< p >元素	1
element>element	div>p	选择所有父级是 < div > 元素的 < p > 元素	2
element+element	div+p	选择所有紧接着< div >元素之后的< p >元素	2
[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素	2
[attribute丨=language]	[lang丨=en]	选择 lang 属性以 en 为开头的所有元素	2
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:active	a:active	选择活动链接	1
:hover	a:hover	选择鼠标在链接上面时	1
:focus	input:focus	选择具有焦点的输入元素	2
:first-letter	p:first-letter	选择每一个< p >元素的第一个字母	1
:first-line	p:first-line	选择每一个< p >元素的第一行	1
:first-child	p:first-child	指定只有当< p >元素是其父级的第一个子级的样式。	2
:before	p:before	在每个< p >元素之前插入内容	2
:after	p:after	在每个< p >元素之后插入内容	2
:lang(language)	p:lang(it)	选择一个lang属性的起始值="it"的所有< p >元素	2
element1~element2	p~ul	选择p元素之后的每一个ul元素	3
[attribute^ = value]	a[src^=“https”]	选择每一个src属性的值以"https"开头的元素	3
[attribute$=value]	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素	3
[attribute*=value]	a[src*=“runoob”]	选择每一个src属性的值包含子字符串"runoob"的元素	3
:first-of-type	p:first-of-type	选择每个p元素是其父级的第一个p元素	3
:last-of-type	p:last-of-type	选择每个p元素是其父级的最后一个p元素	3
:only-of-type	p:only-of-type	选择每个p元素是其父级的唯一p元素	3
:only-child	p:only-child	选择每个p元素是其父级的唯一子元素	3
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:last-child	p:last-child	选择每个p元素是其父级的最后一个子级。	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的p元素（包括文本节点）	3
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not§	选择每个并非p元素的元素	3
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分	3
:out-of-range	:out-of-range	匹配值在指定区间之外的input元素	3
:in-range	:in-range	匹配值在指定区间之内的input元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 “readonly”（只读）属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 “required” 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3

咱们一个一个来

.class 选择器

示例代码选择类为mystyle的元素将color设置为red。font设置为800

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>.mystyle{color:red;font:800;}</style></head><body><spanclass="mystyle">无所不能的林大王asp</span></body></html>

复制代码

效果实现

#id 选择器

示例代码：
选择 id为myID 的元素将color设置为coral font设置为800

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>#myID{color:coral;font:800;}</style></head><body><spanid="myID">无所不能的林大王asp</span></body></html>

复制代码

效果

* 选择器

示例
*选择所有元素背景颜色设置为aqua

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>*{background-color: aqua;}</style></head><body><span>无所不能的林大王asp</span></body></html>

复制代码

效果示例

element 选择器

示例选择所有的span元素，将background-color设置为red;

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>span{background-color: red;}</style></head><body><span>无所不能的林大王asp</span></body></html>

复制代码

效果

element,element 选择器

示例,选择所有的span元素和p元素,将background-color设置为 red;
(可以选择无限制的元素,用逗号分隔)

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>span , p{background-color: red;}</style></head><body><span>无所不能的林大王asp</span><p>afhjalskfddksaldf</p></body></html>

复制代码

效果

element element 选择器

示例
选择body元素下的所有p元素,将background-color设置为 red;

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>body p{background-color: red;}</style></head><body><span>无所不能的林大王asp</span><p>afhjalskfddksaldf</p><p>fafhaskldfs</p></body></html>

复制代码

效果

element>element 选择器

示例:
选择所有父级是 < div > 元素的 < p > 元素将background-color设置为 red;

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>div> p{background-color: red;}</style></head><body><div><p>我的父级是div</p></div><span>无所不能的林大王asp</span><p>afhjalskfddksaldf</p><p>fafhaskldfs</p></body></html>

复制代码

效果

element+element

示例
选择所有紧接着< div >元素之后的< p >元素将background-color设置为 red;

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>div+ p{background-color: red;}</style></head><body><div><p>我的父级是div</p></div><p>我跟在div后面</p><span>无所不能的林大王asp</span><p>afhjalskfddksaldf</p><p>fafhaskldfs</p></body></html>

复制代码

效果

[attribute]选择器

示例
选择所有带有align属性元素并将background-color:设置为red;

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>[align]{background-color: red;}</style></head><body><divalign="left"><p>我的父级是div</p></div><p>我跟在div后面</p><span>无所不能的林大王asp</span><p>afhjalskfddksaldf</p><p>fafhaskldfs</p></body></html>

复制代码

效果

[attribute=value]选择器

示例
选择所有使用align="left"的元素

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>[align=left]{background-color: red;}</style></head><body><divalign="left"><p>我的父级是div</p></div><p>我跟在div后面</p><span>无所不能的林大王asp</span><p>afhjalskfddksaldf</p><p>fafhaskldfs</p></body></html>

复制代码

效果

[attribute~=value] 选择器

示例
选择标题属性包含单词"flower"的所有元素并将background-color设置为 red;
注意是包含单词flower 而不是字段所以flowers是不行的

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>[title~=flower]{background-color: red;}</style></head><body><divtitle="flower"><p>我的父级是div</p></div><ptitle="flowers index">我跟在div后面</p><spantitle="flower indexs main">无所不能的林大王asp</span><ptitle="main flower">afhjalskfddksaldf</p><p>fafhaskldfs</p></body></html>

复制代码

[attribute|=language] 选择器

选择 lang 属性以 en 为开头的所有元素并将background-color设置为 red;
示例

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>[lang|=en]{background-color: red;}</style></head><body><plang="en">Hello!</p><plang="en-us">Hi!</p><plang="en-gb">无所不能的林大王!</p><plang="us">Hi!</p><plang="no">Hei!</p></body></html>

复制代码

效果

:link , :visited , :active 选择器

:link 选择所有未访问链接并将background-color设置为 red;
:visited 选择所有访问过的链接并将background-color设置为 green;
:active 选择活动链接并将background-color设置为 yellow;

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>a:link{background-color: red;}a:visited{background-color: green;}a:active{background-color: yellow;}</style></head><body><ahref="https://www.baidu.com/">百度</a><ahref="https://www.huawei.com/">华为</a><ahref="https://www.sougo.com/">搜狗</a></body></html>

复制代码

效果
华为已经访问过了

: hover 伪类

示例
选择鼠标在选中元素上面时将background-color设置为 coral;

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>#bd:hover{background-color: coral;}</style></head><body><ahref="https://www.baidu.com/"id="bd">百度</a><ahref="https://www.huawei.com/">华为</a><ahref="https://www.sougo.com/">搜狗</a></body></html>

复制代码

效果
当我将鼠标移动到百度上面时,百度背景色变为品红

:focus

选择具有焦点的输入元素并将其height设置为100px width设置为300px

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>input:focus{height: 100px;width: 300px;};</style></head><body><inputtype="text"><inputtype="text"></body></html>

复制代码

效果

:first-letter

选择每一个
元素的第一个字母,并将其 font-size:设置为100px; color:设置为red;

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>p:first-letter{font-size: 100px;color: red;}</style></head><body><p>sdakfjasldkf</p><p>ergtraesrf</p><p>afafasdf</p></body></html>

复制代码

效果

:first-line

示例
选择每一个p元素的第一行并将其color设置为red

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>p:first-line{color: red;}</style></head><body><divstyle="height: 100px ;width: 400px"><p>fffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k ewfwa</p><p>fffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k ewfwa</p><p>fffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k ewfwa</p></div></body></html>

复制代码

效果

:first-child

示例
指定只有当< p >元素是其父级的第一个子级的样式。

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>p:first-child{color: red;}</style></head><body><p>这个p元素是它父级的第一个子集</p><h1>Welcome to Beijing </h1><p>这个p元素是它父级的第三个子集</p><div><p>这个p元素是它父级的第一个子集</p><p>这个p元素是它父级的第二个子集</p></div></body></html>

复制代码

:before 选择器向选定的元素前插入内容

示例;
在每个< p >元素之前插入内容并设置样式

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>p:before{content:"我是before插入的文字-";background-color:yellow;color:red;font-weight:bold;}</style></head><body><p>德玛西亚</p><p>艾欧尼亚</p></body></html>

复制代码

效果图

:after 选择器向选定的元素之后插入内容

示例
在每个 < p >之后插入的内容和样式:

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>p:after{content:"我是after插入的文字-";background-color:yellow;color:red;font-weight:bold;}</style></head><body><p>德玛西亚</p><p>艾欧尼亚</p></body></html>

复制代码

:lang 向带有指定 lang 属性开始的元素添加样式

示例
每个< p >元素lang属性值等于"it(Italian)" 的选择的样式：

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>p:lang(it){background-color:yellow;color:red;}</style></head><body><p>德玛西亚</p><plang="it">艾欧尼亚</p></body></html>

复制代码

效果

element1~element2 选择器匹配出现在 element1 后面的 element2

示例
设置同一父元素下的 p 元素之后的每一个 ul 元素的背景颜色：

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>p~ul{content:"我是after插入的文字-";background-color:yellow;color:red;}</style></head><body><div>艾欧尼亚</div><ul><li>德玛</li><li>卢卡斯</li><li>不知好歹</li></ul><p>诺克萨斯</p><ul><li>小学生之手</li><li>伊芙琳</li><li>托儿所</li></ul><h2>暗影岛</h2><ul><li>卡瑟琳</li><li>楚雨荨</li><li>菲奥娜</li></ul></body></html>

复制代码

效果

[attribute^=value] 选择器匹配元素属性值带指定的值开始的元素

示例
设置class属性值以"all"单词开头的所有元素的背景颜色：

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>[class^="all"]{background-color:yellow;color:red;}</style></head><body><div>艾欧尼亚</div><ul><liclass="all">德玛</li><li>卢卡斯</li><li>不知好歹</li></ul><p>诺克萨斯</p><ul><li>小学生之手</li><liclass="all">伊芙琳</li><li>托儿所</li></ul><h2class="all">暗影岛</h2><ul><li>卡瑟琳</li><li>楚雨荨</li><li>菲奥娜</li></ul></body></html>

复制代码

效果

[attribute$=value] 选择器匹配元素属性值带指定的值结尾的元素

示例
设置class属性值以"test"结尾的所有div元素的背景颜色：

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>[class$="all"]{background-color:yellow;color:red;}</style></head><body><div>艾欧尼亚</div><ul><liclass="safaall">德玛</li><li>卢卡斯</li><li>不知好歹</li></ul><p>诺克萨斯</p><ul><li>小学生之手</li><liclass="all">伊芙琳</li><li>托儿所</li></ul><h2class="sfa all">暗影岛</h2><ul><li>卡瑟琳</li><li>楚雨荨</li><li>菲奥娜</li></ul></body></html>

复制代码

效果

[attribute*=value] 选择器匹配元素属性值包含指定值的元素

示例
匹配class属性里包含字符a的所有元素

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>[class*="a"]{background-color:yellow;color:red;}</style></head><body><div>艾欧尼亚</div><ul><liclass="safaall">德玛</li><liclass="fdeasf">卢卡斯</li><li>不知好歹</li></ul><pclass="fadsf">诺克萨斯</p><ul><li>小学生之手</li><liclass="all">伊芙琳</li><li>托儿所</li></ul><h2class="sfa all">暗影岛</h2><ul><li>卡瑟琳</li><li>楚雨荨</li><li>菲奥娜</li></ul></body></html>

复制代码

效果

:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素

示例
选择的 li元素是其父元素的第一个元素：

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>li:first-of-type{background-color:yellow;color:red;}</style></head><body><div>艾欧尼亚</div><ul><liclass="safaall">德玛</li><liclass="fdeasf">卢卡斯</li><li>不知好歹</li></ul><pclass="fadsf">诺克萨斯</p><ul><li>小学生之手</li><liclass="all">伊芙琳</li><li>托儿所</li></ul><h2class="sfa all">暗影岛</h2><ul><li>卡瑟琳</li><li>楚雨荨</li><li>菲奥娜</li></ul></body></html>

复制代码

:last-of-type选择器匹配元素其父级是特定类型的最后一个子元素

示例
选择的 li元素是其父元素的最后一个元素：

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>li:last-of-type{background-color:yellow;color:red;}</style></head><body><div>艾欧尼亚</div><ul><liclass="safaall">德玛</li><liclass="fdeasf">卢卡斯</li><li>不知好歹</li></ul><pclass="fadsf">诺克萨斯</p><ul><li>小学生之手</li><liclass="all">伊芙琳</li><li>托儿所</li></ul><h2class="sfa all">暗影岛</h2><ul><li>卡瑟琳</li><li>楚雨荨</li><li>菲奥娜</li></ul></body></html>

复制代码

效果

:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素

示例
指定属于父元素的特定类型的唯一子元素的每个 span 元素：：给它们添加样式

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>span:only-of-type{background-color:yellow;color:red;}</style></head><body><div>艾欧尼亚</div><ul><liclass="safaall">德玛</li><liclass="fdeasf">卢卡斯</li><li>不知好歹</li></ul><span>唯一的span元素</span><pclass="fadsf">诺克萨斯</p><ul><span>ul下的唯一的span</span><li>小学生之手</li><liclass="all">伊芙琳</li><li>托儿所</li></ul><h2class="sfa all">暗影岛</h2><ul><li>卡瑟琳</li><li>楚雨荨</li><li>菲奥娜</li></ul></body></html>

复制代码

效果

:only-child 选择器匹配属于父元素中唯一子元素的元素

示例
匹配属于父元素中唯一子元素的 li元素:

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>li:only-child{background-color:yellow;color:red;}</style></head><body><div>艾欧尼亚</div><ul><liclass="safaall">德玛</li><liclass="fdeasf">卢卡斯</li><li>不知好歹</li></ul><span>唯一的span元素</span><pclass="fadsf">诺克萨斯</p><ul><span>ul下的唯一的span</span><li>小学生之手</li><liclass="all">伊芙琳</li><li>托儿所</li></ul><h2class="sfa all">暗影岛</h2><ul><li>ul下的唯一子元素</li></ul></body></html>

复制代码

效果

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制

n 可以是一个数字，一个关键字，或者一个公式。

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>p:nth-child(odd){background:#ff0000;}p:nth-child(even){background:#0000ff;}</style></head><body><h1>1.艾欧尼亚</h1><p>2.诺克萨斯</p><p>3.恕瑞玛,尼玛的黄鸡回来了</p><p>4.哈撒给</p></body></html>

复制代码

效果

2. 示例
使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。在这里，我们对所有索引是3的倍数的p元素指定了背景颜色：

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>p:nth-child(3n+0){background:#ff0000;}</style></head><body><h1>1.艾欧尼亚</h1><p>2.诺克萨斯</p><p>3.恕瑞玛,尼玛的黄鸡回来了</p><p>4.哈撒给</p><p>5.哈撒</p><p>哦里呀嘎痛</p><p>死亡如风,常伴吾身</p><p>如果你想要杀我,希望你把你们的朋友也叫上</p><p>一点寒芒先到,而后枪出如龙</p><p>破碎的剑刃,破碎的意志</p></body></html>

复制代码

效果

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数

n可以是一个数字，一个关键字，或者一个公式。

在这里，我们为奇数和偶数的倒数p元素指定两个不同的背景颜色：

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>p:nth-last-child(odd){background:#ff0000;}p:nth-last-child(even){background:#0000ff;}</style></head><body><h1>1.艾欧尼亚</h1><p>2.诺克萨斯</p><p>3.恕瑞玛,尼玛的黄鸡回来了</p><p>4.哈撒给</p><p>5.哈撒</p><p>哦里呀嘎痛</p><p>死亡如风,常伴吾身</p><p>如果你想要杀我,希望你把你们的朋友也叫上</p><p>一点寒芒先到,而后枪出如龙</p><p>破碎的剑刃,破碎的意志</p></body></html>

复制代码

效果

在这里，我们对所有索引是3的倍数的倒数顺序的p元素指定了背景颜色：

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>p:nth-last-child(3n+0){background:#ff0000;}</style></head><body><h1>1.艾欧尼亚</h1><p>2.诺克萨斯</p><p>3.恕瑞玛,尼玛的黄鸡回来了</p><p>4.哈撒给</p><p>5.哈撒</p><p>哦里呀嘎痛</p><p>死亡如风,常伴吾身</p><p>如果你想要杀我,希望你把你们的朋友也叫上</p><p>一点寒芒先到,而后枪出如龙</p><p>破碎的剑刃,破碎的意志</p></body></html>

复制代码

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素

n可以是一个数字，一个关键字，或者一个公式。

在这里，我们为奇数和偶数p元素指定两个不同的背景颜色：

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>p:nth-of-type(odd){background:#ff0000;}p:nth-of-type(even){background:#0000ff;}</style></head><body><h1>1.艾欧尼亚</h1><p>2.诺克萨斯</p><p>3.恕瑞玛,尼玛的黄鸡回来了</p><p>4.哈撒给</p><p>5.哈撒</p><p>哦里呀嘎痛</p><p>死亡如风,常伴吾身</p><p>如果你想要杀我,希望你把你们的朋友也叫上</p><p>一点寒芒先到,而后枪出如龙</p><p>破碎的剑刃,破碎的意志</p></body></html>

复制代码

效果

2. 示例
使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。
在这里，我们对所有索引是3的倍数的p元素指定了背景颜色：

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>p:nth-of-type(3n+0){background:#ff0000;}</style></head><body><h1>1.艾欧尼亚</h1><p>2.诺克萨斯</p><p>3.恕瑞玛,尼玛的黄鸡回来了</p><p>4.哈撒给</p><p>5.哈撒</p><p>哦里呀嘎痛</p><p>死亡如风,常伴吾身</p><p>如果你想要杀我,希望你把你们的朋友也叫上</p><p>一点寒芒先到,而后枪出如龙</p><p>破碎的剑刃,破碎的意志</p></body></html>

复制代码

效果

:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素

nth-last-of-type(n)使用方法同上,不过这是从最后一个元素开始计数

:last-child选择器用来匹配父元素中最后一个子元素

示例
指定父元素中最后一个p元素的背景色：

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>p:last-child{background:yellow;}</style></head><body><h1>1.艾欧尼亚</h1><p>2.诺克萨斯</p><p>3.恕瑞玛,尼玛的黄鸡回来了</p><p>4.哈撒给</p><p>5.哈撒</p><p>哦里呀嘎痛</p><p>死亡如风,常伴吾身</p><p>如果你想要杀我,希望你把你们的朋友也叫上</p><p>一点寒芒先到,而后枪出如龙</p><p>破碎的剑刃,破碎的意志</p></body></html>

复制代码

效果

:root选择器用匹配文档的根元素

示例
设置HTML文档的背景色

<!DOCTYPE html><html><head><metacharset="utf-8"><title>无标题文档</title><style>:root{background:#ff0000;}</style></head><body><div><h1>无所不能的林大王</h1></div></body></html>

复制代码

效果

:empty选择器选择每个没有任何子级的元素（包括文本节点）

示例
指定空的p元素的背景色：

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>p:empty{width:100px;height:20px;background:#ff0000;}</style></head><body><p></p><p>德玛西亚</p><p>诺克萨斯</p></body></html>

复制代码

效果图

:target选择器可用于当前活动的target元素的样式

＃锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素
示例

<!doctype html><html><head><metacharset="utf-8"><title>无标题文档</title><style>:target{border: 2px solid #D4D4D4;background-color: #e5eecc;}</style></head><body><h1>This is a heading</h1><p><ahref="#news1">hello world</a></p><p><ahref="#news2">No</a></p><p>点击a标签他会改变下面的样式</p><pid="news1"><b>是的,</b></p><pid="news2"><b>哈哈哈</b></p></body></html>

复制代码

效果

:enabled 选择器匹配每个启用的的元素

主要用于表单元素。
示例
设置所有type="text"的启用的输入元素的背景颜色：

<!DOCTYPE html><html><head><metacharset="utf-8"><title>无标题文档</title><style>input[type="text"]:enabled{background:#ffff00;}input[type="text"]:disabled{background:#dddddd;}</style></head><body><formaction="">
艾欧尼亚: <inputtype="text"value="盖伦"/><br>
诺克萨斯: <inputtype="text"value="诺手"/><br>
暗影岛: <inputtype="text"disabled="disabled"value="被禁了"/><br></form></body></html>

复制代码

效果

:disabled 选择器匹配每个禁用的的元素

主要用于表单元素
示例
设置所有type="text"的禁用的输入元素的背景颜色：

<!DOCTYPE html><html><head><metacharset="utf-8"><title>无标题文档</title><style>input[type="text"]:enabled{background:#ffff00;}input[type="text"]:disabled{background:#dddddd;}</style></head><body><formaction="">
艾欧尼亚: <inputtype="text"value="盖伦"/><br>
诺克萨斯: <inputtype="text"value="诺手"/><br>
暗影岛: <inputtype="text"disabled="disabled"value="被禁了"/><br></form></body></html>

复制代码

效果

:checked 选择器匹配每个选中的输入元素

仅适用于单选按钮或复选框
示例
为所有选中的输入元素设置背景颜色：

<!DOCTYPE html><html><head><metacharset="utf-8"><title>无标题文档</title><style>input:checked{height: 50px;width: 50px;}</style></head><body><formaction=""><inputtype="radio"checked="checked"value="male"name="gender"/> Male<br><inputtype="radio"value="female"name="gender"/> Female<br><inputtype="checkbox"checked="checked"value="Bike"/> I have a bike<br><inputtype="checkbox"value="Car"/> I have a car
</form></body></html>

复制代码

效果

:not(selector) 选择器匹配每个元素是不是指定的元素/选择器

示例
为每个并非
元素的元素设置背景颜色：

<!DOCTYPE html><html><head><metacharset="utf-8"><title>无标题文档</title><style>p{color: #000000;}:not(p){color: #ff0000;}</style></head><body><h1>这是一个标题</h1><p>这是一个段落.</p><p>这是另一个段落.</p><div>这是div元素的一些文本。</div></body></html>

复制代码

效果

::selection选择器匹配元素中被用户选中或处于高亮状态的部分

::selection只可以应用于少数的CSS属性：color, background, cursor,和outline
示例
将选定的文本添加红色：

<html><head><styletype="text/css">::selection{color:#ff0000;}::-moz-selection{color:#ff0000;}</style></head><body><h1>尝试选择本页的一些文本</h1><p>这是一些文本.</p><div>这是div元素中的一些文本.</div><ahref="//www.baidu.cc/"target="_blank">链接百度!</a></body></html>

复制代码

效果

:out-of-range 选择器用于标签的值在指定区间之外时显示的样式

out-of-range 选择器只作用于能指定区间之外值的元素，例如 input 元素中的 min 和 max 属性
示例
输入的值在指定区间外时，设置指定样式:

<!DOCTYPE html><html><head><metacharset="utf-8"><title>无标题文档</title><style>input:out-of-range{border:2px solid red;}</style></head><body><h3> :out-of-range 选择器实例演示。</h3><inputtype="number"min="5"max="10"value="17"/><p>在input中输入一个值 (小于 5 或者大于 10), 查看样式的变化。</p></body></html>

复制代码

效果

:in-range 选择器用于标签的值在指定区间值时显示的样式

== :in-range 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性==
示例
输入的值在指定区间内时，设置指定样式:

<!DOCTYPE html><html><head><metacharset="utf-8"><title>无标题文档</title><style>input:in-range{border:2px solid yellow;}</style></head><body><h3>:in-range 选择器实例演示。</h3><inputtype="number"min="5"max="10"value="7"/><p>在input中输入一个值 (小于 5 或者大于 10), 查看样式的变化。</p></body></html>

复制代码

效果

:read-write 选择器用于匹配可读及可写的元素

目前, 在大多浏览器中, :read-write 选择器只使用于设置了input 和 textarea 元素
示例
如果 input 元素不是只读，即没有 “readonly” 属性，设置输入框样式为黄色:

<!DOCTYPE html><html><head><metacharset="utf-8"><title>无标题文档</title><style>input:read-write{background-color: yellow;color:red;}</style></head><body><h3> :read-write 选择器实例演示。</h3><p>普通的input元素:<br><inputvalue="hello"></p><p>只读的input元素:<br><inputreadonlyvalue="hello"></p><p> :read-write 选择器选取没有设置 "readonly" 属性的元素。</p></body></html>

复制代码

效果

:read-only 选择器用于选取设置了 “readonly” 属性的元素

表单元素可以设置 “readonly” 属性来定义元素只读
如果 input 元素设置了 “readonly” 属性，设置输入框样式为黄色:
示例

<!DOCTYPE html><html><head><metacharset="utf-8"><title>无标题文档</title><style>input:read-only{background-color: yellow;}</style></head><body><h3> :read-only 选择器实例演示。</h3><p>普通的input元素:<br><inputvalue="hello"></p><p>只读的input元素:<br><inputreadonlyvalue="hello"></p><p> :read-write 选择器选取没有设置 "readonly" 属性的元素。</p><p> :readonly 择器选取设置 "readonly" 属性的元素。</p></body></html>

复制代码

效果

:optional 选择器在表单元素是可选项时设置指定样式。

表单元素中如果没有特别设置 required 属性即为 optional 属性
== :optional 选择器只适用于表单元素: input, select 和 textarea==
示例
如果 input 元素没有设置 “required” 属性，设置其为黄色:

<!DOCTYPE html><html><head><metacharset="utf-8"><title>无标题文档</title><style>input:optional{background-color: yellow;}</style></head><body><h3>:optional 选择器演示实例。</h3><p>可选的 input 元素:<br><input></p><p>必填的 input 元素:<br><inputrequired></p><p> :optional 选择器用于表单中未设置"required" 属性的元素。</p></body></html>

复制代码

效果

:required 选择器在表单元素是必填项时设置指定样式。

表单元素可以使用 required 属性来设置必填项
示例
如果 input 元素设置了 “required” 属性，设置其为黄色:

<!DOCTYPE html><html><head><metacharset="utf-8"><title>无标题文档</title><style>input:required{background-color: yellow;}</style></head><body><h3>信息</h3><p>姓名<br><input></p><p>住址<br><inputrequired></p><p> :required选择器选择表单元素有“需要”属性.</p></body></html>

复制代码

效果

:valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式。

:valid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。
示例
如果 input 元素中输入的值为合法的，设置其为黄色:

<!DOCTYPE html><html><head><metacharset="utf-8"><title>无标题文档</title><style>input:valid{background-color: yellow;}</style></head><body><h3> :valid 选择器实例演示。</h3><inputtype="email"value="jiumeilove@dingtalk.com"/><p>请输入非法 e-mail 地址，查看样式变化。</p></body></html>

复制代码

效果

:invalid 选择器用于在表单元素中的值是非法时设置指定样式。

== :invalid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等==
示例
如果 input 元素中的值是非法的，设置样式为红色：

<!DOCTYPE html><html><head><metacharset="utf-8"><title>无标题文档</title><style>input:invalid{border:2px solid red;}</style></head><body><h3> :invalid 选择器实例演示。</h3><inputtype="email"value="supportEmail"/><p>请输入合法 e-mail 地址，查看样式变化。</p></body></html>

复制代码

效果

以上就是css所有的选择器了,如果以后w3c增加了,我再改

		自动登录	找回密码
密码			立即注册

CSS选择器详解

本帖子中包含更多资源