css3新增选择器

最新推荐文章于 2024-03-18 14:36:41 发布

ddai小呆呆

最新推荐文章于 2024-03-18 14:36:41 发布

阅读量147

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/weixin_38898802/article/details/115427861

版权

css3新增选择器

artea奶茶

一般选择器

先上代码代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>测试</title>
	<style type="text/css">
		/* 修改这里 */
		.list div:nth-child(1){
		    background-color:LightSeaGreen;
		}
	</style>
</head>
<body>
	<div class="list">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
	</div>
</body>
</html>

E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

选取第一个子元素:nth-child(1)
选取第二个子元素:nth-child(2)
选取全部子元素:nth-child(n)
选择奇数子元素:nth-child(2n+1)
选择偶数子元素:nth-child(2n)
选取第一个子元素:first-child
选取最后一个子元素:last-child
E > F E元素下面第一层子集
E ~ F E元素后面的兄弟元素
E + F 紧挨着的后面的兄弟元素

属性选择器

先看代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>测试</title>
	<style type="text/css">
		/* 修改这里 */
		div[data-attr='ok']{
		        color:red;
		    }
	</style>
</head>
<body>
	<div class="list">
		<div data-attr="ok">1-ok</div>
		<div data-attr="ok开头">2-ok开头</div>
		<div data-attr="结尾ok">3-结尾ok</div>
		<div data-attr="what?">4-what?</div>
		<div>5-why?</div>
	</div>
</body>
</html>

E[attr=‘ok’] 含有attr属性的元素且它的值为“ok”
E[attr^=‘ok’] 含有attr属性的元素且它的值的开头含有“ok”
E[attr$=‘ok’]含有attr属性的元素且它的值的结尾含有“ok”
E[attr*=‘ok’] 含有attr属性的元素且它的值中含有“ok”

ddai小呆呆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3新增选择器

css3新增选择器artea奶茶一般选择器先上代码代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>测试</title> <style type="text/css"> /* 修改这里 */ .list div:nth-child(1){ background-color:LightSeaGreen; } &l
复制链接

扫一扫