Css 选中该选项时使div可见_Css_Css Selectors

Css 选中该选项时使div可见

css

Css 选中该选项时使div可见,css,css-selectors,Css,Css Selectors,我已经研究了几个不同的问题来帮助我达到这一点，但是我无法找出允许我访问外部DIV的选择器如果我删除了两个包含div的代码，那么代码可以完美地工作，但是在格式化方面，我需要div来控制外观。我知道~是子选择器，这就是为什么它在没有div的情况下工作如何选择任何DIV 代码：。如果激活，则显示{ 颜色：#ccc；字体：斜体；不透明度：0；变换：比例（0.8）；最大高度：0px；过渡：0.5s； } 输入#照片1：选中~div#肖像，输入#照片2：选中~div#婚礼，输入#照片3

我已经研究了几个不同的问题来帮助我达到这一点，但是我无法找出允许我访问外部

DIV

的选择器

如果我删除了两个包含div的代码，那么代码可以完美地工作，但是在格式化方面，我需要div来控制外观。我知道

是子选择器，这就是为什么它在没有div的情况下工作

如何选择任何

DIV

代码：

。如果激活，则显示{
颜色：#ccc；
字体：斜体；
不透明度：0；
变换：比例（0.8）；
最大高度：0px；
过渡：0.5s；
}
输入#照片1：选中~div#肖像，
输入#照片2：选中~div#婚礼，
输入#照片3：选中~div#其他{
颜色：#f00；
字体风格：普通；
变换：比例（1）；
不透明度：1；
最大高度：150像素；
}


无标题文件
请选择您要查找的内容？
肖像
婚礼
其他
肖像
婚礼
其他
<>代码> 我想你还不能用基于CSS的后代来构建一个父代，你可以考虑使用JavaScript或jQuery。请看以下链接：
,
尝试此HTML结构：
<body>
  <form>
    <div class="eight columns" data-scroll-reveal="enter bottom move 100px over 0.6s after 0.2s">
      <label for="photo">
        <span class="error" id="err-phone">Please Select What you are looking for?</span>
      </label>
      <input class="radio_activator_portraits" name="photo" id="photo1" type="radio" value="portraits">
      <label for="photo1">Portraits</label>
      <input class="radio_activator_weddings" name="photo" id="photo2" type="radio" value="wedding">
      <label for="photo2">Wedding</label>
      <input class="radio_activator_other" name="photo" id="photo3" type="radio" value="other">
      <label for="photo3">other</label>

      <div class="eight columns reveal-if-active" id="portraits" name="portraits">Portraits</div>
      <div class="eight columns reveal-if-active" id="wedding" name="wedding">Wedding</div>
      <div class="eight columns reveal-if-active" id="other" name="other">Other</div>

    </div>
  </form>
</body>

请参见
cchacholiades是正确的——您将需要javascript来执行您想要的操作+一,

但是，您想要的javascript非常简单——它看起来像这样：
$(document).ready(function(){
    $('input[name="photo"]').click(function(){
        var phot = $(this).val();
        $('#'+phot).show().css({'background':'yellow','opacity':'1'});
    });
});

<head>
    <!-- other stuff in head -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>


注:
（1） 因为您已经将所需DIV的ID
存储为单击单选按钮的值
，所以捕获该值很简单：$（this）.val（）
--$（this）引用单击的元素
（2） 我演示了如何同时使用.show（）
——这与cssdisplay:block
相同，并实际使用css语句本身
坦白地说，我认为使用jQuery来完成这项工作会更快。唯一需要注意的是，您必须加载jQuery库，通常在
标记中，如下所示：
$(document).ready(function(){
    $('input[name="photo"]').click(function(){
        var phot = $(this).val();
        $('#'+phot).show().css({'background':'yellow','opacity':'1'});
    });
});

<head>
    <!-- other stuff in head -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>




如果您想要一些关于jQuery的快速课程，请在此处找到免费视频教程：

或
如果我不能弄清楚这一点，我的下一个选择是可能重复这一点。但是我希望它们在包含DIV之外。仅仅因为我格式化表单的方式，我不能将它放在同一个DIV内。是否有CSS选择器可以在该DIV之外工作？是的，这肯定会将它放在其他地方。然而，这并不能解决问题。因为我去掉的整个形体的结构。。。我需要弄清楚把它放在div之外的CSS。不仅仅是定位。我能问一个问题吗？为什么用javascript将背景设置为黄色？当我把它去掉时，它就停止工作了？只需完全删除这些字符，包括逗号，它就会继续工作：'background'：'yellow'，
jQuery方法有两种形式：.css（'selector'，'action'）.css（{'selector'：'action'，'selector2'：'action2'}）--请注意，选择器/操作分隔符从逗号变为冒号，现在逗号分隔多个语句