如何只使用css隐藏没有id或类的元素

how can I hide only the words "Piano Lesson" from this tag using CSS but without an ID or class but using only selectors?

我怎样才能只使用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>

I am not able to change the html!

我不能更改html!

6 个解决方案

#1

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

Just add Piano Lesson inside tags, and use style="display:none;" to hide it.

只需在标签中加入钢琴课，并使用style="display:none "来隐藏它。

Edit: You can also use this (No extra ID & Class needed)

编辑:您也可以使用这个(不需要额外的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>

#2

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

#3

wrap it in span and use internal style.

把它以跨度包裹起来，使用内部风格。

Note:internal style better than inline style.

注意:内部风格优于内联风格。

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

you said : how could I move the content "(Canceled)" to the place of "Piano Lesson" and replace it?

你说:我怎么能把内容“(取消)”移到“钢琴课”的地方并替换它?

With jquery :

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> 

#4

Follow this code.

遵循这个代码。

Html

Html

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

css

css

ul li span{display:none}

Or another way:

或另一种方式:

Html

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

css

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

#5

If you can't edit the html...you can still get the desired effect but in a hacky way.

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

This has no cross browser support yet...and by I mean it won't work on IE or Edge. I tested it in Chrome 59 and FF 54 and all is good there.

这还没有跨浏览器支持……我的意思是它在IE或Edge上不起作用。我在Chrome 59和FF 54中测试过，结果都很好。

With that being said, Can I use says this will work for at least 89% of users.

说到这一点，我能说这至少对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>

#6

Altering the HTML is the best option as others have said.

正如其他人所说，修改HTML是最好的选择。

An alternative method if you can't do that:

如果你做不到，另一种方法:

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