Home >Web Front-end >CSS Tutorial >Code analysis of pseudo-class selectors and pseudo-element selectors in CSS
Code analysis of pseudo-class selectors and pseudo-element selectors in CSS
- 不言Original
- 2018-09-05 18:00:582043browse
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
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>2. Dynamic pseudo-class
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>3. Privacy and:visited selector
1. Privacy and:visited selector
/*隐私与:visited选择器*/只有下列的属性才能被应用到已访问链接 ： color background-color border-color
4. Form-related pseudo-classes
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>4. Structural pseudo-class
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>5. Pseudo elements
1. Pseudo elements
/*伪元素*/
::after
::before
::firstLetter
::firstLine
::selection2. 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!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn