CSS选择器

最新推荐文章于 2022-09-26 19:29:14 发布

suiseidesu

最新推荐文章于 2022-09-26 19:29:14 发布

阅读量83

点赞数

分类专栏：学习笔记 CSS

本文链接：https://blog.csdn.net/qq_50270170/article/details/108259725

版权

学习笔记同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

选择器

1.元素选择器

用标签名来作为选择则器,选中所有相应的元素

<style type="text/css">
			div{
				font-size: 30px;
				font-family: 楷体;
			}
		</style>
	</head>
	<body>
		<div>元素选择器</div>
		<p>元素选择器</p>
	</body>

2.类选择器

根据class的属性来选择元素,样式定义为:
.className{ xxxxxxxxxxxxxxxxxxx}

<style type="text/css">
			.big{
				width: 200px;
				height: 200px;
				background-color:  #00FF00;
			}
			.small{
				width: 200px;
				height: 200px;
				background-color:  #87CEEB;
			}
		</style>
	</head>
	<body>
		<div class="big"></div>
		<div class="small"></div>
		<div class="big"></div>
		<div class="small"></div>
		<div class="big"></div>
		<div class="small"></div>
		<div class="big"></div>
	</body>

3.id选择器

根据id名来选择元素，样式定义为:
#id{ xxxxxxxxxxxxxxxxxxx}

<style type="text/css">
			#big{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
			#small{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="big"></div>
		<div id="small"></div>
		<div id="big"></div>
		<div id="small"></div>
	</body>

4.属性选择器

在这里插入图片描述

5.关系选择器

E F :选择E元素的后代元素F(所有后代,包括子类,孙类)
E>F:选择E元素的直接后代元素(也就是子类)
E+F:选择E元素的第一个弟弟元素F
E~F:选择E元素的所有弟元素F

6.并选择器

将相同的样式放在一起，类名直接用逗号分开

<style type="text/css">
			.one,.two{
				background-color: greenyellow;
				
			}
			.one{
				width: 200px;
				height: 50px;
			}
			.two{
				width: 50px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="one">one</div>
		<div class="two">two</div>
	</body>

7.通配符选择器

通配符选择器可以选中页面所有的标签
*{xxxxxxxxxxxxx}

<style type="text/css">
			*{
				font-size: 35px;
				color: aqua;
			}
		</style>
	</head>
	<body>
		<div>
			asddsa
			<p>111</p>
			<p>222</p>
			<p>333</p>
			<ui>
				<li>123</li>
				<li>456</li>
				<li>789</li>
			</ui>
		</div>
	</body>

suiseidesu

关注

0
点赞
踩
0

收藏

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

选择器1.元素选择器用标签名来作为选择则器,选中所有相应的元素<style type="text/css"> div{ font-size: 30px; font-family: 楷体; } </style> </head> <body> <div>元素选择器</div> <p>元素选择器</p> </body>2.类选择器根据class的属性
复制链接

扫一扫