CSS(3)

最新推荐文章于 2023-07-19 15:29:23 发布

棋宣

最新推荐文章于 2023-07-19 15:29:23 发布

阅读量391

点赞数

文章标签： css sass html

本文链接：https://blog.csdn.net/flower521528/article/details/123513495

版权

1.聚焦选择器

input:focus

<style>
		 input{
			outline:none;
			}	
			/* 聚焦选择器，选中时边框变色 */
			input:focus{
				border-color:blue;
			}
		</style>
	</head>
	<body>
		<input type="text">
	</body>

运行实例：

选中框时边框会聚焦变色。

2.属性选择器

<style>
		
	   [href]{
		   color:green;
	   }
	  
		a[href]{
			color:red;
		}
		
		a[href="#"]{
			color:blue;
		}
		
		input[value="登陆"]{
			background-color: #0000FF;
		}
		</style>
		
		
	<body>
		<a href="">百度</a>
		<a href="#">淘宝</a>
		<a>文字</a>
		<b href="">出人</b>
		<input type="password" value="登陆">
	</body>
</html>

[href]	选择具有href这个属性的进行定义
a[href]	选择在a标签下，具有href属性的进行定义
a[href="#"]	在a标签在，具有href属性，并且里面有#号的标签进行定义

3.伪类选择器

<style>
		
		div span:first-child{
			color:red;
		}
		
		
		
		div :last-child{
			color:blue;
		}
		
		/* 3.精准定位元素 
			括号中写元素的位置
			odd奇数位置元素
			even偶数位置元素
		 */
		div :nth-child(n){
			color:green;
		}
		
		div :nth-of-type(1){
			color:green;
		}
		
		div :first-of-type{
			color:#008000;
		} 
	</style>
	<body>
		<div>
			<span>大儿子</span>
			<span>hello</span>
			<p>哈哈</p>
			<p>托马斯</p>
		</div>
		<div class="box">
			<span>heool</span>
			<span>哈哈哈</span>
			<p>tuoams</p>
			<p>cai</p>
		</div>
	</body>

first-child	选择第一个元素
last-child	选择最后一个元素
nth-child(n)	精准定位元素的位置
nth-of-type(1)	找到div每一种类型的第n个元素
first-of-type	div下面的每个类型的第一个元素

棋宣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS(3)

1.聚焦选择器input:focus<style> input{ outline:none; } /* 聚焦选择器，选中时边框变色 */ input:focus{ border-color:blue; } </style> </head> <body> <input type="text"> </body>运行实例：选中框时边框会聚焦变色。2.属性选.
复制链接

扫一扫