开发者社区> java小工匠> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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-子元素选择器

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
面试官:请说下CSS选择器优先级
面试官:请说下CSS选择器优先级
71 0
***CSS魔法堂:选择器及其优先级
一、前言                                首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器   A. img.thumb:after  B.[data-job="frontend"]::first-letter   C.
702 0
css知多少(6)——选择器的优先级
原文:css知多少(6)——选择器的优先级 1. 引言   上一节《css知多少(5)——选择器》最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明。      上图中,css中的两个选择器都是针对的,而且两个设置的颜色不一样,这里的到底听从谁的命令?   上面还是比较简单的,下面在来一个复杂的:      上图中的该显示成什么颜色呢? 2. 特指度   要解决以上问题,我们需要引入一个概念——特指度(specificity)。
870 0
css 选择器学习笔记
css 选择器学习笔记
53 0
CSS 选择器详解
CSS 选择器详解
3733 0
前端学习笔记(8)css选择器(二)
选择器分类 简单选择器:针对某一特征判断是否选中元素。 复合选择器:连续的简单选择器,根据元素特征判断是否选中单个元素。 复杂选择器:由“(空格)“ “ >” “ ~” “ +” “ ||” 等符号连接的复合选择器,根据父元素或者前序元素检查单个元素。
741 0
前端学习笔记(7)css选择器(一)
选择器分类 简单选择器:针对某一特征判断是否选中元素。 复合选择器:连续的简单选择器,根据元素特征判断是否选中单个元素。 复杂选择器:由“(空格)“ “ >” “ ~” “ +” “ ||” 等符号连接的复合选择器,根据父元素或者前序元素检查单个元素。
829 0
+关注
java小工匠
个人研究方向: 微服务、netty、物联网、mqtt、modbus、工作流、流程设计器、消息中间件、高并发、大数据 、区块链等
103
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载