本文主要是介绍CSS选择器之伪类与伪元素选择器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、链接伪类
1、链接伪类
/*链接伪类*/ 注意:link，:visited，:target是作用于链接元素的！:link 表示作为超链接，并指向一个未访问的地址的所有锚:visited 表示作为超链接，并指向一个已访问的地址的所有锚:target 代表一个特殊的元素，它的id是URI的片段标识符
2、代码实例：
01_锚点伪类.html
<head><meta charset="UTF-8"><title></title><!--:link：表示作为超链接，并指向一个未访问的地址的所有锚--><style type="text/css">a{text-decoration: none;}a:link{color: deeppink;}#test:link{background: pink;}</style></head><body><a href="#">点我点我点我</a><div id="test">我是div啦</div></body>02_锚点伪类.html
<head><meta charset="UTF-8"><title></title><!--:visited：表示作为超链接，并指向一个已访问的地址的所有锚--><style type="text/css">a{text-decoration: none;}a:link{color: black;}a:visited{color: pink;}</style></head><body><a href="#">点我点我点我</a></body>03_target.html
<head><meta charset="UTF-8"><title></title><!--:target 代表一个特殊的元素，这个元素的id是URI的片段标识符。--> <style type="text/css">*{margin: 0;padding: 0;}div{width: 300px;height: 200px;line-height: 200px;background: black;color: pink;text-align: center;display: none;}:target{display: block;}</style></head><body><a href="#div1">div1</a><a href="#div2">div2</a><a href="#div3">div3</a><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div></body>二、动态伪类
1、动态伪类
/*动态伪类*/ 注意:hover，:active基本可以作用于所有的元素！:hover 表示悬浮到元素上:active 表示匹配被用户激活的元素（点击按住时）
注意：
由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签身上时 :link和:visited不能放在最后！！！
2、代码实例：
<head><meta charset="UTF-8"><title></title><style type="text/css">#test:hover{color: pink;}#test:active{color: red;}</style></head><body><div id="test">我是test</div></body>三、隐私与:visited选择器
1、隐私与:visited选择器
/*隐私与:visited选择器*/
只有下列的属性才能被应用到已访问链接：color background-color border-color
2、代码实例：
四、表单相关伪类
1、表单相关伪类
/*表单相关伪类*/:enabled 匹配可编辑的表单:disable 匹配被禁用的表单:checked 匹配被选中的表单:focus 匹配获焦的表单
2、代码实例：
01_表单状态.html
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>input {width: 100px;height: 30px;color: #000;}input:enabled {color: red;}input:disabled {color: blue;}</style></head><body><input type="text" value="晓飞张" /><input type="text" value="晓飞张" disabled="disabled" /></body>02_表单状态.html
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>input:checked {width: 100px;height: 100px;}</style></head><body><input type="checkbox" /></body>
03_获取焦点.html
<head><meta charset="UTF-8"><title></title><style type="text/css">input:focus{background: pink;}div:focus{background: pink;}</style></head><body><input type="text" value="" /><div style="width: 200px;height: 200px;background: deeppink;" contenteditable="true" ></div></body>04_模拟单选框.html
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>label {float: left;margin: 0 5px;overflow: hidden;position: relative;}label input {position: absolute;left: -50px;top: -50px;}span {float: left;width: 50px;height: 50px;border: 3px solid #000;}input:checked~span {background: red;}</style></head><body><label><input type="radio" name="tab" /><span></span></label><label><input type="radio" name="tab" /><span></span></label><label><input type="radio" name="tab" /><span></span></label></body>
四、结构性伪类
1、结构性伪类
/*结构性伪类*/
index的值从1开始计数！！！！
index可以为变量n(只能是n)
index可以为even odd#wrap ele:nth-child(index) 表示匹配#wrap中第index的子元素 这个子元素必须是ele#wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素除此之外:nth-child和:nth-of-type有一个很重要的区别！！nth-of-type以元素为中心！！！:nth-child(index)系列 :first-child:last-child:nth-last-child(index):only-child (相当于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
:nth-of-type(index)系列:first-of-type:last-of-type:nth-last-type(index):only-of-type (相当于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1)):not
:empty(内容必须是空的，有空格都不行，有attr没关系)
2、代码实例：
<head><meta charset="UTF-8"><title></title><style type="text/css">/*子元素的标签应该要统一*//*ul .item:nth-child(3){border: 1px solid;}*/ul .item:nth-of-type(3){border: 1px solid;}/*ul p:nth-of-type(3){border: 1px solid;}ul div:nth-of-type(3){border: 1px solid;}ul li:nth-of-type(3){border: 1px solid;}*/</style></head><body><ul><p class="item">p1</p><p class="item">p2</p><p class="item">p3</p><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li><div class="item">div1</div><div class="item">div2</div><div class="item">div3</div><li class="item">6</li><li class="item">7</li><li class="item">8</li><li class="item">9</li></ul></body>04_not.html
<head><meta charset="UTF-8"><title>not</title><style type="text/css">* {margin: 0;padding: 0;border: none;}a {text-decoration: none;color: #333;font-size: 14px;display: block;float: left;width: 100px;height: 30px;}div {width: 800px;margin: 0 auto;}div>a:not(:last-of-type) {border-right: 1px solid red;}</style></head><body><div><a href="#">first</a><a href="#">second</a><a href="#">third</a><a href="#">fourth</a><a href="#">fifth</a></div></body>05_empty.html
<head><meta charset="UTF-8"><title>empty</title><style type="text/css">div {height: 200px;background: #abcdef;}div:empty {background: #f00;}</style></head><body><div></div><div>Second</div><div></div><div>Third</div></body>五、伪元素
1、伪元素
/*伪元素*/::after::before::firstLetter::firstLine::selection
2、代码实例：
after.html
<head><meta charset="UTF-8"><title>after</title><style type="text/css">div {width: 300px;height: 100px;border: 1px solid #000;}div::after {content: "我在内容的后面";}</style></head><body><div>伪元素</div></body>before.html
<head><meta charset="UTF-8"><title>before</title><style type="text/css">div {width: 300px;height: 100px;border: 1px solid #000;}div::before {content: "我在内容的前面";}</style></head><body><div>伪元素</div></body>firstLetter.html
<head><meta charset="UTF-8"><title>First-Letter</title><style type="text/css">div {width: 500px;margin: 0 auto;font-size: 12px;}div::first-letter {color: #f00;font-size: 24px;font-weight: bold;}</style></head><body><div>sssss</div></body>firstLine.html
<head><meta charset="UTF-8"><title>First-Line</title><style type="text/css">div {width: 500px;margin: 0 auto;}div::first-line {color: #f00;font-weight: bold;}</style></head><body><div>sssss<br> sssss<br> sssss<br></div></body>
selection.html
<head><meta charset="UTF-8"><title>Selection</title><style type="text/css">div::selection {background: red;color: pink;}</style></head><body><div>SelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelection</div></body>这篇关于CSS选择器之伪类与伪元素选择器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
