CSS-选择器4-后代选择器

简介: CSS选择器-系列文章1、后代选择器div p选择div内部出现的所有p元素,不管p元素嵌套的多少层。2、效果演示 后代选择器 #id1 p{ color: red; ...

CSS选择器-系列文章

1、后代选择器

div p选择div内部出现的所有p元素,不管p元素嵌套的多少层。

2、效果演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
        #id1 p{
            color: red;
        }
    </style>
</head>
<body>
    <div id="id1">
        <div id="id2">
            <div id="id3"></div>
            <p>内部p元素</p>
        </div>
        <p>外部p元素</p>
        <p>外部p2元素</p>
    </div>
</body>
</html>

运行效果:

image.png

CSS选择器-系列文章
下一节 选择器5-子元素选择器

相关文章
|
6天前
|
前端开发
CSS选择器详解与应用实例
CSS选择器详解与应用实例
109 44
|
6天前
|
前端开发 开发者
CSS伪类选择器:增强内容表现力的利器
CSS伪类选择器:增强内容表现力的利器
12 4
|
2天前
|
前端开发
前端 CSS 经典:好用的 CSS 选择器
前端 CSS 经典:好用的 CSS 选择器
5 0
|
2天前
|
前端开发
CSS2(一):CSS选择器(2)
CSS2(一):CSS选择器(2)
5 0
|
2天前
|
前端开发
CSS2(一):CSS选择器(1)
CSS2(一):CSS选择器(1)
8 0
|
7天前
|
前端开发
CSS 选择器优先级详解及实例演示
CSS 选择器优先级详解及实例演示
5 0
|
7天前
|
前端开发 开发者
CSS 选择器与相关规则详解
CSS 选择器与相关规则详解
8 0
|
8天前
|
前端开发
技术经验分享:CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
技术经验分享:CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
|
9天前
|
移动开发 前端开发 JavaScript
CSS3 选择器魔法秀:让你的网页焕然一新
CSS3 选择器魔法秀:让你的网页焕然一新
|
9天前
|
前端开发 JavaScript 索引
详细解读CSS选择器分类大全
详细解读CSS选择器分类大全