css里面的.box + .box 表示啥意思?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css里面的.box + .box 表示啥意思?相关的知识,希望对你有一定的参考价值。

参考技术A 这是个CSS的相邻同胞选择器。
.box + .box 意思就是:选择紧邻第一个box元素的同胞box元素。
这俩类名一样,解释起来有点混乱。
我举个例子。

例如:
<div class="box1"></div>
<h1 class="h1-1">标题</h1>
<div class="box2">
<h1 class="h1-2">标题</h1>
<p>文章段落</p>
</div>
如果我这么写:.box1 + h1 ,那么我选择的就是类名叫.h1-1的元素。
如果:.box2 + h1 ,它不会选择任何元素,因为.box2的下面没有一个叫h1的同胞元素。
如果:h1 + div ,那么会选择.box2的div元素。

第一个元素 + 第二个元素
这个选择器只会选择 紧邻第一个元素 并且是在第一个元素下面的同胞级元素

上面那段代码,如果你写 :.box1 + .box2 将没有效果,因为他们中间夹了个h1元素。
但是有一个选择器可以实现,就是.box1 ~ .box2 同胞选择器。

能力有限,不知帮到了吗?
参考技术B 应该没有+吧
是不是.box .box?
参考技术C 你在CSS哪个位置看到的这些啊?

CSS3 display:flex和display:box有啥区别

父级元素有display:box;属性之后。他的子元素里面加上box-flex属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。


如:

html:

<article>
   <section>01</section>
   <section>02</section>
   <section>03</section>
</article>


article
   width:600px;
   height:200px;
   display:-moz-box;
   display:-webkit-box;
   display:box;

.sectionOne
   background:orange;
   -moz-box-flex:3;
   -webkit-box-flex:3;
   box-flex:3;

.sectionTwo
   background:purple;
   -moz-box-flex:2;
   -webkit-box-flex:2;
   box-flex:2;

.sectionThree
   -moz-box-flex:1;
   -webkit-box-flex:1;
   box-flex:1;
   background:green;

依次是

总共分为6等分(1+2+3)

总宽度的 6分之3,6分之2,6分之1

参考技术A box:主要是控制父容器里面子元素的排列方式、排列顺序、垂直(水平)对齐方式
box-flex:主要让子容器针对父容器的宽度按一定规则进行划分

注意:
前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本。
后者是2009年的语法,已经过时,是需要加上对应前缀的。
所以兼容性的代码,大致如下
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */本回答被提问者和网友采纳

以上是关于css里面的.box + .box 表示啥意思?的主要内容,如果未能解决你的问题,请参考以下文章

css3中的display:-moz-box是啥意思?是火狐中的啥样式?

css样式表中的 font:messagebox 一句是啥意思啊?

css3中-moz、-ms、-webkit各啥意思

CSS3 display:flex和display:box有啥区别

CSS3 display:flex和display:box有啥区别

CSS3 display:flex和display:box有啥区别