CSS中的伪类选择器和伪元素选择器的代码分析_动视

CSS中的伪类选择器和伪元素选择器的代码分析

2020-11-02 22:07:32 责编:小采

本篇文章给大家带来的内容是关于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>
 <p id="test">我是p啦</p>
 </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; }
 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、动态伪类

 /*动态伪类*/ 注意: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>
 <p id="test">
 我是test </p>
 </body>

三、隐私与:visited选择器

1、隐私与:visited选择器

/*隐私与:visited选择器*/只有下列的属性才能被应用到已访问链接
： color background-color border-color

四、表单相关伪类

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; }
 p:focus{ background: pink; }

 </style>
 </head>
 <body>
 <input type="text" value="" />
 <p style="width: 200px;height: 200px;background: deeppink;" contenteditable="true" ></p>
 </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 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、伪元素

/*伪元素*/
 ::after
 ::before
 ::firstLetter
 ::firstLine
 ::selection

2、代码实例：
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>

下载本文