第三章 CSS基础（选择器）

斑马有点困

已于 2022-06-08 16:30:44 修改

阅读量154

点赞数

分类专栏： # web前端笔记文章标签： css html css3

于 2022-05-30 15:10:55 首次发布

本文链接：https://blog.csdn.net/qq_36827283/article/details/125046914

版权

笔记同时被 2 个专栏收录

56 篇文章 1 订阅

订阅专栏

web前端

14 篇文章 0 订阅

订阅专栏

CSS 简介

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

样式解决了一个普遍的问题

HTML 标签原本被设计为用于定义文档内容。通过使用

 <h1>、<p>、<table>

这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。

由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。

所有的主流浏览器均支持层叠样式表

优势

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录

HTML中引入CSS样式

行内样式

使用style属性引入CSS样式，所有的标签都有style属性，通过style属性可以设置样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

<h1 style="color: darkblue;">这是css样式--行内样式</h1>
		<h1>原来的h1标签</h1>

内部样式表

CSS代码写在head的style标签中
优点
方便在同页面中修改样式
缺点
不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fYJS6FFk-1653894429591)(D:\课件\笔记\CSS.assets\image-20220526142135095.png)]$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css样式</title>
		<style>
			/* style标签用来引入css样式 */
			p{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1 style="color: darkblue;">
			这是css样式--行内样式</h1>
		<h1>原来的h1标签</h1>
		<p>
			5月23日，滴滴公告称，将推进ADS（American Depositary Shares， 即美国存托股份）
			从纽约证交所退市。滴滴计划于6月2日或之后向美国证券交易委员会递交FORM 25表格，
			以将其美国存托凭证从纽约证券交易所除名。
			这距离2021年6月30日滴滴在纽交所上市，整整过去了307天。
		</p>
	</body>
</html>

外部样式表

外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式

链接式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pu0Hq5XV-1653894429592)(D:\课件\笔记\CSS.assets\image-20220526142837703.png)]$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css样式</title>
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<ul>
			<li>5月23日，滴滴公告称，将推进ADS（American D</li>
			<li>5月23日，滴滴公告称，将推进ADS（American D</li>
			<li>5月23日，滴滴公告称，将推进ADS（American D</li>
			<li>5月23日，滴滴公告称，将推进ADS（American D</li>
		</ul>
	</body>
</html>

导入式

<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

优先级

行内样式 > 外部/内部样式

外部样式和内部样式同级，会根据引入的先后顺序，覆盖样式效果

CSS3基本选择器

标签选择器

HTML标签作为标签选择器的名称

<h1>…<h6>、<p>、<img/></h1>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-udP1l99B-1653894429594)(D:\课件\笔记\CSS.assets\image-20220526145815206.png)]$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css样式</title>
		<style>
			/* style标签用来引入css样式 */
			p{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1 style="color: darkblue;">
			这是css样式--行内样式</h1>
		<h1>原来的h1标签</h1>
		<p>
			5月23日，滴滴公告称，将推进ADS（American Depositary Shares， 即美国存托股份）
			从纽约证交所退市。滴滴计划于6月2日或之后向美国证券交易委员会递交FORM 25表格，
			以将其美国存托凭证从纽约证券交易所除名。
			这距离2021年6月30日滴滴在纽交所上市，整整过去了307天。
		</p>
	</body>
</html>

类选择器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XY5nRLmB-1653894429595)(D:\课件\笔记\CSS.assets\image-20220526145947463.png)]$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>望庐山瀑布</title>
		<style>
			.a{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<h1>望庐山瀑布</h1>
		<p class="a">日照香炉生紫烟</p>
		<p class="a">遥看瀑布挂前川</p>
		<p>飞流直下三千尺</p>
		<p>疑是银河落九天</p>
	</body>
</html>

ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 “#” 来定义。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5lC0w36E-1653894429595)(D:\课件\笔记\CSS.assets\image-20220526150504311.png)]$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>望庐山瀑布</title>
		<style>
			.a{
				color: aqua;
			}
			#a{
				color: blue;
			}
		</style>
	</head>
	<body>
		<h1>望庐山瀑布</h1>
		<p class="a">日照香炉生紫烟</p>
		<p class="a">遥看瀑布挂前川</p>
		<p id="a">飞流直下三千尺</p>
		<p>疑是银河落九天</p>
	</body>
</html>

注意：id 属性只能在每个 HTML 文档中出现一次

优先级

id>class>标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>望庐山瀑布</title>
		<style>
			p{
				color: red;
			}
			.a{
				color: aqua;
			}
			#a{
				color: blue;
			}
		</style>
	</head>
	<body>
		<h1>望庐山瀑布</h1>
		<p class="a" id="a">日照香炉生紫烟</p>
		<p class="a">遥看瀑布挂前川</p>
		<p id="a">飞流直下三千尺</p>
		<p>疑是银河落九天</p>
	</body>
</html>

层次选择器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QTDIJr2b-1653894429596)(D:\课件\笔记\CSS.assets\image-20220527081254970.png)]$

后代选择器

后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层次</title>
		<style>
			/* 后代 E F body中所有的p标签 */
			body p{
				background: red;
			}
		</style>
	</head>
	<body>
		<p>1</p>
		<p>1</p>
		<p>1</p>
		<ul>
			<li><p>1</p></li>
			<li><p>1</p></li>
			<li><p>1</p></li>
			<li><p>1</p></li>
		</ul>
	</body>
</html>

子选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层次</title>
		<style>
			/* 后代 E F body中所有的p标签 */
			body p{
				background: red;
			}
			/*子选择器   E>F   E的直接子元素F,不包含间接的子元素*/
			body>p{
				background: blue;
			}
		</style>
	</head>
	<body>
		<p>1</p>
		<p>1</p>
		<p>1</p>
		<ul>
			<li><p>1</p></li>
			<li><p>1</p></li>
			<li><p>1</p></li>
			<li><p>1</p></li>
		</ul>
	</body>
</html>

相邻兄弟选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层次</title>
		<style>
			/* 后代 E F body中所有的p标签 */
			body p{
				background: red;
			}
			/*子选择器   E>F   E的直接子元素F,不包含间接的子元素*/
			body>p{
				background: blue;
			}
			/**相邻兄弟选择器 E+F  .p1 相邻的 p标签*/
			.p1+p{
				background: yellow;
			}
			
		</style>
	</head>
	<body>
		<p class="p1">1</p>
		<p>2</p>
		<p>3</p>
		<ul>
			<li><p>4</p></li>
			<li><p>5</p></li>
			<li><p>6</p></li>
			<li><p>7</p></li>
		</ul>
	</body>
</html>

通用兄弟选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层次</title>
		<style>
			/* 后代 E F body中所有的p标签 */
			body p{
				background: red;
			}
			/*子选择器   E>F   E的直接子元素F,不包含间接的子元素*/
			body>p{
				background: blue;
			}
			/**相邻兄弟选择器 E+F  .p1 相邻的 p标签*/
			.p1+p{
				background: yellow;
			}
			/* 通用兄弟选择器 E~F 和E同级的F */
			.p1~p{
				background: gray;
			}
		</style>
	</head>
	<body>
		<p class="p1">1</p>
		<p class="p2">2</p>
		<p>3</p>
		<ul>
			<li><p>4</p></li>
			<li><p>5</p></li>
			<li><p>6</p></li>
			<li><p>7</p></li>
		</ul>
	</body>
</html>

结构伪类选择器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o9Mh9TLy-1653894429596)(D:\课件\笔记\CSS.assets\image-20220527092202529.png)]$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构伪类</title>
		<style>
			/* ul中的第一个li */
			ul li:first-child{
				background: red;
			}
			/* ul中的最后一个li */
			ul li:last-child{
				background: blue;
			}
			/* 所有p标签的第3个 */
			p:nth-child(3){
				background: yellow;
			}
			/* body中的第2个p */
			body p:nth-of-type(2){
				background: yellowgreen;
			}
			
		</style>
	</head>
	<body>
		<p class="p1">1</p>
		<p class="p2">2</p>
		<p>3</p>
		<ul>
			<li><p>4</p></li>
			<li><p>5</p></li>
			<li><p>6</p></li>
			<li><p>7</p></li>
		</ul>
	</body>
</html>

属性选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Og5S4IR2-1653894429597)(D:\课件\笔记\CSS.assets\image-20220527100635081.png)]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构伪类</title>
		<style>
			a{  
				display: block;
				height: 60px;
				width: 60px;
				background: gray;
				float: left;
				margin: 10px;
				text-align: center;
				line-height: 60px;
				font-size: 20px;
			}
			/** a[id] a标签只要有id属性*/
			a[id]{
				background: yellow;
			}
			/** a[class=a3] class属性等于a3
			 E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中
			 */
			a[class=a3]{
				background: yellowgreen;
			}
			/*a[nam^=a]  nam属性值以a开头的*/
			a[nam^=a]{background-color: aqua;}
			/*a[nam$=a]  nam属性值以a结尾的*/
			a[nam$=a]{background-color: chocolate;}
			/*a[nam*=a]  nam属性值含有a的*/
			a[nam*=a]{background-color:khaki;}
		</style>
	</head>
	<body>
		<a href="#" id="a1">1</a>
		<a href="#" class="a3">2</a>
		<a href="#" class="a3">3</a>
		<a href="#" nam="a4">4</a>
		<a href="#"  nam="a5">5</a>
		<a href="#" nam="b5a">6</a>
		<a href="#">7</a>
		<a href="#">8</a>
		<a href="#" id="a9">9</a>
	</body>
</html>