【温故知新】CSS学习笔记（后代和子代选择器）

后代和子代选择器

CSS的选择器除了之前介绍的基本选择器之外，还有符合选择器，可以处理一些基本选择器无法处理的难题。

1、后代选择器

比如下面的例子，我们需要将所有的“Hello”选择出来，当然我们可以使用类选择器，但是要是p标签的数量有N个，岂不是要累死人的节奏。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试</title>
</head>
<body><div>和平精英</div><div>刺激战场</div><div><p>Hello</p></div><div><p>Hello</p></div><p>魔兽世界</p><p>灌篮高手</p>
</body>
</html>

这里就可以使用到后代选择器，后代选择器又称为包含选择器，用来选择元素或者元素组的后代，写法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开，当标签发生嵌套时，内层标签就成为了外层标签的后代。

比如上面的例子，我们就可以这样写：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试</title><style>div p{color:deeppink;}</style>
</head>
<body><div>和平精英</div><div>刺激战场</div><div><p>Hello</p></div><div><p>Hello</p></div><p>魔兽世界</p><p>灌篮高手</p>
</body>
</html>

扩展一下，只要中间包含空格的都将称之为后代选择器，那么将后一个“Hello”变成紫色，我们就可以这样写：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试</title><style>div p{color:deeppink;}.hello p{color: purple;}</style>
</head>
<body><div>和平精英</div><div>刺激战场</div><div><p>Hello</p></div><div class="hello"><p>Hello</p></div><p>魔兽世界</p><p>灌篮高手</p>
</body>
</html>

2、子代选择器

跟后代选择器相对的还有子代选择器。

比如下面的例子，我们需要将“一级菜单”变成粉色，要是直接使用上面讲的后代选择器（所有的后代），那么所有的菜单都将变成粉色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>子代选择器</title><style>ul li a{color: pink;}</style>
</head>
<body><ul><li><a href="#">一级菜单</a><div><a href="#">二级菜单</a><a href="#">二级菜单</a><a href="#">二级菜单</a></div>       </li></ul>
</body>
</html>

子代选择器的话我们需要用“>”进行分割，比如上面的例子，第一个“a”（也就是一级菜单），它是“li”的亲儿子，下面的顶多算他的孙子，那么我们要把一级菜单选出来就可以这样写：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>子代选择器</title><style>ul li > a{color: pink;}</style>
</head>
<body><ul><li><a href="#">一级菜单</a><div><a href="#">二级菜单</a><a href="#">二级菜单</a><a href="#">二级菜单</a></div>       </li></ul>
</body>
</html>

【温故知新】CSS学习笔记（后代和子代选择器）相关推荐

CSS学习笔记 #20201119
CSS学习笔记 #20201119 目录文章目录 CSS学习笔记 #20201119 目录引言选择器权值样式引言 CSS能搭配HTML文档,将网页繁杂的样式信息从HTML文档中相对独 ...
CSS学习笔记｜MDN-CSS选择器
记录在MDN学习CSS中的一些个人笔记. 选择器种类通配选择器或叫全局选择器.选中所有元素. * {} 标签.类.ID选择器标签选择器.选择所有的 h1 元素 h1 { } 类选择器.选择类名有 ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS之后代、子代选择器的区别
后代.子代选择器的区别子代选择器后代选择器子代选择器后代选择器子代选择器只选中父级元素的亲一代,父子级之间用大于号">"连接后代选择器选中的是指定元素的所有后代, ...
CSS学习笔记（详细）- 基础
CSS学习笔记从零开始代码风格样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器基础选择器标签选择器类选择器 - 开发最常用多类名 i ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
Web前端 html css学习笔记（更新）
HTML CSS学习笔记 2021/9/29 网页简介 HTML简介第一个网页自结束标签和注释文档声明进制字符编码完整的文档结构 2021/9/30 VScode安装及使用实体 meta ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...

【温故知新】CSS学习笔记（后代和子代选择器）

后代和子代选择器

【温故知新】CSS学习笔记（后代和子代选择器）相关推荐

最新文章

热门文章