CSS基础(part2)--CSS选择器

最新推荐文章于 2023-12-13 17:58:37 发布

GoatGui

最新推荐文章于 2023-12-13 17:58:37 发布

阅读量363

点赞数 1

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

本文链接：https://blog.csdn.net/m0_37422217/article/details/107001843

版权

前端专栏收录该内容

49 篇文章 0 订阅

订阅专栏

学习笔记，仅供参考，有错必纠

文章目录

- CSS

CSS

CSS语法

由上图可知，CSS语法由选择器, 属性声明, 花括号, 冒号, 分号组成，且css对换行和空格不敏感。

比如：

p {
color: green; /*设置前景色，也就字体的颜色为绿色*/
background-color: red;/*设置背景色为红色*/
}

CSS简单属性

常用属性

属性	含义
width	设置宽度,单位px像素
height	高度
color	前景色(文字颜色)
background-color	背景色
font-size	字体大小

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS属性</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: yellow;
			color: red;
		}
	</style>

</head>
<body>
	<div>
		俺是div标签
	</div>
	
</body>
</html>

页面：

CSS注释

语法：

/*单行注释*/
/*
多行注释
*/

注意，注释不能嵌套。

CSS选择器

通配符选择器

通配符选择器用*星号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素，其基本语法格式如下：

* {
    属性1: 属性值1;
    属性2: 属性值2;
}

例如：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>

	<style>
		* {
			margin: 0;   /*外边距*/
			padding: 0;  /*内边距*/
			color: green;
		}

	</style>
</head>
<body>
	<h1>通配符选择器</h1>
	<p>
		欢迎光临！
	</p>
	<span>OK!</span>
</body>
</html>

页面：

注意事项

通配符的穿透能力很强，优先级高于继承的样式，会覆盖继承的样式。

ID选择器

ID选择器，可以帮助我们选择当前页面中唯一的id值的标签，也就是根据标签的id属性值进行选取，进而设置样式。ID选择器的符号用#井号表示

如果我们的页面中有两个p标签，我想设置上面一个标签的像素为30px，下面一个p标签的像素为10px，那么我们可以通过设置标签id+标签选择器的方式实现，例如：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>

	<style>
		#p1 {
			font-size: 30px;
		}

		#p2 {
			font-size: 10px;
		}

	</style>
</head>
<body>
	<h1>ID选择器</h1>
	<p id="p1">
		我是第1个p标签
	</p>
	<p id="p2">
		我是第2个p标签
	</p>
</body>
</html>

页面：

ID选择器的命名规范
- 只允许出现字母(大小写严格区分)，数字，下划线
- 只允许以字母开头
- 命名没有长度限制，但不能太长
- 不允许出现标签名

类选择器

类选择器，是对HTML标签中class属性进行选择。css类选择器的选择符为.，例如：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>

	<style>
		.Web {
			color: green;
			font-size: 20px;
		}

	</style>
</head>
<body>
	<h1>类选择器</h1>
	<p class="Web">
		我是第1个p标签
	</p>
	<p>
		我是第2个p标签
	</p>
	<p class="Web">
		我是第3个p标签
	</p>
	<ul>
		<li>小黄</li>
		<li class="Web">小白</li>
		<li>小黑</li>
	</ul>
</body>
</html>

页面：

标签可以的class属性可以包含多个值，这些值在class标签中用空格隔开：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>

	<style>
		.Web {
			color: green;
			font-size: 20px;
		}
		.data {
			background-color: yellow;
		}
	</style>
</head>
<body>
	<h1>类选择器</h1>
	<p class="Web">
		我是第1个p标签
	</p>
	<p class="data">
		我是第2个p标签
	</p>
	<ul>
		<li>小黄</li>
		<li class="Web data">小白</li>
		<li>小黑</li>
	</ul>
</body>
</html>

页面：

ID选择器和类选择器的区别

相同的class属性值，可以在HTML页面中出现多次，而ID属性值，则只能在HTML页面中出现一次；

一个class属性可以有多个值，也就是说一个标签可以有多个class值；

建议大家可以多实用类选择器(不是我建议的)。

CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，详情见下面的知识点。

标签指定式选择器(既…又…)

标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或者id选择器，两个选择器之间不能有空格，例如：

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>

	<style>
		p.Web {
			color: green;
			font-size: 20px;
		}

	</style>
</head>
<body>
	<h1>复合选择器</h1>

	<p class="Web">
		我是第1个p标签
	</p>

	<p class="data">
		我是第2个p标签
	</p>

	<ul>
		<li>小黄</li>
		<li class="Web">小白</li>
		<li>小黑</li>
	</ul>
</body>
</html>

页面：

后代选择器(包含选择器)

后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代，例如：

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>

	<style>
		.box li {
			color: green;
			font-size: 20px;
		}
		div a {
			background-color: yellow;
		}
	</style>
</head>
<body>
	<h1>复合选择器</h1>

	<div class="box">
		<ul>
			<li>小黄</li>
			<li>小黑</li>
			<li>小白</li>
		</ul>

		<ul>
			<li>北京</li>
			<li>上海</li>
		</ul>

		<p>
			俺是p标签
		</p>
	</div>
	<div>
		<ul>
			<li>AAA</li>
			<li>BBB</li>
			<li>CCC</li>
		</ul>

		<a href="#">俺是a标签</a>
	</div>	
</body>
</html>

页面：

并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器(包括标记选择器、class类选择器、id选择器等)，都可以作为并集选择器的一部分，如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式，例如：

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>

	<style>
		p, h2, span {
			background-color: yellow;
			color: red;
		}

	</style>
</head>
<body>

	<h1>复合选择器</h1>
	<p>
		俺是p1
	</p>

	<h2>俺是h2</h2>

	<span>俺是span</span>

	<ul>
		<li>小白</li>
		<li>小黑</li>
		<li>小黄</li>
	</ul>

</body>
</html>

页面：

子元素选择器

子元素选择器，是让选择器只能选择儿子辈的元素，而不会选择孙子辈的元素。例如：

h1>strong { color: red; }

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>

	<style>
		div>p {
			background-color: yellow;
			color: red;
		}

	</style>
</head>
<body>

	<h1>复合选择器</h1>
	<div>
		<p>俺是p1</p>
		<p>俺是p2</p>
		<p>俺是p3</p>

		<ul>
			<li><p>俺是列表里的p1</p></li>
			<li><p>俺是列表里的p2</p></li>
			<li><p>俺是列表里的p3</p></li>
		</ul>
	</div>
	<p>俺是P</p>


</body>
</html>

页面：

属性选择器

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>

	<style>
		h2[id] { color: red; }

		/*把同时拥有id和class属性的h2标题选出来然后设置字体大小为30px*/
		h2[id][class] { font-size: 50px; }
		input[type="text"] { background-color: purple; }
		input[type="password"][class*="know"] { background-color: yellow; }
	</style>
</head>
<body>
	<h1>属性选择器</h1>
	<h2 id="aside-title">俺是一直小白兔</h2>
	<h2 id="aside-title" class="aside-msg">爱吃提草和兔粮</h2>	

	<input type="text" class="whoknow">
	<input type="password" class="whocare">
	<input type="password" class="whoknow">
</body>
</html>

页面：

GoatGui

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础(part2)--CSS选择器

学习笔记，仅供参考，有错必纠文章目录CSSCSS语法CSS简单属性CSS注释CSS选择器通配符选择器ID选择器类选择器CSS复合选择器标签指定式选择器(既...又...)后代选择器(包含选择器)并集选择器子元素选择器属性选择器CSSCSS语法由上图可知，CSS语法由选择器, 属性声明, 花括号, 冒号, 分号组成，且css对换行和空格不敏感。比如：p {color: green; /*设置前景色，也就字体的颜色为绿色*/background-color: red;/*设置背景色为
复制链接

扫一扫