CSS中如何用子元素样式影响父元素样式？

示例代码：

<div>
  <p>222</p>
</div>

目标：通过修改<p></p>标签样式改变其父元素<div>的样式。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <p>直接通过子元素样式修改父元素样式在CSS中并不被直接支持。传统的CSS选择器是从父元素选择子元素，反之则不行。</p> <p>解决方案：</p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/1160"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680127538389.png" alt="壁纸样机神器"> </a> <div class="aritcle_card_info"> <a href="/ai/1160">壁纸样机神器</a> <p>免费壁纸样机生成</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="壁纸样机神器"> <span>0</span> </div> </div> <a href="/ai/1160" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="壁纸样机神器"> </a> </div> <ol><li> <strong>CSS <code>:has 选择器: 这是一个相对较新的选择器，允许基于父元素是否包含特定子元素来设置样式。 例如，如果<div>包含一个样式为<code>color: red;的<p></p>元素，则可以使用如下CSS代码：

div:has(> p[style*="color: red;"]) {
  /* 父元素样式 */
  background-color: yellow;
}

注意: :has 选择器的浏览器兼容性并非完美，在使用前需仔细检查目标浏览器的支持情况。 此外，此方法是根据子元素的 存在 和 特定样式 来选择父元素，并非直接通过子元素样式修改父元素样式。

2. JavaScript (例如，jQuery): 如果需要更灵活的控制，可以使用JavaScript库，例如jQuery，来操作DOM并修改父元素样式。 这是一种非CSS解决方案。 例如，使用jQuery的parents()方法：

$('p').css('color', 'red');
$('p').parents('div').css('background-color', 'yellow');

这段代码先将<p></p>标签的文字颜色设置为红色，然后找到其父元素<div>并设置背景颜色为黄色。 这需要引入jQuery库，并且脱离了纯CSS的范畴。 <p>总结：</p> <p>虽然CSS本身不提供直接通过子元素样式修改父元素样式的方法，但<code>：has选择器提供了一种基于子元素存在与否的间接方法，但需注意其浏览器兼容性。 JavaScript提供了更灵活但非CSS的解决方案。 选择哪种方法取决于项目的具体需求和浏览器兼容性要求。