CSS父元素的子元素样式控制另一子元素怎么实现？

Posted 2023-05-13

急!!!
我碰到的问题是：鼠标移到第一个子元素怎么去改变第二个子元素的样式

参考技术A 你说讲的这应该是同级兄弟元素之间的CSS控制。

话说有一种选择器就叫兄弟元素选择器，分为临近兄弟和普通兄弟。

临近兄弟：用 ＋ 表示，只匹配该元素后边的第一个同级元素。
普通兄弟：用 ～ 表示，匹配该元素后边的所有同级元素。

给个例子：

<style>
div#aa
div#aa p font-size: 14px; color: #000;
div#aa p.on color: #f00;
div#aa p.on ~ span color: #00f;
div#aa p.on + span color: #0f0; font-weight: bold;
</style>

<div id="aa">
<p class="on">sdf</p>
<span>sdf</span>
<span>sdf</span>
</div>

当把p的class设为on的时候，span的样式也跟着改变。

不知道这么说清楚没有。

另外这种方式IE6是不支持的。慎用吧。本回答被提问者采纳 参考技术B 这个有办法，就是用“>”这个符号实现，比如body>div,就是body下的div会生效，不是body下的就不用生效。不过这个有浏览器不支持，尤其是IE6。建议不要使用。

弹性盒

在css样式设计中有一个弹性盒属性，那什么是弹性盒呢？简单来说就是可以根据某些子元素设置的宽度或者是高度来自动为其他的子元素设置宽度和高度。

那么怎么将元素设置为弹性盒呢，答案就是将display:flex;样式设置在父元素上，记住是父元素上；

之后我们就要分配父元素剩余的空间了。我们就要将-(相应的浏览器内核)-flex-grow:整数;设置在子元素上了(整数表示占父类剩余空间的份数);

我 们还要设置主轴的方向了(设置在父元素上),我们要将-(相应的浏览器内核)-flex-direction:方向;设置在父元素上。主轴方向默认为 row(从左到右),row-reverse(从右到左),column(从上到下),column-reverse(从下到上);

设置子元素在侧轴上的对齐方式(父元素上),-(相应的浏览器内核)-align-items:位置;位置有三种，分别是flex-start(侧轴的起始),center(居中),flex-end(侧轴的结束位置);

设 置子元素在主轴上的对齐方式(父元素上),-(相应的浏览器内核)-justify-content:对齐方式;对齐方式有五种，分别是flex- start(主轴起始位置),flex-end(主轴的结束位置),center(居中),space-around:子元素与两端的距离是子元素与子元 素距离的一半,space-between:子元素与两端的距离是0;

通过上面的讲解大家应该对什么是弹性盒了解了吧