前端路线--H5篇（day02）

喝西瓜汁的兔叽Yan

已于 2022-03-07 11:10:58 修改

阅读量153

点赞数

文章标签： javascript 前端 css3

于 2022-03-05 08:40:07 首次发布

本文链接：https://blog.csdn.net/Yan9_9/article/details/123289317

版权

本文详细介绍了CSS3中的各种选择器，包括相邻兄弟选择器、匹配选择器、属性选择器、伪类选择器、伪元素选择器、表单状态选择器以及JS新增的选择器。通过实例展示了如何使用这些选择器实现页面样式的精细化控制，如颜色、字体、背景等效果。此外，还提及了CSS3的一些新属性，如背景图片的多重设置、渐变效果和滤镜等。

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

CSS3选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 相邻兄弟选择器 */
			/* .box1+.box2{
				color: red;
			} */
			/* 匹配选择器  */
			.pox1~div{
				color: #FF0000;
			}
			/* 属性选择器 */
			/* 选中所有带href属性的a */
			a[href]{
				font-size: 50px;
			}
			/* 选中所有title='百度'的a */
			a[title="百度"]{
				color: yellow;
			}
			/* ^ :以*开头
				$：以*结尾
				* ：包含*（包含单词就行）
				~ 必须为单个单词（为空格用）
				|带-的   moren-
			   */
			a[title^='百']{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<!-- 相邻兄弟选择器:选择box1下一个兄弟(同级) -->
		<div class="box1">我是1</div>
		<div class="box2">我是2</div>
		
		<!-- 匹配选择器: pox1下同级所有的div-->
		<div class="pox1">我是P1</div>
		<div class="pox2">我是P2</div>
		<div class="pox3">我是P3</div>
		
		<!-- 属性选择器 -->
		 <!-- ^ :以*开头
			$：以*结尾
			* ：包含*（包含单词就行）
			~ 必须为单个单词（为空格用）
			|带-的   moren-
		 -->
		<ul>
			<li><a href="www.baidu.com" title="百度">超链接1</a></li>
			<li><a href="" title="度">超链接2</a></li>
			<li><a >超链接3</a></li>
		</ul>
	</body>
</html>

选择器2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li:first-child{
				color: red;
			}
			li:nth-child(2){
				font-size: 30px;
			}
			li:last-child{
				color: #00FFFF;
			}
			/* 从后往前数第二个 */
			li:nth-last-child(2){
				text-indent: 50px;
			}
			
			
			/* 不管最后是不是li或者有无被父亲包着 */
			li:first-of-type{
				color: #FFFF00;
			}
			li:nth-of-type(2){
				color: #FFFF00;
			}
			li:last-of-type{
				color: aquamarine;
			}
			li:nth-last-of-type(2){
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<!-- /* 伪类选择器 */ -->
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>
</html>

其他伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 根元素原则器:选择Html */
			:root{
				border: solid 10px orange;
			}
			
			/* 空元素选择器 */
			:empty{
				width: 300px;
				height: 200px;
				border: solid 2px #FFFF00;
			}
			/* 排除选择器 
				只要不是class='my'的都选中，括号里面加一种类型的选择器
			*/
			div:not(.my){
				color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div class="my"></div>
		<div>4</div>
		<div>5</div>
	</body>
</html>

锚点选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			:empty{
				height: 1000px;
			}
			#skip{
				height: 200px;
				background-color: aquamarine;
			}
			/* 选中锚点跳转的那个 */
			:target{
				color: bisque;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<a href="#skip">你好</a>
		<div></div>
		<div id="skip">欢迎光临</div>
	</body>
</html>

文本选择伪元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		 /* 文本选择伪元素 */
			::selection{
				background-color: deepskyblue;
			}
		</style>
	</head>
	<body>
		
		<div class="box">
			2.加载顺序区别
			加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
			
			3.兼容性区别
			@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
			
			4.DOM可控性区别
			可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
		</div>
	</body>
</html>

元素追加伪元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 追加在前 */
			.box::before{
				content: "selection";
				color: #7FFFD4;		
				font-size: 25px;
			}
			/* 追加在后 */
			.box::after{
				content: "selection";
				color: #7FFFD4;				
				font-size: 25px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			jfhjfghfjgjfkjfjjfkj京东客服经济法
		</div>
	</body>
</html>

表单状态选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 获取禁用的组件 */
			input:disabled{
				background-color: #00FFFF;
			}
			/* 获取默认的组件 */
			input:checked{
				background-color: #00FFFF;
			}
			/* 获取可用状态的组件 */
			input:enabled{
				background-color: #FF0000
			}
			
		</style>
	</head>
	<body>
		<form action="">
			昵称: <input type="text" disabled="disabled">
			<br>
			密码: <input type="text" >
		</form>
	</body>
</html>

JS新增的选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
		
		<script type="text/javascript">
			// JS新增的选择器(单个) 
			var obox=document.querySelector('.box');
			obox.style.color='blue';
			
			// JS新增的选择器(多个) 
			var obox1=document.querySelectorAll('.box')[1];
			obox1.style.color='pink';
		</script>
	</body>
</html>

CSS新属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background-color: #00FFFF;
			}
			/* CSS3样式背景   可以设置多个背景图->多个位置->多个平铺*/
			.box{
				background-image: url()  url();
			}
			/* 线性渐变  (方向/度数  颜色)*/
			.box{
				background-image: linear-gradient(to right, red,green,blue);
			}
			/*径向渐变  (形状  颜色)    circle  ellipse椭圆*/
			.box{
				background-image: radial-gradient(ellipse,red,green,blue);
			}
			/* 背景定位原点： border-box从边框区域开始显示背景     content-box从内容区域开始显示背景     padding-box 从内边距区域开始显示背景*/
			.box{
				background-origin: padding-box;
			}
			/* 滤镜    grayscale(100%)  纯灰 blur(5px)模糊 */
			.box{
				filter:grayscale(100%) ;
				
			}
		</style>
	</head>
	<body>
		
		<div class="box"></div>
	</body>
</html>