【Css】css中class之间＞(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解（转载，笔记用）

css中“>”(大于号)、"~"(波浪号)、" "(空格)、","(逗号)、"+"(加号)详解 - 知乎对新手来说，在布局中通常搞不清这些符号的用法，今天就来为大家详细讲解一下。 1、>(大于号) 子元素选择器 >大于号的意思是选择某元素后面的第一代子元素案例<style type="text/css"> h1&…https://zhuanlan.zhihu.com/p/180011240

对新手来说，在布局中通常搞不清这些符号的用法，今天就来为大家详细讲解一下。

1、>(大于号) 子元素选择器

>大于号的意思是选择某元素后面的第一代子元素

案例

<style type="text/css">h1>strong {color: red;}
</style><body><h1><strong>一代子元素</strong></h1><h1><span><strong>二代子元素</strong></span></h1>
</body>

2、~（波浪号）

~波浪号的意思是选取某个元素之后的所有相同元素

.box~h2 这句就是选取 .box 后面所有的 h2

这个选择器两种元素必须处于同一个父元素内，被选取的元素不必直接紧随。

<style type="text/css">.box~h2{background: aqua;}
</style><body><div class="box"></div><h2>1</h2><em>2</em><h2>3</h2><h2>4</h2>
</body>

3、（空格）派生选择器

选择某元素后面的所有子元素

派生选择器允许你根据文档的上下文关系来确定某个标签的样式

这里还是用第一个例子

<style type="text/css">h1 strong {color: red;}
</style><body><h1><strong>一代子元素</strong></h1><h1><span><strong>二代子元素</strong></span></h1>
</body>

4、,（逗号）群组选择器

可以对选择器进行分组，被分组的选择器就可以分享相同的声明

<style type="text/css">h1,h2,h3{color: blue;}h4,h5,h6{color: red;}
</style><body><h1>案例1</h1><h2>案例1</h2><h3>案例1</h3><h4>案例2</h4><h5>案例2</h5><h6>案例2</h6>
</body>

5、+（加号）相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素

<style type="text/css">span+em{color: red;}
</style><body><h1><span>案例1</span><em>案例2</em></h1>
</body>

【Css】css中class之间＞(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解（转载，笔记用）相关推荐

php中单引号,php中的单引号、双引号和转义字符详解
PHP单引号及双引号均可以修饰字符串类型的数据,如果修饰的字符串中含有变量(例$name):最大的区别是: 双引号会替换变量的值,而单引号会把它当做字符串输出. 例如: 结果: 字符串$name 字符 ...
html内联元素和块元素的特性,HTML中块级元素和内联元素的特性详解
原标题:HTML中块级元素和内联元素的特性详解在网站布局中经常会遇到元素进行居中的时候,设置了text-align:center:margin:0 auto;有时候会起作用,但有时候对居中无效,刚接 ...
python中的json函数_python中装饰器、内置函数、json的详解
装饰器装饰器本质上是一个Python函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能,装饰器的返回值也是一个函数对象. 先看简单例子: def run(): time.sleep(1 ...
java none怎么用tomcat_在docker中部署tomcat并且部署java应用程序的步骤详解
先给大家简单说下Docker的概念 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是 ...
python的继承用法_【后端开发】python中继承有什么用法？python继承的用法详解
本篇文章给大家带来的内容是关于python中继承有什么用法?python继承的用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 面向对象三大特征 1.封装:根据职责将属性和方法 ...
ios开发读取剪切板的内容_iOS中管理剪切板的UIPasteboard粘贴板类用法详解
一.自带剪切板操作的原生UI控件在iOS的UI系统中,有3个控件自带剪切板操作,分别是UITextField.UITextView与UIWebView.在这些控件的文字交互处进行长按手势可以在屏幕视图 ...
c++中.dll与.lib文件的生成与使用的详解
c++中.dll与.lib文件的生成与使用的详解 --------------------------------------------------------------------------- ...
python的继承用法_python中继承有什么用法？python继承的用法详解
本篇文章给大家带来的内容是关于python中继承有什么用法?python继承的用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 面向对象三大特征 1.封装:根据职责将属性和方法 ...
python跨函数调用变量_对python中不同模块(函数、类、变量)的调用详解
首先,先介绍两种引入模块的方法. 法一:将整个文件引入 import 文件名文件名.函数名( ) / 文件名.类名通过这个方法可以运行另外一个文件里的函数法二:只引入某个文件中一个类/函数/变量 ...

【Css】css中class之间＞(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解（转载，笔记用）

1、>(大于号) 子元素选择器

2、~（波浪号）

3、（空格）派生选择器

4、,（逗号）群组选择器

5、+（加号）相邻兄弟选择器

【Css】css中class之间＞(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解（转载，笔记用）相关推荐

最新文章

热门文章

【Css】css中class之间＞(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解（转载，笔记用）

1、>(大于号) 子元素选择器

2、~（波浪号）

3、（空格） 派生选择器

4、,（逗号）群组选择器

5、+（加号）相邻兄弟选择器

【Css】css中class之间＞(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解（转载，笔记用）相关推荐

最新文章

热门文章

3、（空格）派生选择器