CSS选择器（续）

最新推荐文章于 2023-09-05 16:06:32 发布

花之屿

最新推荐文章于 2023-09-05 16:06:32 发布

阅读量354

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_46966817/article/details/121878012

版权

结构化伪类选择器：

4、:first-child选择器和:last-child选择器：:first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。

代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>first-child和last-child选择器的使用</title>
<style type="text/css">
    p:first-child{
    color:pink;
    font-size:16px;
    font-family:"宋体";	
    }
    p:last-child{
    color:blue;
    font-size: 16px;
    font-family: "微软雅黑";
    }
</style>
</head>
<body>
    <p>第一篇 毕业了</p>
    <p>第二篇 关于考试</p>
    <p>第三篇 夏日飞舞</p>
    <p>第四篇 惆怅的心</p>
    <p>第五篇 畅谈美丽</p>
</body>
</html>

5、:nth-child(n)和:nth-last-child(n)选择器：是:first-child和:last-child选择器的扩展，可以指定选择元素。

代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nth-child(n)和nth-last-child(n)选择器的使用</title>
<style type="text/css">
    p:nth-child(2){
    color:pink;
    font-size:16px;
    font-family:"宋体";	
    }
    p:nth-last-child(2){
    color:blue;
    font-size: 16px;
    font-family: "微软雅黑";
    }
</style>
</head>
<body>
    <p>第一篇 毕业了</p>
    <p>第二篇 关于考试</p>
    <p>第三篇 夏日飞舞</p>
    <p>第四篇 惆怅的心</p>
    <p>第五篇 畅谈美丽</p>
</body>
</html>

6、:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素特定类型的第n个子元素和倒数第n个子元素。

代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nth-of-type(n)和nth-last-of-type(n)选择器的使用</title>
<style type="text/css">
    h2:nth-of-type(odd){color:#f09;}
    h2:nth-of-type(even){color:#12ff65;}
    p:nth-last-of-type(2){font-weight:bold;}
</style>
</head>
<body>
    <h2>网页设计</h2>
    <p>网页设计是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。</p>
    <h2>JAVA</h2>
    <p>Java是一种可以撰写跨平台应用程序的面向对象的程序设计语言。</p>
    <h2>iOS</h2>
    <p>iOS是由苹果公司开发的移动操作系统。</p>
    <h2>PHP</h2>
    <p>PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。</p>
</body>
</html>

7、:empty选择器：用来选择没有子元素或者文本内容为空的元素

代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>empty选择器的使用</title>
<style type="text/css">
	p{
		width:150px;
		height:30px;
	}
	:empty{background-color: #999;}
</style>
</head>
<body>
	<p>测试得到</p>
	<p>信息</p>
	<p>多好多好</p>
	<p></p>
	<p>以为</p>	
</body>
</html>

8、:target选择器：用于页面中的某个target元素（该元素的id被当做页面中的超链接来使用）指定样式，只有用户单击页面中的超链接，并且跳转到target元素后，:target选择器所设置的样式才会起作用。

代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>target选择器的使用</title>
<style type="text/css">
    :target{background-color: #e5eecc;}
</style>
</head>
<body>
    <h1>这是标题</h1>
    <p><a href="#news1">跳转至内容 1</a></p>
    <p><a href="#news2">跳转至内容 2</a></p>
    <p>请点击上面的链接,:target 选择器会突出显示当前活动的HTML锚。</p>
    <p id="news1"><b>内容 1...</b></p>
    <p id="news2"><b>内容 2...</b></p>	
</body>
</html>

代码结果如下：

伪元素选择器：

1、:before选择器：用于在被选元素的内容前面插入内容，必须配合conten属性来制定需要插入的具体内容。

代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>before选择器的使用</title>
<style type="text/css">
	p:before{
		content:"我们学校";
		color:#c06;
		font-size: 20px;
		font-family: "微软雅黑";
		font-weight: bold;
	}
</style>
</head>
<body>
	<p>专注于Java、.Net、PHP、网页设计和平面设计、IOS、C++工程师的培养，提供的免费视频教程是目前
	覆盖面最广，项目最真实的视频教程之一。</p>
</body>
</html>

2、:after选择器：用于在某个元素之后插入一些内容，使用方法与:before选择器相同。

代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>after选择器的使用</title>
<style type="text/css">
    p:after{content:"十六圆";}
</style>
</head>
<body>
    <p>十五的月亮</p>
</body>
</html>

链接伪类：

1、超链接标记<a>的伪类：如下图所示

代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>链接伪类</title>
</head>
<body>
<style type="text/css">
	a:link,a:visited{                  /*未访问和访问后*/
		color:pink;
		text-decoration:none;         /*清除超链接默认的下划线*/
	}
	a:hover{                             /*鼠标悬停*/
		color:blue;
		text-decoration:underline;  /*鼠标悬停时出现下划线*/
	}
	a:active{ color:#F00;}            /*鼠标点击不动*/
</style>
</head>
<body>
	<a href="#">公司首页</a>
	<a href="#">公司简介</a>
	<a href="#">产品介绍</a>
	<a href="#">联系我们</a>	
</body>
</html>