标题

    • 1 选择器进阶
      • 1.1 复合选择器
        • 1.1.1 后代选择器
        • 1.1.2 子代选择器
      • 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 层叠性

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 层叠性

更多推荐

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