前端学习（CSS3 一）——选择器、边框

最新推荐文章于 2023-11-02 20:29:30 发布

这名没人用吧

最新推荐文章于 2023-11-02 20:29:30 发布

阅读量393

点赞数 2

分类专栏： css基础知识文章标签： css3

本文链接：https://blog.csdn.net/weixin_43866830/article/details/115125336

版权

本文介绍了CSS3的发展历程、新特性，并详细讲解了选择器的使用，包括相邻兄弟选择器、通用兄弟选择器、属性选择器、结构性伪类选择器和UI状态伪类选择器。此外，还探讨了CSS3边框的新特性，如border-radius、box-shadow和border-image的用法，展示了各种示例和效果。

摘要由CSDN通过智能技术生成

一、CSS3发展历程及新特性

CSS在1997年被W3C接管，这时的CSS是CSS1版本，CSS1的主要功能是设置网页对象的基本样式，如字体、颜色、背景、边框等。紧接着1998年W3C发布了CSS2，提出了更高级的概念，如浮动、定位、高级选择器等。而从2011年至今，CSS被分为多个模块单独升级，变成了CSS3，CSS3相较于CSS2增加了许多强大的功能，CSS3也是CSS规范中的最新版本。

CSS3在CSS2的选择器基础上进行了增强，增加了一些如属性选择器、结构性伪类选择器等等；在布局方面还增加了弹性盒子和媒体查询自适应布局；样式方面增加了对圆角的处理、背景处理和设置渐变效果，并且对字体图标提供了支持。同时CSS3还增加了动效的支持，如转换、过渡、动画等等。

二、CSS3选择器

1.相邻兄弟选择器

可选择紧接在另一个元素后的元素，且二者有相同父元素
语法：

div + p{
   
	/*样式代码*/	
}

样例：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		div + p {
   
			color: red;
		}
	</style>
</head>
<body>
	<div>div</div>
	<p>第一个p标签</p>
	<p>第二个p标签</p>
	<p>第三个p标签</p>
</body>
</html>

这里div标签后紧接的第一个p标签才发生了颜色的变化：
在这里插入图片描述
如果要使得div下面所有p标签字体颜色都发生改变，就需要用到通用兄弟选择器。

2.通用兄弟选择器

与相邻兄弟选择器不同的是，通用兄弟选择器的二者虽然也拥有相同的父元素，但是不需要紧随，之后出现的元素都可以。
语法：

div ~ p{
   
	/*样式代码*/	
}

样例：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		div ~ p {
   
			color: red;
		}
	</style>
</head>
<body>
	<div>div</div>
	<p>第一个p标签</p>
	<p>第二个p标签</p>
	<p>第三个p标签</p>
</body>
</html>

结果：
在这里插入图片描述

3.属性选择器

属性选择器	例子	例子描述
E[attribute^=value]	div[class^=“s”]	class属性以"s"开头的每个div元素
E[attribute$=value]	div[class$=“s”]	class属性以"s"结尾的每个div元素
E[attribute*=value]	div[class*=“s”]	class属性包含"s"的每个div元素

样例：
以"^"开头：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		div[class^="t"]{
   
			color: red;
		}
	</style>
</head>
<body>
	<div class="test">div</div>
	<div class="testx">div</div>
	<div class="demox">div</div>
	<div class="demo">div</div>
</body>
</html>

结果：
在这里插入图片描述
以"$"开头：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		div[class$="x"]{
   
			color: red;
		}
	</style>
</head>
<body>
	<div class="test">div</div>
	<div class="testx">div</div>
	<div class=