Home > Article > Web Front-end > Code analysis of pseudo-class selectors and pseudo-element selectors in CSS
This article brings you an introduction to pseudo-class selectors and pseudo-element selectors in CSS (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. helped.
1. Link pseudo-class
/*链接伪类*/ 注意:link,:visited,:target是作用于链接元素的! :link 表示作为超链接,并指向一个未访问的地址的所有锚 :visited 表示作为超链接,并指向一个已访问的地址的所有锚 :target 代表一个特殊的元素,它的id是URI的片段标识符
2. Code example:
01 _Anchor pseudo-class.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> <p id="test">我是p啦</p> </body>
02_Anchor pseudo-class.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; } p{ width: 300px; height: 200px; line-height: 200px; background: black; color: pink; text-align: center; display: none; } :target{ display: block; } </style> </head> <body> <a href="#p1">p1</a> <a href="#p2">p2</a> <a href="#p3">p3</a> <p id="p1"> p1 </p> <p id="p2"> p2 </p> <p id="p3"> p3 </p> </body>
1. Dynamic pseudo-class
/*动态伪类*/ 注意:hover,:active基本可以作用于所有的元素! :hover 表示悬浮到元素上 :active 表示匹配被用户激活的元素(点击按住时) 注意: 由于a标签的:link和:visited可以覆盖了所有a标签的状态,所以当:link,:visited,:hover,:active同时出现在a标签身上时 :link和:visited不能放在最后!!!
2. Code example:
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #test:hover{ color: pink; } #test:active{ color: red; } </style> </head> <body> <p id="test"> 我是test </p> </body>
1. Privacy and:visited selector
/*隐私与:visited选择器*/只有下列的属性才能被应用到已访问链接 : color background-color border-color
1. Form-related pseudo-classes
/*表单相关伪类*/ :enabled 匹配可编辑的表单 :disable 匹配被禁用的表单 :checked 匹配被选中的表单 :focus 匹配获焦的表单
2 , Code example:
01_Form status.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_Form status.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_Get focus.html
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input:focus{ background: pink; } p:focus{ background: pink; } </style> </head> <body> <input type="text" value="" /> <p style="width: 200px;height: 200px;background: deeppink;" contenteditable="true" ></p> </body>
04 _Simulate radio button.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. Structural pseudo-class
/*结构性伪类*/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. Code example:
<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 p: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> <p class="item">p1</p> <p class="item">p2</p> <p class="item">p3</p> <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; } p { width: 800px; margin: 0 auto; } p>a:not(:last-of-type) { border-right: 1px solid red; } </style> </head> <body> <p> <a href="#">first</a> <a href="#">second</a> <a href="#">third</a> <a href="#">fourth</a> <a href="#">fifth</a> </p> </body>
05_empty.html
<head> <meta charset="UTF-8"> <title>empty</title> <style type="text/css"> p { height: 200px; background: #abcdef; } p:empty { background: #f00; } </style> </head> <body> <p></p> <p>Second</p> <p></p> <p>Third</p> </body>
1. Pseudo elements
/*伪元素*/ ::after ::before ::firstLetter ::firstLine ::selection
2. Code example:
after.html
<head> <meta charset="UTF-8"> <title>after</title> <style type="text/css"> p { width: 300px; height: 100px; border: 1px solid #000; } p::after { content: "我在内容的后面"; } </style> </head> <body> <p>伪元素</p> </body>
before.html
<head> <meta charset="UTF-8"> <title>before</title> <style type="text/css"> p { width: 300px; height: 100px; border: 1px solid #000; } p::before { content: "我在内容的前面"; } </style> </head> <body> <p>伪元素</p> </body>
firstLetter.html
<head> <meta charset="UTF-8"> <title>First-Letter</title> <style type="text/css"> p { width: 500px; margin: 0 auto; font-size: 12px; } p::first-letter { color: #f00; font-size: 24px; font-weight: bold; } </style> </head> <body> <p>sssss</p> </body>
firstLine.html
<head> <meta charset="UTF-8"> <title>First-Line</title> <style type="text/css"> p { width: 500px; margin: 0 auto; } p::first-line { color: #f00; font-weight: bold; } </style> </head> <body> <p> sssss<br> sssss <br> sssss <br> </p> </body>
selection.html
<head> <meta charset="UTF-8"> <title>Selection</title> <style type="text/css"> p::selection { background: red; color: pink; } </style> </head> <body> <p>SelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelection</p> </body>
Related recommendations:
Summary of selector types in CSS and examples of efficiency comparison
The above is the detailed content of Code analysis of pseudo-class selectors and pseudo-element selectors in CSS. For more information, please follow other related articles on the PHP Chinese website!