四、伪类选择器
1、动态伪类选择器
动态伪类选择器会根据条件的改变来匹配元素
-
:link、:visted、:hover、:active
这四个动态伪类选择器一般用在a元素上，分别对应a元素的链接的四个状态：
- :link：对应链接未被访问的时候
- :visted：对应链接被访问的时候
- :hover：对应当鼠标悬停在链接上方的时候
- :active：对应当鼠标按下链接的那一刻
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> a:link{ color: black; } a:visited{ color: red; } a:hover{ color: yellow; } a:active{ color: green; } </style> </head> <body> <a href="https://www.baidu.com/s?ie=UTF-8&wd=dsfsdfdddsdsdfsfefsefe1" target="_blank">点这里</a> </body> </html>这里注意下，a标签里的网页链接必须是之前没有打开过的，只要打开过的话，那么:link的效果就没有了。另外这四个样式是有先后顺序的要求的，hover必须在link和visited的后面，active必须在hover的后面。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> a:link{ color: black; } a:visited{ color: red; } a:hover{ color: yellow; } a:active{ color: green; } </style> </head> <body> <a href="https://www.baidu.com/s?ie=UTF-8&wd=dsfsdfdddsdsdfsfefsefe12" target="_blank">点这里</a> <a href="https://www.baidu.com" target="_blank">点这里</a> </body> </html>另外这四个选择器也可以用在别的元素上，比如：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div:hover{ color:green; } </style> </head> <body> <div>啦啦啦啦啦啦啦</div> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div:active{ background-color:green; } </style> </head> <body> <div>啦啦啦啦啦啦啦</div> </body> </html> -
:focus伪类选择器
就是当元素获得焦点的时候被选中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> input:focus{ background-color: green; } </style> </head> <body> <label>请输入：</label> <input type="text"> </body> </html>
2、UI伪类选择器（User Interface Pseudo-class Selectors)
主要用在用户和系统进行交互的界面，也就是表单元素。
-
:enabled和:disabled
设置一些框的可用和禁用属性所对应的css样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> :enabled{ outline: 10px solid green; } :disabled{ outline: 10px solid red; } </style> </head> <body> 可用：<input type="text" > <br><br><br><br> 禁用：<input type="text" disabled> </body> </html> -
:checked
适用于单选框，复选框和下拉列表中的选项，来设置选项被选中时的样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> :checked{ height: 50px; 50px; } </style> </head> <body> <input type="radio" name="sex" >male<br> <input type="radio" name="sex">female<br> <input type="checkbox">apple<br> <input type="checkbox">lalala<br> <input type="checkbox">sfsdfs<br> </body> </html> -
:required和:optional
适用于必选和可选的元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> :required{ background-color: red; color:red; } :optional{ background-color: green; color:green; } </style> </head> <body> <input type="text" required><br> <input type="text" ><br> </html>
4、:default
会选中默认的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
:default{
outline: 3px solid red;
}
</style>
</head>
<body>
<form>
<input type="text"><br><br>
<button type="submit">提交</button>
</form>
</html>
5、:valid和:invalid
:valid设置合法时的样式，:invalid设置不合法时的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
input:valid{
border: 8px solid green;
}
input:invalid{
border: 8px solid red;
}
</style>
</head>
<body>
<form>
<input type="email"><br><br>
<button type="submit">提交</button>
</form>
</html>
6、in-range和out-of-range
当input元素的type属性设置为number的时候，可以另外指定min和max属性来设置数值的范围，in-range用于设置符合范围时的样式，out-of-range用于设置超出范围时的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
input:in-range{
border: 2px solid green;
}
input:out-of-range{
border: 2px solid red;
}
</style>
</head>
<body>
<form>
<input type="number" min="0" max="9" value="5">
</form>
</html>
7、read-only和read-write
read-only选择器设置可读时的样式，read-write选择器设置可读可写时的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
input:read-write{
background-color: green;
}
input:read-only{
background-color: red;
}
</style>
</head>
<body>
<form>
<input type="text">
<br>
<input type="text" readonly>
</form>
</html>
如果使用火狐浏览器，在样式前需加上-moz，例如-moz-read-only
3、结构伪类选择器
-
:root
根元素选择器，用于设置根元素的样式，在html中，根元素始终是html元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> :root{ background-color: red; } </style> </head> <body> <p>hello world!</p> </body> </html> -
:empty
匹配没有定义任何内容的元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> :empty{ 100px; height: 20px; background-color: red; } </style> </head> <body> <p></p> <p>hello world!</p> <p></p> </body> </html> -
first-child和last-child
first-child用于匹配父元素下的第一个子元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p:first-child{ background-color: red; } </style> </head> <body> <p>sdjfiosd</p> <p>hello world!</p> <p>sfsdfsdfsdf</p> </body> </html>last-child用于匹配父元素下的最后一个子元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p:last-child{ background-color: red; } </style> </head> <body> <p>sdjfiosd</p> <p>hello world!</p> <p>sfsdfsdfsdf</p> </body> </html>注意，这里如果用vscode的话，最后一行的p是不会被渲染的，因为vscode会在最后自动加上一个 script标签，那么p元素的父元素body的最后一个子元素就是script了，所以最后一行p不会被渲染，但是如果在本地打开这个网页的话是可以看到最后一行被渲染了的。
-
only-child
如果该元素是其父元素的唯一子元素，那么这个选择器会选中这个元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> span:only-child{ background-color: red; } </style> </head> <body> <p> <span>good morning</span> </p> </body> </html> -
only-of-type
该选择器匹配的是属于父元素下唯一类型的子元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p:only-of-type{ background-color: red; } </style> </head> <body> <p>hello</p> </body> </html> -
first-of-type
匹配父元素下相同类型的子元素中的第一个
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p:first-of-type{ background-color: red; } </style> </head> <body> <div>who are you</div> <p>hello</p> <p>i am fine</p> <p>thank you</p> </body> </html> -
last-of-type
匹配父元素下相同类型子元素中的最后一个
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p:last-of-type{ background-color: red; } </style> </head> <body> <p>thank you </p> <p>are you ok?</p> <div>i am coming</div> </body> </html> -
:nth-child(n)
:nth-child(n):选中某个元素，该元素必须是某个父元素下的第n个子元素。
p:nth-child(n):选中p元素，且该p元素必须是某个父元素下的第n个子元素
n从1开始
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p:nth-child(2){ background-color: red; } </style> </head> <body> <p>thank you </p> <p>are you ok?</p> <div>i am coming</div> </body> </html> -
:nth-last-child(n)
:nth-last-child:选中某个元素，该元素必须是某个父元素下的倒数第n个子元素
p:nth-last-child:选中p元素，且该p元素必须是某个父元素下的倒数第n个子元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p:nth-last-child(3){ background-color: red; } </style> </head> <body> <p>thank you </p> <p>are you ok?</p> <p>thank you </p> <p>are you ok?</p> <p>thank you </p> <p>are you ok?</p> <p>thank you </p> <p>are you ok?</p> </body> </html> -
:nth-of-type(n)
匹配属于父元素的指定类型的第n个子元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p:nth-of-type(3){ background-color: red; } </style> </head> <body> <div>我是第一个</div> <p>thank you </p> <p>are you ok?</p> <p>thank you </p> </body> </html> -
:nth-last-of-type(n)
匹配属于父元素的指定类型的倒数第n个元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p:nth-last-of-type(3){ background-color: red; } </style> </head> <body> <div>我是第一个</div> <p>thank you </p> <p>are you ok?</p> <p>thank you </p> <div>我是最后一个</div> </body> </html>
4、其他伪类选择器
-
:target用于为页面内锚点来设置样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> :target{ border: 2px solid red; } </style> </head> <body> <p id="hello">thank you </p> <p>1</p> <p>2 </p> <p>3</p> <p>4</p> <p>5 </p> <p>thank you </p> <p>are you ok?</p> <p>thank you </p> <p>thank you </p> <p>are you ok?</p> <p>thank you </p> <p>thank you </p> <p>are you ok?</p> <p>thank you </p> <p>thank you </p> <p>are you ok?</p> <p>thank you </p> <p>thank you </p> <p>are you ok?</p> <p>thank you </p> <a href="#hello">跳转到开头</a> </body> </html> -
:lang
用于选取带有以指定值开头的lang属性的元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> :lang(zh){ background-color: red; } :lang(en){ background-color: green; } </style> </head> <body> <p lang="zh">黑暗之魂</p> <p lang="en">Dark Souls</p> </body> </html> -
:not()
对任意选择器进行取反操作。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p{ background-color: red; } :not(p){ background-color: yellow; } </style> </head> <body> <p>黑暗之魂</p> <p>Dark Souls</p> </body> </html>
如何区分伪类选择器和伪元素选择器？
答：
css引入伪类和伪元素的概念是为了格式化文档树以外的信息
伪类用于当已有元素处于某个状态时，为其添加样式。
伪元素用于创建一些不在文档树的元素，为其添加样式。
五、属性选择器
[attr] :匹配定义了attr属性的元素，不需要考虑属性值
[attr="val"] :匹配定义了attr属性，且属性值为"val"字符串的元素
[attr^="val"] : 匹配定义了attr属性，且属性值以”val“字符串开头的元素
[attr$="val"] :匹配定义了attr属性，且属性值以”val“字符串结尾的元素
[attr*="val"] : 匹配定义了attr属性，且属性值包含“val”字符串的元素
[attr~="val"] :匹配定义了attr属性，且属性值为“val”字符串的元素（如有多个属性值，则只需其中一个属性值匹配即可）
[attr|="var"] :匹配定义了attr属性，且属性值由连字符进行分割（比如lang="en-uk"），其中第一个字符串是"val"的元素。
下面依次是例子：
1、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
[class]{
background-color: red;
}
</style>
</head>
<body>
<p class="nihao">how are you</p>
<p class="hello">白骨终将化为沙土，却生生不息</p>
<p>这是哪</p>
</body>
</html>
2、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
[class="hello"]{
background-color: red;
}
</style>
</head>
<body>
<p class="nihao">how are you</p>
<p class="hello">白骨终将化为沙土，却生生不息</p>
</body>
</html>
3、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
[class^="hello"]{
background-color: red;
}
</style>
</head>
<body>
<p class="helloooo">how are you</p>
<p class="hello">白骨终将化为沙土，却生生不息</p>
<p class="now">这是哪</p>
</body>
</html>
4、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
[class$="hello"]{
background-color: red;
}
</style>
</head>
<body>
<p class="oooohello">how are you</p>
<p class="hell">白骨终将化为沙土，却生生不息</p>
<p class="nowhello">这是哪</p>
</body>
</html>
5、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
[class*="hello"]{
background-color: red;
}
</style>
</head>
<body>
<p class="oooohel">how are you</p>
<p class="helloooo">白骨终将化为沙土，却生生不息</p>
<p class="nowhello">这是哪</p>
</body>
</html>
6、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
[class~="who"]{
background-color: red;
}
</style>
</head>
<body>
<p class="are who">hahhahahhaha</p>
</body>
</html>
7、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
[class|="abc"]{
background-color: red;
}
</style>
</head>
<body>
<p class="abc-def">hahhahahhaha</p>
</body>
</html>