css3选择器详解

最新推荐文章于 2024-05-22 14:36:42 发布

VIP文章 chq_yys

最新推荐文章于 2024-05-22 14:36:42 发布

阅读量1.7k

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/qq_38390669/article/details/109021570

版权

10类选择器

1.基本选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>使用css3基本选择器</title>
</head>
<body>
<ul class="clearfix demo">
	<li class="first" id="first">1</li>
	<li class="active">2</li>
	<li class="important item">3</li>
	<li class="important">4</li>
	<li class="item">5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li class="last" id="last">10</li>
</ul>
</body>
</html>
<style type="text/css">
	*{
    
		margin: 0;
		padding: 0;
	}
	/*清除浮动效果*/
	.clearfix:after,.clearfix:before{
    
		display: table;
		content: ""
	}
	.clearfix:after{
    
		clear: both;
	
	}
	.demo{
    
		width: 250px;
		border:1px solid #ccc;
		padding: 10px;
		/*上下外边距20px 元素水平居中*/
		margin: 20px auto;
	}
	li{
    
		/*list-style-type ， list-style-position ， list-style-image*/
		/*https://www.cnblogs.com/ymj0906/archive/2012/06/15/2550084.html*/
		/*隐藏列表项*/
		list-style: none outside none;
		float: left;
		height: 20px;
		line-height: 20px;
		width: 20px;
		border-radius: 10px;
		text-align: center;
		background: pink;
		color: green;
		margin-right: 5px;
	}
</style>

效果如图所示
在这里插入图片描述

通配符选择器

使用通配符选择器改变背景色
将元素类名为demo下的所有元素背景色设置为橙色

/*将元素类名为demo下的所有元素背景色设置为橙色*/
	.demo *{
		background: orange;
	}

在这里插入图片描述

元素选择器

列表ul的背景色将变成灰色

ul {
		background: grey;
	}

在这里插入图片描述

id选择器

#first{
		background: lime;
		color: #000;
	}
	#last{
		background: #000;
		color: lime;
	}

在这里插入图片描述

类选择器

.item{
		background: green;
		color: #fff;
		font-weight: bold;
	}

在这里插入图片描述

多类选择器

如果一个多类选择器包含的类名中其中有一个不存在，这个选择器将无法找到相匹配的元素
列表3同时具有important和item类名
列表4只有important类名
列表5只有item类名

.item{
		background: green;
		color: #fff;
		font-weight: bold;
	}
	.item.important{
		background: red;
	}

在这里插入图片描述

带标签的类名选择器

仅需要对ul为”block”定义样式

ul.block{
		background: #ccc;
	}

群组选择器

将具有相同样式的元素分组在一起，每个选择器之间用逗号隔开
“selector1,selector2”表示选择匹配为selector1和selector2的所有元素

2.层次选择器

主要层次关系包括后代父子相邻兄弟和通用兄弟几种关系
在这里插入图片描述

举例说明

<!DOCTYPE html>
<html>

最低0.47元/天解锁文章

chq_yys

关注

0
点赞
踩
5

收藏

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

1.基本选择器<!DOCTYPE html><html><head> <title>使用css3基本选择器</title></head><body><ul class="clearfix demo"> <li class="first" id="first">1</li> <li class="active">2</li> <li cl.
复制链接

扫一扫