常见选择器24

最新推荐文章于 2024-03-09 13:40:17 发布

chen_zan_yu_

最新推荐文章于 2024-03-09 13:40:17 发布

阅读量225

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/chen_zan_yu_/article/details/88717424

版权

CSS 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常见的选择器</title>
		<style type="text/css">
			
			/*
			 * 元素选择器
			 *
			 * 作用:通过元素可以选择页面中的所有指定元素
			 *语法：标签名{} 
			 */
			
			p{
				color:red;
			}
			h1{
				color: red;
			}
			
			/*
			 * id选择器
			 * -通过id属性值选中唯一的一个元素
			 * -语法：
			 * #id属性值{}
			 */
			
			#p1{
				font-size: 20px;
			}
			
			 /* 类选择器
			 * -通过元素的class属性值选中一组值
			 * 语法：
			 * 		.class属性值{}
			 */
			
			.p2{
				color: red;
			}
			
			.hello{
				font-size:50px ;
			}
			
			/*
			 * 为id为p1的元素，class为p2的元素，还有h1，同时设置一个背景颜色
			 */
			
			/*
			 * 选择器分组(并集选择器)
			 * -通过选择器分组可以同时选择多个选择器对应的元素
			 * -语法：
			 * 			选择器1，选择器2，选择器3...选择器n{}
			 */
			
			#p1,.p2,h1{
				background-color:yellow ;
			}
			
			/*
			 * 通配选择器
			 * -他可以用来选中页面中的所有元素
			 * 语法：*{}
			 */
			
			*{
				color: red;
			}
			
			/*
			 * 为拥有class p2 span 元素设置一个背景颜色
			 * 
			 * 复合选择器（交集选择器）
			 * -作用
			 * 		-可以选中同时满足多个选择器的元素
			 * 语法：
			 * 		-选择器1选择器2....选择器n{}
			 */
			span.p2{
				background-color:red ;
			}
		</style>
	</head>
	<body>
		<h1>名侬</h1>
		<p id="p1">美男子</p>
		<p>美男子</p>
		<p>美男子</p>
		<p>美男子</p>
		<!--
        	我们可以为元素设置class属性
        	class属性和id属性类似，
        	只不过class属性可以重复
        	拥有相同class属性值的元素，我们说他们是一组元素
        	可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
       -->
		<p class="p2 hello">美男子</p>
		<p class="p2">美男子</p>
		<p class="p2">美男子</p>
		<p>美男子</p>
		<span class="p2">秃头</span>
	</body>
</html>

chen_zan_yu_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见选择器24

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>常见的选择器</title> <style type="text/css"> /* * 元素选择器 * * 作用:通过元素可以选择页面中的所有...
复制链接

扫一扫