css3-review

最新推荐文章于 2022-11-25 16:36:21 发布

远方LIGHT

最新推荐文章于 2022-11-25 16:36:21 发布

阅读量226

点赞数

本文链接：https://blog.csdn.net/qq_37143499/article/details/61914991

版权

CSS3符号

元素^=g (修改元素为g开头的内容)

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>无标题文档</title>
		<style>
			p {height: 30px;border: 1px solid #000;}
			p[cat^=g] {background: pink;}
		</style>
	</head>

	<body>
		<p cat="bleo old">leo</p>
		<p cat="bdp">杜鹏</p>
		<p cat="bzM">子鼠</p>
		<p cat="gxm">小美</p>
	</body>

元素$=M (修改元素M结尾的内容)

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>无标题文档</title>
		<style>
			p{height: 30px;border: 1px solid #000;}
			p[cat$=M] {background: #CC0;}
		</style>
	</head>

	<body>
		<p cat="bleo old">leo</p>
		<p cat="bdp">杜鹏</p>
		<p cat="bzM">子鼠</p>
		<p cat="gXM">小美</p>
	</body>

元素|=b (修改元素单独为b的内容)

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>无标题文档</title>
		<style>
			p {height: 30px;border: 1px solid #000;}
			p[cat|=b] {background: #C3C;}
		</style>
	</head>

	<body>
		<p cat="b-leo">leo</p>
		<p cat="bleo">杜鹏</p>
		<p cat="b-leo">子鼠</p>
		<p cat="g-xm">小美</p>
		<p cat="b">无名氏</p>
	</body>

元素*=d (修改元素含有d的内容)

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>无标题文档</title>
		<style>
			p {height: 30px;border: 1px solid #000;}
			p[cat*=d] {background: #C3C;}
		</style>
	</head>
	
	<body>
		<p cat="bleo old">leo</p>
		<p cat="bdp">杜鹏</p>
		<p cat="bzM">子鼠</p>
		<p cat="gxm">小美</p>
	</body>

结构伪类选择器语法

选择器	功能描述
E ： first-child	作为父元素的第一个子元素的E元素
E ： last-child	作为父元素的最后一个子元素的E元素
E ： root
E F：nth-child（n）	选中的F元素是E元素的第n个子元素
E F： nth-last-child（n）	选中的F元素是E元素的倒数第n个子元素
E ： nth-of-type（n）	选择父元素内具有指定类型的第n个E元素
E ： nth-last-of--type（n）	选择父元素内具有指定类型的倒数第n个E元素
E ： first-of-type	选择父元素内具有指定类型的第1个E元素
E ： last-of-type	选择父元素内具有指定类型的倒数第1个E元素
E ： only-child	选择父元素内只包含一个子元素,且该元素是E元素
E ： only-of-type	选择父元素内只包含一个类型的子元素，且该元素是E元素
E ： empty	选择没有子元素的元素

文本新增伪类

选择器	功能描述
E ：： first-letter	选择文本块的第一个字母
E ：： first-line	选择文本快的第一行
E ：： before 和E ：： after	主要用于清除浮动
E ：： selection	选中的E元素

远方LIGHT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3-review

CSS3符号元素^=g (修改元素为g开头的内容) 无标题文档 p{height: 30px;border: 1px solid #000;} p[cat^=g] {background: pink;} leo 杜鹏子鼠小美元素$=M (修改元素M结尾的内容) 无标题文档 p{heig
复制链接

扫一扫