CSS各式选择器记录
目录
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> <!--Read this:Hello--> <!--"Read this:"为红色-->
<p>Welcome</p> <!--Read this:Welcome--> <!--"Read this:"为红色-->
</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> <!--背景色为黄色，字母H为红色-->
</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> <!--应用1-->
<h1>The second child of body.</h1> <!--无变化-->
<p>The third child of body.</p> <!--应用3-->
<div>
<h1>The first child of div.</h1> <!--无变化-->
<p>The second child of div.</p> <!--应用5-->
</div>
<p>The last child 2 of body.</p> <!--应用4-->
<div>
<p>The only child of div.</p> <!--应用1,2,5-->
</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> <!--符合1-->
<h1>The second child of body.</h1> <!--无变化-->
<p>The second p of body.</p> <!--符合3-->
<div>
<p>The only p of div.</p> <!--符合1,2,5-->
</div>
<p>The second p of body.</p> <!--符合4-->
<p>The last p of body.</p> <!--符合5-->
</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> <!--锚1-->
<p><a href="#news2">Jump to New content 2</a></p> <!--锚2-->
<p id="news1"><b>New content 1...</b></p> <!--点击锚1变黄，点击锚2变回原样-->
<p id="news2"><b>New content 2...</b></p> <!--点击锚2变黄，点击锚1变回原样-->
</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> <!--aquamarine-->
Last name: <input type="text" /><br> <!--aquamarine-->
Country: <input type="text" disabled="disabled" /><br> <!--yellow-->
</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" />
<!--当value值超出范围变为red，在范围内变为aquamarine-->
</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" /> <!--当输入符合email格式就是黄色否则为红色-->
</body>
</html>PS：选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。
