CSS各式选择器记录

技术2022-07-11 73

element,element

element1 element2

.class1.class2

element.class

element1>element2

element1+element2

[attribute]

element[attribute]

[attribute=value]

[attribute~=value]

[attribute|=value]

[attribute^=value]

[attribute$=value]

[attribute*=value]

:before

:after

a:link

a:visited

a:active

a:hover

input:focus

:first-letter

:first-line

:first-child

:only-child

:nth-child(n)

:nth-last-child(n)

:last-child

:first-of-type

:only-of-type

:nth-of-type(n)

:nth-last-of-type(n)

:last-of-type

:empty

:target

:enabled

:disabled

:checked

:not(element)

:out-of-range

:in-range

:read-write

:read-only

:optional

:required

:valid

:invalid

element,element

几个元素具有相同的样式，用逗号分隔每个元素的名称。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> h1, p { background-color: yellow; } /*选择所有<div>元素和<p>元素 */ </style> </head> <body> <h1>Welcome</h1>  <p>Hello</p>  </body> </html>

PS：也可以是（element,.class) (.class,.class)组合

element1 element2

对element1元素中的element2元素应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div p { background-color: yellow; } /*选择<div>元素内的所有<p>元素*/ </style> </head> <body> <p>不是div中的p</p>  <div> <p>div中的p</p>  <section> <p>div中section中的p</p>  </section> </div> </body> </html>

PS：也可以是（element .class) （.class element ) (.class .class)组合 (A B)表示A中的B

.class1.class2

对同时具有class1和class2类选择器的元素应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .p1.p2 { background-color: yellow; } /*选择同时具有p1和p2类选择器的元素*/ </style> </head> <body> <p class="p1 p2">拥有p1和p2</p>  <p class="p2">拥有p2</p>  <p class="p1">拥有p1</p>  </body> </html>

element.class

对拥有该class类选择器的element元素应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> p.p2 { background-color: yellow; } /*选择所有拥有p2选择器的p元素*/ </style> </head> <body> <p class="p1 p2">拥有p1和p2</p>  <p class="p2">拥有p2</p>  <p class="p1">拥有p1</p>  </body> </html> p.p1.p2 { background-color: yellow; } /*选择所有拥有p1和p2选择器的p元素*/

element1>element2

对父级元素是element1的element2元素应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .div > p { background-color: yellow; } /*选择所有父级 class="div"的元素的 <p> 元素*/ </style> </head> <body> <p>不是div中的p</p>  <div class="div"> <p>div中的p</p>  <section> <p>div中section中的p</p>  </section> </div> </body> </html>

PS:这里的例子是 .class > element 和element element的区别就是 element > element 只表示一层继承，只作用于父与子

element1+element2

对紧接着element1之后的第一个element2元素应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div+p { background-color: yellow; } /*选择紧接着<div>元素之后第一个<p>元素*/ </style> </head> <body> <p>div之前的p</p>  <div> <p>div中的p</p>  </div> <p>div之后的第一个p</p>  <p>div之后的第二个p</p>  </body> </html>

[attribute]

对拥有attribute属性的元素应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> [title] { background-color: yellow; } /*选择所有带有该属性的元素*/ </style> </head> <body> <p>div之前的p</p>  <p title="Hello">你好</p>  </body> </html>

element[attribute]

对拥有attribute属性的element元素应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> h1[title] { background-color: yellow; } /*选择所有带有该属性的h1元素*/ </style> </head> <body> <h1>不含有title的h1</h1>  <h1 title="A">含有title的h1</h1>  <p title="Hello">你好</p>  </body> </html>

PS:也适用于 .class[attribute]

[attribute=value]

对拥有attribute属性且属性值为value的元素应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> [title="A"] { background-color: yellow; } /*选择所有title="A"元素*/ </style> </head> <body> <p title="A">title=A</p>  <p title="B">title=B</p>  </body> </html>

[attribute~=value]

对拥有attribute属性且属性值含有value这个单词的元素应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> [title~="A"] { background-color: yellow; } /*选择所有title中含有A这个单词的元素（字母不算）*/ </style> </head> <body> <p title="A">title=A</p>  <p title="AB">title=AB</p>  <p title="A B">title=A B</p>  </body> </html>

PS:必须是单词(以空格隔开的才算一个单词，区分大小写）

[attribute|=value]

对拥有attribute属性且属性值等于value或者以value-开头的元素应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> [title|="A"] { background-color: yellow; } /*选择所有title中单独一个A单词或者以A-开头的词组*/ </style> </head> <body> <p title="A">title=A</p>  <p title="AB">title=AB</p>  <p title="A B">title=A B</p>  <p title="A-">title=A-</p>  <p title="A-B">title=A-B</p>  <p title="A-BC">title=A-BC</p>  <p title="A-B C">title=A-B C</p>  </body> </html>

PS:该样式主要用于lang属性

[attribute^=value]

对拥有attribute属性且属性值是以value开头的元素应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> [title^="A"] { background-color: yellow; } /*选择所有title中以字符串A开头的元素*/ </style> </head> <body> <p title="A">title=A</p>  <p title="AB">title=AB</p>  <p title="A B">title=A B</p>  <p title="BA">title=BA</p>  </body> </html>

[attribute$=value]

对拥有attribute属性且属性值是以value结尾的元素应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> [title$="A"] { background-color: yellow; } /*选择所有title中以字符串A结尾的元素*/ </style> </head> <body> <p title="A">title=A</p>  <p title="A ">title=AB</p>  <p title="BA">title=BA</p>  </body> </html>

[attribute*=value]

对拥有attribute属性且属性值包含value的元素应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> [title*="A"] { background-color: yellow; } /*选择所有title中包含字符串A的元素*/ </style> </head> <body> <p title="A">title=A</p>  <p title="A ">title=A </p>  <p title="BA">title=BA</p>  </body> </html>

PS:[attribute~=value]表示要含有这个单词，[attribute*=value] 表示有这个字符串；[attribute*=value] 包含[attribute~=value]

:before

在元素前面加上内容，并给加上的内容应用样式

:after

在元素后面加上内容，并给加上的内容应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> p:before { content: "Read this:"; color: red; } /*在所有p元素前面加上内容，并给加上的内容设置样式*/ </style> </head> <body> <p>Hello</p>   <p>Welcome</p>   </body> </html>

PS:在元素后面加上内容（:after）;也可以应用于.class

a:link

对未访问的链接应用样式

a:visited

对访问过的链接应用样式

a:active

对活动的链接应用样式

a:hover

对鼠标在链接上面时应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> a:hover { background-color: yellow; } a:link { background-color: red; } a:visited { background-color: greenyellow; } a:active { background-color: brown; } </style> </head> <body> <a href="https://www.runoob.com/">菜鸟教程</a> <a href="https://c.runoob.com">菜鸟工具</a> <a href="https://baidu.com">baidu</a> </body> </html>

PS：hover也可以应用于其他element和.class；另外3个主要应用于链接

input:focus

一个输入字段获得焦点时选择的样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> input:focus { background-color: yellow; } </style> </head> <body> <form> First name: <input type="text" name="firstname" /><br> Last name: <input type="text" name="lastname" /> </form> </body> </html>

:first-letter

对元素的第一个字母应用样式

:first-line

对元素的第一行应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p:first-line { background-color: yellow; } P:first-letter { color: red; } </style> </head> <body> <p>Hello</p>  </body> </html>

:first-child

若是父元素的第一个元素就对其应用样式

:only-child

若是父元素的唯一元素就对其应用样式

:nth-child(n)

若是父元素的第n个元素就对其应用样式

:nth-last-child(n)

若是父元素的倒数第n个元素就对其应用样式

:last-child

若是父元素的最后一个元素就对其应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p:first-child { background-color: yellow; } /*1.若p元素是父元素的第1个子元素就应用样式*/ p:only-child { color: red } /*2.若p元素是父元素的唯1元素就应用样式*/ p:nth-child(3) { background-color:aqua; } /*3.若p元素是父元素的第3个子元素就应用样式*/ p:nth-last-child(2) { background-color:brown; } /*4.若p元素是父元素的倒数第2个子元素就应用样式*/ p:last-child { background-color:coral; } /*5.若p元素是父元素的最后1个元素就应用样式*/ </style> </head> <body> <p>The first child of body.</p>  <h1>The second child of body.</h1>  <p>The third child of body.</p>  <div> <h1>The first child of div.</h1>  <p>The second child of div.</p>  </div> <p>The last child 2 of body.</p>  <div> <p>The only child of div.</p>  </div> </body> </html>

PS：也可以对类选择器使用 .class:first-child

:first-of-type

若是父元素的第一个该元素就对其应用样式

:only-of-type

若是父元素的唯一一个该元素就对其应用样式

:nth-of-type(n)

若是父元素的第n个该元素就对其应用样式

:nth-last-of-type(n)

若是父元素的倒数第n个该元素就对其应用样式

:last-of-type

若是父元素的最后一个该元素就对其应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p:first-of-type { background-color: yellow; } /*1.若p元素是父元素的第1个p元素就应用样式*/ p:only-of-type{ color: red } /*2.若p元素是父元素的唯1的p元素就应用样式*/ p:nth-of-type(2){ background-color:aqua; } /*3.若p元素是父元素的第2个p元素就应用样式*/ p:nth-last-of-type(2) { background-color: brown; } /*4.若p元素是父元素的倒数第2个p元素就应用样式*/ p:last-of-type { background-color: coral; } /*5.若p元素是父元素的最后1个p元素就应用样式*/ </style> </head> <body> <p>The first p of body.</p>  <h1>The second child of body.</h1>  <p>The second p of body.</p>  <div> <p>The only p of div.</p>  </div> <p>The second p of body.</p>  <p>The last p of body.</p>  </body> </html>

PS：first-child是针对所有子元素，而first-of-type是针对某一种子元素

:empty

对空的元素应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p:empty { width: 100px; height: 20px; background-color: yellow; } </style> </head> <body> <p></p>  <div> <p></p>  </div> <p>A paragraph.</p> </body> </html>

PS：可以对类选择器使用 .class:empty；也可以直接用 :empty，对所有元素应用

:target

选择当前活动的元素（包含该锚名称的点击的URL）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p:target { border: 2px solid #D4D4D4; background-color: yellow; } </style> </head> <body> <p><a href="#news1">Jump to New content 1</a></p>  <p><a href="#news2">Jump to New content 2</a></p>  <p id="news1"><b>New content 1...</b></p>  <p id="news2"><b>New content 2...</b></p>  </body> </html>

PS：可以对类选择器使用 .class:target ；也可以直接用 :target，对所有锚应用

:enabled

对启用中的元素应用样式

:disabled

对就用中的元素应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> input[type="text"]:enabled { background-color: aquamarine } input[type="text"]:disabled { background-color: yellow; } </style> </head> <body> <form action=""> First name: <input type="text" /><br>  Last name: <input type="text" /><br>  Country: <input type="text" disabled="disabled" /><br>  </form> </body> </html>

PS：也可以对类选择器应用；也可以对所有元素应用。（主要用于表单元素）

:checked

对每个选中的元素应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> input:checked { height: 20px;width: 20px; } input[type="checkbox"]:checked { height: 40px;width: 40px; } </style> </head> <body> <form action=""> <input type="radio" checked="checked" value="male" name="gender" /> Male<br> <input type="radio" value="female" name="gender" /> Female<br> <input type="checkbox" checked="checked" value="Bike" /> I have a bike<br> <input type="checkbox" value="Car" /> I have a car </form> </body> </html>

PS：也可以对类选择器应用；也可以对所有元素应用。（仅适用于单选按钮或复选框）

:not(element)

对非element元素应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p { color: blue; } /*对p元素应用该样式*/ :not(p) { color: red; } /*对非p元素应用该样式*/ </style> </head> <body> <h1>这是一个标题</h1>  <p>这是一个段落.</p>  <p>这是另一个段落.</p>  <div>这是div元素</div>  </body> </html>

PS：也可以对类选择器应用 :not(.class)；也可以对元素的类选择器 element:not(.class)

:out-of-range

当元素的值超出范围就应用样式

:in-range

当元素的值在范围内就应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> input:out-of-range { background-color: red; } input:in-range { background-color: aquamarine; } </style> </head> <body> <input type="number" min="5" max="10" value="17" />  </body> </html>

:read-write

当元素是可读写时就应用样式

:read-only

当元素是只读的就应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> input:read-write { background-color: yellow; } input:read-only { background-color: red; } </style> </head> <body> <p>普通的input元素:<br><input value="hello"></p>  <p>只读的input元素:<br><input readonly value="hello"></p>  </body> </html>

PS：是否可读写，就看元素是否有 readonly属性，若有就为只读（只适用于 input 和 textarea 元素）

:optional

在表单元素是可选项时应用样式

:required

在表单元素是必填项时应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> input:optional { background-color: yellow; } input:required{ background-color: red; } </style> </head> <body> <p>可选的input元素:<br><input value="hello"></p>  <p>必填的input元素:<br><input required value="hello"></p>  </body> </html>

PS：是否可选，就看元素是否有 required 属性，若有就为必填（只适用于表单元素: input, select 和 textarea）

:valid

验证元素符合设定条件或格式就应用样式

:invalid

验证元素不符合设定条件或格式就应用样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> input:valid { background-color: yellow; } input:invalid { background-color: red; } </style> </head> <body> <input type="email" value="support@exampel.com" />  </body> </html>

PS：选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。

Processed: 0.012, SQL: 12