Question

如何使用CSS从这个标签中隐藏“ Piano Lesson ”字样但没有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

将其打包在const string cnnString = "Provider=Microsoft.ACE.OLEDB.12.0" + ";Mode=Read" + @";Data Source=|DataDirectory|\Northwind 2010.accdb";并使用内部样式。

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

span

＆＃13;

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

＆＃13;

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

＆＃13;

你说：我怎样才能移动内容＆＃34;（已取消）＆＃34;到了＃34; Piano Lesson＆＃34;并替换它？

使用jquery：

<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>

＆＃13;

$(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>')
  }) 
})

＆＃13;

$(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>')
  }) 
})

＆＃13;

Answer 2

＆＃13;

<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>

＆＃13;

只需在代码中添加Piano Lesson，然后使用style="display:none;"隐藏它。

编辑：你也可以使用它（不需要额外的ID和类）

＆＃13;

.alert ul li span{
display:none;
}

＆＃13;

<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>

＆＃13;

Answer 3

$('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);
})

Answer 4

请遵守此准则。

<强> 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 5

如果你不能编辑html ......你仍然可以以一种黑客的方式获得所需的效果。

目前还没有跨浏览器支持......我的意思是它无法在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 6

改变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>

如何在没有id或class的情况下使用css隐藏元素

6 个答案: