您可以将 CSS 添加到由自定义字段创建的 CSS 类的子类中吗？

Posted 2023-03-25

【中文标题】您可以将 CSS 添加到由自定义字段创建的 CSS 类的子类中吗？

【英文标题】：Can you add CSS to the child of a CSS class created by custom fields?

【发布时间】：2019-09-19 14:32:32

【问题描述】：

我创建了一个自定义字段，允许我将 css 添加到特定页面的条目标题中。自定义字段使用高级自定义字段插件，通过编辑页面窗口中的单选按钮提供 hide_title_yes 或 hide_title_no 元数据。

然后我使用该元数据创建了一个自定义 css 类。

<?php $custom_values = get_post_meta($post->ID, 'hide_title'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class($custom_values); ?>>

问题是 CSS 类被添加到文章元素而不是标题元素。有没有办法从文章元素中选择标题元素？

    <article id="post-19" class="hide_title_yes post-19 page type-page status-publish hentry">

我尝试过使用

article > header .entry-header 
left: -999em;
position: absolute;

选择文章是父元素的标题元素。但是我想我可能误解了选择器的使用。

01/05 更新：我添加了 html 结构的屏幕截图。 HTML Structure

01/05 更新 2：我现在添加了以下代码：

<header class="entry-header<?php echo get_field('hide_title') ? ' yes' : '' ?>">
        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
        <?php twentyseventeen_edit_link( get_the_ID() ); ?>
    </header><!-- .entry-header -->

css 类现在添加到 entry-header 中

<header class="entry-header yes">

但是，当我尝试在我的 css 文件中定位该类时，它不起作用。 css文件中的代码是：

header.entry-header.yes 
    left: -999em;
    position: absolute;

当我将代码添加到 Google 检查器中时，它可以工作。所以我显然没有正确定位课程。

【问题讨论】：

分享html结构，可以告诉你选择器是否正确

header 是 article 的孩子还是相反？

@TemaniAfif 我已经在帖子中添加了 html 结构的图像

@JonP Header 是文章的子项

您的问题中存在相互冲突的信息。您声明“将 CSS 类添加到文章元素而不是标题元素”但您的代码显示了添加到 header 元素的类。它是哪一个？您提供的代码未显示 section 元素。请提供minimal reproducible example 呈现的 HTML，而不是 PHP。

【参考方案1】：

您需要通过检查条件 hide_title_yes 在标题 (header.php) 上添加一个类，然后在您的 css 文件中定位该类。

【讨论】：

我已经更新了我的帖子。我已经设法将类“是”添加到类入口标题但是我无法在 css 中正确定位它。如果我在谷歌检查器中尝试它可以工作，所以我显然没有正确定位类

我可以看到您正在实施的网站吗？

header.entry-header.yes 左：-999em !important;位置：绝对！重要； 试试这个