html - 无法使用没有 html 元素标记的 css 选择文本

Question

我有一个自动生成的文件输入表单元素:

<div id="university_logo">
  <img src=/media/userprofile/Metallica_-_2008_-_Death_Magnetic_-_Front.jpg>
    <div class="form-group">
       <label class="control-label" for="id_univercity_logo">Logo</label>
        <div class="row bootstrap3-multi-input">
          <div class="col-xs-12">
            Currently: 
            <a href="/media/userprofile/Metallica_-_2008_-_Death_Magnetic_-_Front.jpg">userprofile/Metallica_-_2008_-_Death_Magnetic_-_Front.jpg</a><br />
            Change:
            <input type="file" name="univercity_logo" autocomplete="off" class="" title="" id="id_univercity_logo" />
          </div>
        </div>
    </div>
</div>

我正在尝试删除标签“当前:”和“更改:”

我的 CSS 代码是:

#university_logo {
  .form-group{
    .row{
      margin-left: 0;
      margin-right: 0;
      .col-xs-12{
        *:not(#id_univercity_logo){
          display: none;
        }
      }
    }
  }
}

但是这两个标签并没有消失。

我可以选择没有标签标签的标签吗？

Answer 1

可以使用可见性

.col-xs-12 {
visibility:collapse; /*hidden, in this case same result*/
font-size: 0px;
}

.col-xs-12 input{
    visibility:visible;
}

.col-xs-12 a{
    visibility:visible;
    font-size: 15px;
}

<div id="university_logo">
  <img src=/media/userprofile/Metallica_-_2008_-_Death_Magnetic_-_Front.jpg>
    <div class="form-group">
       <label class="control-label" for="id_univercity_logo">Logo</label>
        <div class="row bootstrap3-multi-input">
          <div class="col-xs-12">
            Currently: 
            <a href="/media/userprofile/Metallica_-_2008_-_Death_Magnetic_-_Front.jpg">Image Tag</a><br />
            Change:
            <input type="file" name="univercity_logo" autocomplete="off" class="" title="" id="id_univercity_logo" />
          </div>
        </div>
    </div>
</div>