【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式

用户11865655

发布于 2025-10-13 17:53:27

7200

代码可运行

文章被收录于专栏：CSDN专栏CSDN专栏

运行总次数：0

代码可运行

CSS伪类

伪类：伪类这个叫法源自于它们跟类相似，但实际上并没有类会附加到标记中的标签上。

伪类分为两种(以及新增的伪类选择器)：

UI伪类：会在HTML元素处于某种状态时(例如：鼠标指针位于连接上)，为该元素应用CSS样式。

:hover

结构化伪类：会在标记中存在某种结构上的关系时

例如：某元素是一组元素中的第一个或最后一个，为该元素应用CSS样式。

:not和:target(CSS3新增的两个特殊的伪类选择器)

UI伪类

UI元素状态伪类选择器有如下几个：

属性	说明
Selector:link	匹配Selector选择器且未被访问前的元素(通常只能是超链接)。
Selector:visited	匹配Selector选择器且已被访问前的元素(通常只能是超链接)。
Selector:hover	匹配Selector选择器且处于鼠标悬停状态的元素。
Selector:active	匹配Selector选择器且处于被用户激活(在鼠标点击与释放之间的状态)的状态的元素。
Selector:focus	匹配Selector选择器且已得到焦点的元素。
Selector:enabled	匹配Selector选择器且当前用于处于不可用状态的元素。
Selector:disabled	匹配Selector选择器且当前处于不可用状态的元素。
Selector:checked	匹配Selector选择器且当前处于选中状态的元素。
Selector:default	匹配Selector选择器且页面处于打开时选中状态的元素(即使当前没有被选中亦可)。
Selector:read-only	匹配Selector选择器且当前处于只读状态的元素
Selector:read-wirte	匹配Selector选择器且当前处于读写状态的元素
Selector:selection	匹配Selector选择器的元素中当前被选中的内容。

特别提示：

一个冒号(:)表示伪类，两个冒号(::)表示CSS3新增的伪元素。
上面的Selcotor选择器可以省略，如果省略则可以匹配处于某种状态下的多个元素。

示例

<body>
    <div id="diva">
    	<a href="https://www.baidu.com/">用于link、visited、active、hover伪类选择器讲解</a> 
    </div>
    <div id="divothers">
        <input type="text" value="获得焦点时"/>
        <button>可用按钮</button>
        <button disabled="disabled">不可用按钮</button>
        <input type="text" disabled value="不可用文本框"/>
    </div>
</body>

@charset "utf-8";
/* CSS Document */
/*设置div样式*/
#diva {
	width: 800px;
	height: 200px;
	margin: 0 auto;
	line-height: 160px;
	border: 2px solid #C00;
	text-align: center
}
/*divothers样式设置/*/
#divothers {
	width: 800px;
	height: 200px;
	margin: 20px auto;
	padding: 30px 0px;
	border: 2px solid #C00;
	text-align: center;
}
/*设置input标签样式*/
input {
	width: 200px;
	height: 25px;
	font-size: 15pt;
	text-align: center;
}
/*设置button按钮的样式*/
button {
	width: 200px;
	height: 30px;
	display: block;
	margin: 10px auto;
	font-size: 14pt;
}
/*设置a标签的字体大小*/
a {
	font-size: 26px;
}


/*链接在初始状态是蓝色的*/
a:link {
	color:blue;
}
/*当链接被点击之后，变成灰色(确切的说，到浏览器访问历史中
的这个URL过期之前或被用户删除之前都是灰色)*/
a:visited {
	color: gray;
}
/*鼠标移动到a标签上的时候，下划线消失*/
a:hover {
	text-decoration: none;/*取消a标签的下划线*/
}
/*用户在链接上按下鼠标时(活动状态)，链接颜色为红色*/
a:active {
	color: red;
}

/*当input标签获取焦点时，添加下划线*/
input:focus {
	text-decoration: underline;
	border:3px solid #F00;
}
/*没有选择器的情况下，会将所有处于disabled状态下的元素的CSS样式改变*/
:disabled {
	font-famliy: "黑体";
	color:#3F0;
}

结构化伪类

属性	说明
Selector:root	匹配文档的根元素。在HTML文档中，根元素永远是元素
Selector:first-child	表示一组同胞元素中的第一个元素。
Selector:last-child	表示一组同胞元素中的最后一个元素。
Selector:nth-child(n)	表示一组同胞元素中的第n个元素。(顺数第n个)
Selector:nth-last-child(n)	表示一组同胞元素中的倒数第n个元素。(倒数第n个)
Selector:only-child	匹配符合Selctor选择器，而且必须只有一个子节点。

还有其他的几个结构化选择器：和上面的类似 Selector:first-of-type Selector:last-of-type Selector:nth-of-type(n) Selector:nth-last-of-type(n) Selector:empty

示例

<body>
    <ul>
    	<li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Csharp</li>
        <li>Java</li>
        <li>Andriod</li>
    </ul>
   <ul>
    	<li>MATH</li>
    </ul>
</body>

li:first-child{
	color:yellow;
}
li:last-child{
	color:#60C;
}
li:nth-child(2){
	color:#2326C4;
}
li:nth-last-child(3){
	color:#2326C4;
}
li:only-child{
	color:#900;
}

伪元素

伪元素就是说在你的文档中若有实无的元素 (解释说明：在HTML代码中没有，我们可以通过css的样式设置伪元素，让它显示给我们看到) 伪元素：
::first-letter 伪元素 第一个字母
::first-line 伪元素 第一行
::before 和::after 伪元素

示例

<body>
    <p>The owner felt quite surprised. He asked the man,
      "Why are you back so soon? Have you tested him already?" 
      "I don't want to test him any more," replied the man, "
      From the companion he chose for himself, I could see what 
      sort of animal he is."
    </p>
	<p  class="myp">下午好！</p>
</body>

/* CSS Document */
/*将段落中的第一个字母放大到原来的300%*/
p::first-letter {
	font-size: 300%;
}
/*将段落中的第一行放大到原来的200% 并将字体的样式设置为斜体*/
p::first-line {
	font-size: 200%;
	font-style: italic;/*字体的样式设置为斜体*/
}
#myp {
	font-size: 20px;
	text-align: center;/*设置字体居中显示*/
}
/*在#myp这个段落的开始添加文字*/
.myp::before {
	content: "同学们，";
}
/*在#myp这个段落的末尾添加文字*/
.myp::after {
	content: "现在是上课时间。";
}

如果使用伪元素，不管是否要在元素中添加文字，都需要content属性，哪怕是空

content: ''; - 必备

:not and :target

Selector1:not(Selector2)

匹配Selector1，但不匹配Selector2，相当于从Selector1中减去Selector2

Selector:target (target 目标)

如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标(target)

示例

<body>
    <div id="main">
        <h1 id="myh1">this is a h1</h1>
        <div id="divone"> </div>
        <a  href="#myh1">Link</a> 
    </div>
    <ul>
        <li id="Csharp">Csharp</li>
        <li id="Java">Java</li>
        <li id="jQuery">jQuery</li>
        <li id="JavaScript">JavaScript</li>
        <li id="Andriod">Andriod</li>
    </ul>
</body>

@charset "utf-8";
/* CSS Document */
/*设置id为main的div的样式*/
#main {
	width: auto;
	height: auto;
	text-align: center;
}
/*设置id为divone的div的样式*/
#divone {
	width: 800px;
	height: 900px;
	background: #900;
	margin: 0px auto;
}
/*设置a标签的样式*/
a {
	font-size: 30px;
	color: bule;
	margin: 20px auto;
}
ul li {
	font-size: 20px;
}
/*:not伪类选择器，设置除了li标签字体颜色为红色，除了id为Java的li标签*/
li:not(#Java) {
	color: #900;
}
/*:target伪类选择器 ，设置目标元素myh1 的背景颜色为红色 */
#myh1:target {
	background: #900;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-08-30，如有侵权请联系 cloudcommunity@tencent.com 删除

text