浏览器私有前缀目标伪类选择器属性选择器

最新推荐文章于 2022-09-22 18:11:46 发布

Lgw_zuiyouxiu

最新推荐文章于 2022-09-22 18:11:46 发布

阅读量184

点赞数

文章标签：浏览器私有前缀目标伪类选择器属性选择器

本文链接：https://blog.csdn.net/Lgw_zuiyouxiu/article/details/97274308

版权

浏览器私有前缀

		目标伪类选择器
		  :target{属性：属性值;}
		  适用于target元素（将元素id名写在a标签的href属性的属性值--锚点链接），当超链接被点击的时候，跳转到对应元素位置，target元素设置的样式显示
		  使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接的属性值）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

		*{margin: 0;padding: 0;}
		#box1{width: 400px;height: 300px;background: pink;}
		#box2{width: 400px;height: 300px;background: orange;}
		#box1:target{background: green;}
		#box2:target{background: blue;}
	</style>
</head>
<body>
	<a href="#box1">来啊，点我啊！！！</a>
	<a href="#box2">来啊，再点我啊！！！</a>

		属性选择器
			E[attr]{属性：属性值;}           选中E元素中具有attr这个属性的E元素
			E[attr="value"]{属性：属性值;}   选中E元素中具有attr这个属性，并且attr属性的属性值为value的E元素
			E[attr~="value"]{属性：属性值;}  选中E元素中具有attr这个属性，并且attr属性的多个属性值中至少有一个属性值为vlaue的E元素
			E[attr|="value"]{属性：属性值;}  选中E元素中具有attr这个属性，并且attr属性的属性值是以连字号分隔的属性值，然后属性值是以vlaue为开头的E元素
		css3中的属性选择器
			E[attr^="value"]{属性：属性值;}  选中E元素中具有attr这个属性，并且attr属性的属性值是以value为开头的E元素
			E[attr$="value"]{属性：属性值;}  选中E元素中具有attr这个属性，并且attr属性的属性值是以value为结尾的E元素
			E[attr*="value"]{属性：属性值;}  选中E元素中具有attr这个属性，并且attr属性的属性值包含vlaue字符的E元素
		*/
		div[class]{background: red;}
		div[id]{background: blue;}
		div[class="div"]{color: #fff;}
		div[class~="efa"]{font-size: 40px;}
		ul li[class|="div"]{background: pink;}
		ol li[class^="ab"]{background: orange;}
		ol li[class$="def"]{color: blue;}
		ol li[class*="de"]{font-size: 30px;}
	</style>
</head>
<body>
	<div class="div asd">div1</div>
	<div class="box abc efa">div2</div>
	<div class="box">div3</div>
	<div class="div abc">div4</div>
	<div class="box">div5</div>
	<div class="div efa asd">div6</div>
	<div id="divbox">div7</div>
	<div class="div asd abc efa">div8</div>
	<div class="box efa qwe">div9</div>
	<div id="divbox">div10</div>
	<ul>
		<li class="div-1 box-div1">1</li>
		<li class="div box-div2 aaa-div2">2</li>
		<li class="div-3 bbb-div3">3</li>
		<li class="box-div4 div-4">4</li>
		<li class="aaa-div4 ccc-aaa">5</li>
		<li class="div-6 aaa-div6">6</li>
	</ul>
	<ol>
		<li class="abcde">1</li>
		<li class="cddef">2</li>
		<li class="acdef">3</li>
		<li class="cdbef">4</li>
		<li class="abbde">5</li>
	</ol>

Lgw_zuiyouxiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器私有前缀目标伪类选择器属性选择器

浏览器私有前缀目标伪类选择器 :target{属性：属性值;} 适用于target元素（将元素id名写在a标签的href属性的属性值--锚点链接），当超链接被点击的时候，跳转到对应元素位置，target元素设置的样式显示使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接的属性值）指定样式，该样式只在用户点击了页面中的超链接，并且跳...
复制链接

扫一扫