类选择器和搭配使用伪类选择器

最新推荐文章于 2024-07-11 18:05:14 发布

Lingwl

最新推荐文章于 2024-07-11 18:05:14 发布

阅读量841

点赞数

分类专栏：前端文章标签： css3 html5 css 前端 html

本文链接：https://blog.csdn.net/qq_38862981/article/details/121450245

版权

前端专栏收录该内容

12 篇文章 2 订阅

订阅专栏

事实证明，纯CSS是不能做到这么选的，放弃这种写法吧，我的HTML代码如下

<div class="banner">
			<aside>
				<h3>淘宝服务</h3><a>更多></a>
				<ul></ul>
				<h4><div class="icon"></div>购物</h4>
				<ul>
					<li>拍卖会</li>
					<li>跳蚤街</li>
					<li>淘金币</li>
					<li>试用中心</li>
					<li>电子书</li>
					<li>全球购</li>
				</ul>
				<br />
				<h4><div  class="icon"></div>生活</h4>
				<br />
				<ul>
					<li>彩票</li>
					<li>电影票</li>
					<li>保险</li>
					<li>视频</li>
					<li>水电煤</li>
					<li>理财</li>
					<li>医药馆</li>
				</ul>
				<br />
				<h4><div  class="icon"></div>互动</h4>
				<br />
				<ul>
					<li>爱逛街</li>
					<li>顽兔</li>
					<li>淘女郎</li>
					<li>淘公仔</li>
					<li>乐活+</li>
					<li>U站</li>
				</ul>
				<br />
				<h4><div  class="icon"></div>工具</h4>
				<br />
				<ul>
					<li>阿里旺旺</li>
					<li>支付宝</li>
					<li>浏览器</li>

				</ul>
				<br />
				<h4><div  class="icon"></div>其他</h4>
				<br />
				<ul>
					<li>良无限</li>
					<li>一城一馆</li>
					<li>品牌特卖</li>
					<li>品牌街</li>
					<li>品牌团购</li>
					<li>天猫原创</li>
				</ul>
			</aside>

CSS代码如下

.icon{
	height: 20px;
	width: 20px;
	display: inline-block;
}
.banner h4 > div:nth-child(2){
	background: url(../img/icon.png) no-repeat fixed ;
	
}
.icon:nth-child(2){
	background: url(../img/icon.png) no-repeat fixed ;
}

上面用类再用nth-child(1)会选中所有的已经被类选择器选中的元素，用nth-child（2）的话，则一个都选不了