【CSS进阶】黑马程序员web前端开发入门（四）视频笔记

最新推荐文章于 2022-09-29 17:12:52 发布

20AD01

最新推荐文章于 2022-09-29 17:12:52 发布

阅读量5.8k

点赞数

文章标签：前端 css 音视频

本文链接：https://blog.csdn.net/qq_43437193/article/details/122567782

版权

1 选择器进阶

1.1 复合选择器

1.1.1 后代选择器

下面代码将显示一个基础的 p标签 和一个红色的 div的后代p

<head>
	<style>
		div p {
			color: red;
		}
	</style>
</head>
<body>
	<p>p标签</p>
	<div>
		<p>div的后代p</p>
	</div>
</body>

1.1.2 子代选择器

下面代码将显示红色的 这是div里的a 和红色的 这是div里的p里的a

<head>
	<style>
		div a {
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<a href="#">这是div里的a</a>
		<p>
			<a href="#">这是div里的p里的a</a>
		</p>
	</div>
</body>

下面代码将显示红色的 这是div里的a 和基础的 这是div里的p里的a

<head>
	<style>
		div>a {
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<a href="#">这是div里的a</a>
		<p>
			<a href="#">这是div里的p里的a</a>
		</p>
	</div>
</body>

1.2 并集选择器

在这里插入图片描述

1.3 交集选择器

在这里插入图片描述

1.4 hover伪类选择器

在这里插入图片描述

1.5 Emmet语法

在这里插入图片描述

2 背景相关属性

2.1 背景颜色

2.2 背景图片

在这里插入图片描述

2.3 背景平铺

在这里插入图片描述

2.4 背景位置

在这里插入图片描述

2.5 背景相关属性连写

拓展

3 元素显示模式

3.1 块级元素

在这里插入图片描述

3.2 行内元素

在这里插入图片描述

3.3 行内块元素

在这里插入图片描述

3.4 元素显示模式转换

在这里插入图片描述

拓展

在这里插入图片描述

4 CSS特性

在这里插入图片描述

4.1 继承性

控制文字的属性都能继承，不是控制文字的属性都不能继承

4.2 层叠性

20AD01

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【CSS进阶】黑马程序员web前端开发入门（四）视频笔记

标题1 选择器进阶1.1 复合选择器1.1.1 后代选择器1.2 并集选择器1.3 交集选择器1.4 hover伪类选择器1.5 Emmet语法2 背景相关属性3 元素显示模式4 CSS特性1 选择器进阶1.1 复合选择器1.1.1 后代选择器1.2 并集选择器1.3 交集选择器1.4 hover伪类选择器1.5 Emmet语法2 背景相关属性3 元素显示模式4 CSS特性...
复制链接

扫一扫