div与p的各种选择器

最新推荐文章于 2022-11-01 00:10:39 发布
最新推荐文章于 2022-11-01 00:10:39 发布
阅读量3.6k 收藏 14
点赞数 5
分类专栏： 前端基础 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45626944/article/details/109228935
版权

1.div空格p:表示选择div中所有的p

<html>
    <head>
        <title>
            小朋友
        </title>
        <style>
            div p{
                background-color: darkorange;
                color:aliceblue;

            }
        </style>
    
    </head>
    <body>
        <p>Hello1</p>
        <p>Hello2</p>
        <div>
            <p>Hello3</p>
            <p>Hello4</p>
            <span><p>hello5</p></span>
        </div>
        <p>Hello6</p>
        <p>Hello7</p>
    </body>
</html>

div空格p

2.div>p:只选择div的直系子女

<html>
    <head>
        <title>
            小朋友
        </title>
        <style>
            div>p{
                background-color: darkorange;
                color:aliceblue;

            }
        </style>
    
    </head>
    <body>
        <p>Hello1</p>
        <p>Hello2</p>
        <div>
            <p>Hello3</p>
            <p>Hello4</p>
            <span><p>hello5</p></span>
        </div>
        <p>Hello6</p>
        <p>Hello7</p>
    </body>
</html>

div>p
3.div+p:只选择之后的第一个p

<html>
    <head>
        <title>
            小朋友
        </title>
        <style>
            div+p{
                background-color: darkorange;
                color:aliceblue;

            }
        </style>
    
    </head>
    <body>
        <p>Hello1</p>
        <p>Hello2</p>
        <div>
            <p>Hello3</p>
            <p>Hello4</p>
            <span><p>hello5</p></span>
        </div>
        <p>Hello6</p>
        <p>Hello7</p>
    </body>
</html>

div+p
4.div~p:选择div之后所有的p

<html>
    <head>
        <title>
            小朋友
        </title>
        <style>
            div~p{
                background-color: darkorange;
                color:aliceblue;

            }
        </style>
    
    </head>
    <body>
        <p>Hello1</p>
        <p>Hello2</p>
        <div>
            <p>Hello3</p>
            <p>Hello4</p>
            <span><p>hello5</p></span>
        </div>
        <p>Hello6</p>
        <p>Hello7</p>
    </body>
</html>

div~p

就想糊糊涂涂
关注
  • 5
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css选择器及优先级
qq_35501580的博客
01-01 218
后代选择器 div p ：选择div元素里面的所有p元素 子选择器 div &gt; p : 选择父元素为div的所有p元素 同胞选择器 div + p : 选择所有紧跟在div之后的p元素 组选择器 div,p : 选择所有的div和p元素 共同选择器 div.name : 选择所有类名为name的div元素。即同时满足 此外还有id选择器#id，伪类选择器div:hover...
笔试笔记（七）
Angie_Q的博客
08-24 553
1、div>p 选择的是所有父元素为div的p元素 2、clear 属性定义了元素的哪边上不允许出现浮动元素。 clear : none | left | right | both. 对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。  3、在不涉及样式情况下,页面元素的优先显示与标签选用无关。请判断这句话的
div p、div＞p、div+p、div~p、div.a 、div .a、p,span的用法和区别
七十多岁的人了、
10-06 1306
div p、div>p、div+p、div~p、div.a 、p,span的用法和区别 div p ：将所有div标签里面的p标签选中（子标签和孙子辈标签） div>p ：将所有div标签的子标签p选中，不包括孙子辈标签。 div+p：将所有离div相邻的p标签选中 div~p ：将div后面所有的p标签选中 div .content：将选中div下class=content标签 div.content：表示选中class=content的div div span.use...
div p、div＞p、div+p、div~p、div.a 、p,span的用法和区别
余浩的博客
07-19 941
啊
div p、div>p、div+p、div~p、div.a 、p,span的用法和区别
九亿宅男的梦的博客
01-22 1万+
div p、div&gt;p、div+p、div~p、div.a 的用法和区别 div p ：将所有&lt;div&gt;标签里面的&lt;p&gt;标签选中（子标签和孙子辈标签） &lt;style&gt;    div span{color:red;} &lt;/style&gt; &lt;div&gt;   &lt;p&gt;       &lt;span&gt; Hello
JSoup CSS选择器用法大全
最新发布
08-15
下面将详细介绍 JSoup 支持的各种 CSS 选择器及其用法。 1. **基本选择器**： - `*`: 通配符选择器，匹配任何元素。 - `tag`: 按照元素名称选择，如 `div` 选择所有的 `<div>` 元素。 - `#id`: 通过元素的 ID ...
CSS选择器的权重与优先规则分享
09-24
4. 类型选择器和伪元素选择器（如：`div p`）：权值为1。 计算选择器特殊性的方法是将每个等级对应的选择器数量乘以该等级的权值，然后将所有等级的值相加。例如，选择器`#NAV.ACTIVE UL LI A`的特殊性值为100（ID...
css后代选择器使用方法实例
09-25
CSS后代选择器是一种强大的工具，用于在样式表中指定元素的特定子元素或者后代元素的样式。这个选择器允许我们精确地控制文档的结构，并且只应用样式到我们需要的那些部分，而不会影响到其他不相关的元素。在这个...
jQuery选择器之基本选择器与层次选择器
10-24
值得注意的是，层次选择器与jQuery的一些方法有着直接的关系。例如，`$(".one+div")`等价于`$(".one").next("div")`，而`$("#prev~div")`等价于`$("#prev").nextAll("div")`。 理解并熟练运用这些基本选择器和层次...
css 元素选择器的简单实例
09-24
除了`p`选择器，还有其他常见的元素选择器，如`h1`至`h6`用于选择不同级别的标题，`div`用于定义文档分区，`img`用于处理图像，等等。每个HTML标签都可以作为元素选择器来使用，根据需要应用样式。 CSS元素选择器的...
对于div,p等块级元素css如何实现自动换行
09-25
对于div,p等块级元素想必大家并不陌生吧，下面本文为以示例代码方式为大家介绍下使用css如何实现自动换行
CSS-选择器的使用
C、Java知识分享
11-01 1618
对页面元素属性进行修改或者调整,就需要选中页面指定的标签元素,就引出了选择器的概念,可以通过选择器来对页面元素属性进行修改,下面介绍几个基本选择器的种类和使用方法
各类选择器的使用
ljiax_的博客
12-08 474
1.交集选择器:格式:div. {}。选择两个选择器共同的内容。用于指定某一元素下定义了的子元素，可将定义了的元素以独特的方式显示出来。元素较少时使用该选择器比较方便，但在元素较多时使用该选择器就会比较麻烦。 2.并集选择器：格式：div,. {}并集选择器是选择所有指定的选择器内容。 并集选择器可以指定多个的，他们之间使用英文逗号分隔。并集选择器是选择定义了元素中的所有元素，再将它们独特显示出来。不管元素多少，都可以用并集选择器，也不会麻烦。 3.相邻兄弟选择器：格式：div+ {} ...
CSS常用选择器
Lee的博客
06-01 8549
div > p { color: red; } //表示父元素为div的所有p元素 div + p //表示紧接在 <div> 元素之后的所有 <p> 元素 p:first-letter //表示每个p元素的首个字符 p:first-line //表示p元素的首行 p:nth-child(2) // 表示选择属于其父元素的第二个子元素的每个 <p> 元素。 p:nth-last-child(2) //同上 总后向前数 .
2.2.1.2 HTML DIV, SPAN,CSS, 三种引入方式,选择器,边框,尺寸, dispaly转换, 字体, 背景, 浮动及清除, 盒子模型
chengh1993的博客
11-12 662
目录 demo17-div与span demo18-css入门 demo19-引入css的三种方式 demo20-css选择器 demo21-css样式-边框 demo22-css样式-尺寸 demo23-css样式-display转换 demo24-css样式-font demo25-css样式-背景色及背景图 demo26-css样式-浮动 demo27-css样式-清除浮动影响 demo28-css盒子模型 demo29-css案例 demo17-div与span .
前端js获取div的选择器方法
m0_49714202的博客
07-10 2375
前端js获取div的选择器方法
绿叶学习网CSS技术细节
qq_44744450的博客
02-22 2429
引入方式 外联样式表，使用link标签引入，而link 标签放在head标签内 html { background-color: darkgreen; color: azure; font-size: 20px; } ul { background: darkred; padding: 10px; border: 1px solid black; } li { margin-left: 20px; } 内部样式
css选择器，css引入方式，div+css布局
weixin_44992737的博客
06-10 591
css选择器，css引入方式，div+css布局
CSS的四种基本选择器和四种高级选择器
热门推荐
Jack
07-11 9万+
CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。 CSS的选择器分为两大类：基本选择题和扩展选择器。 基本选择器： 标签选择器：针对一类标签 ID选择器：针对某一个特定的标签使用 类选择器：针对你想要的所有标签使用 通用选择器（通配符）：针对所有的标签都适用（不建议使用） 下面来分别讲一讲。 1、标签选择器：选择器的名字代表html页面上的标签...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值