博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
子选择器、相邻兄弟选择器
阅读量:5354 次
发布时间:2019-06-15

本文共 735 字,大约阅读时间需要 2 分钟。

      今天新学习的关于css的各种选择器,其中子选择器和相邻兄弟选择器比较重要,可以大大的减少文档中class特性的数量。下面用一个简单的例子介绍一下他们的用处。

      事例中需要表达的样式为: 第一个段落无边框也无背景色;

                                        所有<div>中的段落都有边框;

                                        最后3个段落背景色为灰色;

 
1  2  3 
4 相邻兄弟选择器 5 10 11 12 13

Paragraph One:not inside a div element.

14
15

Paragraph One: inside a div element.

16

Paragraph Two: inside a div element.

17

Paragraph Three: inside a div element.

18

Paragraph Four: inside a div element.

19

Paragraph Five: inside a div element.

20
21 22 23
 
    其中,div>p{}是子选择器的用法,他的意思是选择器将匹配任何作为
元素的直接子元素

,因为事例中第一条

元素不需要有边框和背景,我们只对

元素中的

元素加以控制。

      p+p+p{}是相邻兄弟选择器的用法,他的意思是希望所有两个条段落之后的<p>元素不同于其他的<p>元素。 

 

转载于:https://www.cnblogs.com/zhaohualu/p/3724056.html

你可能感兴趣的文章
十一、类型转换
查看>>
面试内容,值得一看
查看>>
UILabel
查看>>
【热门技术】三种SEO方式
查看>>
[Hades_技术]哈迪斯初级技术应用
查看>>
SQLiteOpenHelper
查看>>
Luogu P1141 01迷宫【搜索/dfs】By cellur925
查看>>
js onclick事件传参
查看>>
WiCloud 商业Wi-Fi管理平台
查看>>
团队项目--未完待续
查看>>
双重标准,我该怎么解决
查看>>
python中的网页标签等字符处理
查看>>
Mybatis输入类型和结果类型
查看>>
Linux常用命令(五)
查看>>
Linux常用命令(四)
查看>>
Linux常用命令(六)
查看>>
Linux常用命令(六)
查看>>
Linux常用命令(八)
查看>>
Linux常用命令(七)
查看>>
Linux常用命令(九)
查看>>