如果条件基于CSS样式

问题描述

是否可以创建有关CSS的if语句？我正在使用WordPress主题Hello和Elementor。我在两栏中设置了博客文章。我无法添加其他html，而且它在发布新帖子时始终会更新。但我注意到主题自动将左侧位置设置为：右侧位置的设置为50％。我想在右侧编辑博客文章的CSS。

赞：

if ( left == 50%) {
  margin-top = 50px;
}

<div class="premium-blog-post-outer-container"style="position: absolute; left: 0%; top: 0px;">
            <div class="premium-blog-post-container premium-blog-skin-modern">
                                <div class="premium-blog-thumb-effect-wrapper">
                    <div class="premium-blog-thumbnail-container premium-blog-zoomin-effect">
                                  </a>
                            </div>
    <div class="premium-blog-post-outer-container"style="position: absolute; left: 50%; top: 0px;">
            <div class="premium-blog-post-container premium-blog-skin-modern">
                                <div class="premium-blog-thumb-effect-wrapper">
                    <div class="premium-blog-thumbnail-container premium-blog-zoomin-effect">
                                  </a>
                            </div>

编辑：我现在已经尝试过了，但是什么也没发生？

function blog_post_right() {
?>
<script>
const posts = document.querySelectorAll('.premium-blog-post-outer-container')
for (let post of posts) {
    if (post.styles.left === '50%') {
        post.styles.left = 'margin-top: 150px;'  // insert styles here
    }
}</script>
<?php
}
add_action( 'wp_head','blog_post_right' );

解决方法

const posts = document.querySelectorAll('.premium-blog-post-outer-container')
for (let post of posts) {
    if (post.style.left === '50%') {
        post.style.left = ''   // insert styles here
    }
}

,

这实际上是通过简单的CSS nth：child

解决的