|
|
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>
示例;
在每个< 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 可以是一个数字，一个关键字，或者一个公式。
示例
奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是1）。 在这里，我们为奇数和偶数p元素指定两个不同的背景颜色：
- <!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>
示例
使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。
在这里，我们对所有索引是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可以是一个数字，一个关键字，或者一个公式。
示例
奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是1）。
在这里，我们为奇数和偶数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增加了,我再改 |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？立即注册
×
|
窥视卡
雷达卡
发表于 2022-6-27 14:35
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡