css - 添加一个 :checked pseudo class to an embedded mailchimp form

Question

首先，我并不是真正的 Web 开发人员，所以请多多包涵。

我正在尝试在我的网站上嵌入一个 mailchimp 注册表单。我有一组复选框，除非选中某个单选按钮，否则我想将其隐藏。

    <!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">

.reveal{
    display: none !important;
}

#radio-2:checked ~ .reveal {
    display: inline;
}

</style>
<div id="mc_embed_signup">
<form action="n/a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">

<div class="mc-field-group input-group">
    <strong>Radio Buttons</strong>
    <ul>

<li><input type="radio" id="radio-1" value="Radio 1" name="MMERGE6" id="mce-MMERGE6-0"><label for="mce-MMERGE6-0">Radio 1</label></li>

<li><input type="radio"  id="radio-2" value="Part Time" name="MMERGE6" id="mce-MMERGE6-1"><label for="mce-MMERGE6-1">Part Time</label></li>

</ul>
</div>
<div class="mc-field-group input-group reveal">
    <ul>

<li><input type="checkbox" value="1" name="group[18657][1]" id="mce-group[18657]-18657-0"><label for="mce-group[18657]-18657-0">1</label></li>

<li><input type="checkbox" value="2" name="group[18657][2]" id="mce-group[18657]-18657-1"><label for="mce-group[18657]-18657-1">2</label></li>

<li><input type="checkbox" value="4" name="group[18657][4]" id="mce-group[18657]-18657-2"><label for="mce-group[18657]-18657-2">3</label></li>

<li><input type="checkbox" value="8" name="group[18657][8]" id="mce-group[18657]-18657-3"><label for="mce-group[18657]-18657-3">4</label></li>

</ul>

</div>
    <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e7f52c90ee3d55370f2c41bac_8ea8200d35" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[6]='MMERGE6';ftypes[6]='radio';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

我希望此处的复选框集仅在选中第二个单选按钮时显示。

当我编写自己的表单时，我可以得到 :checked 来工作，但我似乎无法让它在嵌入式 mailchimp 表单中工作，而且我不明白为什么。有人有什么想法吗？

Answer 1

这里有几个问题:

1. !important 的样式不能用不包含 !important 的其他样式覆盖规则.您只需将它从您的第一个样式中删除即可解决此问题。

2. ~兄弟 CSS 选择器定位元素 with the same parent .因为 radio 和.reveal元素不共享同一个父元素，它不显示 .reveal元素。

3. 单选按钮不应有两个 id属性。只有第二个id当存在多个时设置。

为了使兄弟选择器起作用，您可以删除 <ul>和 <li>单选按钮中的元素，并在它们之前添加换行符，以便它们仍然在不同的行上。也把 .reveal类 <div>里面第一个.mc-field-group一。这将使单选按钮与隐藏元素具有相同的父级。

更新后的代码如下所示:

<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">

.reveal {
    display: none;
}

#mce-MMERGE6-1:checked ~ .reveal {
    display: inline;
}

</style>
<div id="mc_embed_signup">
    <form action="n/a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
            <div class="mc-field-group input-group">
                <strong>Radio Buttons</strong>
                <br>
                <input type="radio" value="Radio 1" name="MMERGE6" id="mce-MMERGE6-0"><label for="mce-MMERGE6-0">Radio 1</label>
                <br>
                <input type="radio" value="Part Time" name="MMERGE6" id="mce-MMERGE6-1"><label for="mce-MMERGE6-1">Part Time</label>
                <div class="reveal">
                    <ul>
                        <li><input type="checkbox" value="1" name="group[18657][1]" id="mce-group[18657]-18657-0"><label for="mce-group[18657]-18657-0">1</label></li>
                        <li><input type="checkbox" value="2" name="group[18657][2]" id="mce-group[18657]-18657-1"><label for="mce-group[18657]-18657-1">2</label></li>
                        <li><input type="checkbox" value="4" name="group[18657][4]" id="mce-group[18657]-18657-2"><label for="mce-group[18657]-18657-2">3</label></li>
                        <li><input type="checkbox" value="8" name="group[18657][8]" id="mce-group[18657]-18657-3"><label for="mce-group[18657]-18657-3">4</label></li>
                    </ul>
                </div>
            </div>
            <div id="mce-responses" class="clear">
                <div class="response" id="mce-error-response" style="display:none"></div>
                <div class="response" id="mce-success-response" style="display:none"></div>
            </div>
            <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e7f52c90ee3d55370f2c41bac_8ea8200d35" tabindex="-1" value=""></div>
            <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
        </div>
    </form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[6]='MMERGE6';ftypes[6]='radio';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->