如何仅使用 css 隐藏没有 id 或 class 的元素

Question

我怎样才能使用 CSS 隐藏这个标签中的“钢琴课”字样，但没有 ID 或类，但只使用选择器？

<div class="alert alert-success dynamic-alert ">
    <ul>
        <li>
            (Canceled) <a href="http://www.google.ch">July 18, 2017 13:30</a> Piano Lesson
        </li>
    </ul>
</div>

我无法更改 html！

Answer 1

将其包装在span 中并使用内部样式。

注意：内部样式优于内联样式。

.alert li a + span {
  display:none;
}

.alert li a + span {
  display:none;
}

<div class="alert alert-success dynamic-alert ">
    <ul>
        <li>
            (Canceled) <a href="http://www.google.ch">July 18, 2017 13:30</a> <span>Piano Lesson<span>
        </li>
    </ul>
</div>

你说：我怎样才能将内容“（取消）”移动到“钢琴课”的位置并替换它？

使用 jquery：

$(document).ready(function(){
  $('button').click(function(){
    var c = $($('li a')[0].previousSibling).text();
    $($('li a')[0].previousSibling).wrap('<span style="display:none"></style>');
    $($('li a')[0].nextSibling).wrap('<span style="display:none"></style>');
    $('li a').after('<span>' + c + '</span>')
  }) 
})

$(document).ready(function(){
  $('button').click(function(){
    var c = $($('li a')[0].previousSibling).text();
    $($('li a')[0].previousSibling).wrap('<span style="display:none"></style>');
    $($('li a')[0].nextSibling).wrap('<span style="display:none"></style>');
    $('li a').after('<span>' + c + '</span>')
  }) 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="alert alert-success dynamic-alert ">
    <ul>
        <li>
            (Canceled)<a href="http://www.google.ch">July 18, 2017 13:30</a>Piano Lesson
        </li>
    </ul>
    <button>Go</button>
</div> 

Answer 2

遵循此代码。

HTML

<ul>
        <li>
            (Canceled) <a href="http://www.google.ch">July 18, 2017 13:30</a><span> Piano Lesson</span>
        </li>
    </ul>

css

ul li span{display:none}

或者其他方式：

HTML

<ul>
        <li>
            (Canceled) <a href="http://www.google.ch">July 18, 2017 13:30</a><span class="span-style"> Piano Lesson</span>
        </li>
    </ul>

css

ul li .span-style{display:none} or .span-style{display:none}

Answer 3

<div class="alert alert-success dynamic-alert ">
    <ul>
        <li>
            (Canceled) <a href="http://www.google.ch">July 18, 2017 13:30</a> <span style="display:none;">Piano Lesson</span>
        </li>
    </ul>
</div>

只需在标签内添加Piano Lesson，并使用style="display:none;" 将其隐藏。

编辑：您也可以使用它（不需要额外的 ID 和等级）

.alert ul li span{
display:none;
}

<div class="alert alert-success dynamic-alert ">
    <ul>
        <li>
            (Canceled) <a href="http://www.google.ch">July 18, 2017 13:30</a> <span>Piano Lesson</span>
        </li>
    </ul>
</div>

Answer 4

如果你不能编辑 html...你仍然可以得到想要的效果，但是用一种 hacky 的方式。

这还没有跨浏览器支持...我的意思是它不能在 IE 或 Edge 上运行。我在 Chrome 59 和 FF 54 中对其进行了测试，一切都很好。

话虽如此，Can I use 表示这将适用于至少 89% 的用户。

.alert li {
  -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1)12.8em, /** <---- manually edit this value to determine the cutoff point **/
  rgba(0, 0, 0, 0)0, rgba(0, 0, 0, 0));
}

<div class="alert alert-success dynamic-alert ">
  <ul>
    <li>
      (Canceled) <a href="http://www.google.ch">July 18, 2017 13:30</a> Piano Lesson
    </li>
  </ul>
</div>

Answer 5

正如其他人所说，更改 HTML 是最佳选择。

如果你不能这样做，另一种方法：

.alert ul li {
 font-size: 0;
}

.alert ul li a {
 font-size: 16px;
}

.alert ul li:before {
  content: 'Canceled';
  display: inline-block;
  font-size: 16px;
  margin-right: 5px;
}

<div class="alert alert-success dynamic-alert ">
    <ul>
        <li>
            (Canceled) <a href="http://www.google.ch">July 18, 2017 13:30</a> Piano Lesson
        </li>
    </ul>
</div>

Answer 6

$('ul li').each(function(){
    var content=$(this).html();
    var check=content.search('Piano Lesson');
    if(check!='-1'){
        content=content.replace('Piano Lesson','');
    }
    $(this).html(content);
})