Question

我想用css隐藏一个特定的句子并控制字体颜色。我的代码如下。

<html>
  <head>
    <style>
      body    {display:none;}
      .apple  {color:red;}  <- pattern a
      /* .banana {color:yellow;} */ <- pattern b
    </style>
  </head>
  <body>
    My favorite fruit is <span class="apple">apple</span>. <- sentence 1
    My favorite fruit is <span class="banana">banana</banana>. <- sentence 2
  </body>
</html>

我想只显示带有模式a的句子1，我想只用模式b显示句子2，但结果是我在Web浏览器中看不到任何句子。

如何编辑css和html以分别用模式a和b显示句子1和2？

Answer 1

删除body {display:none;}

Answer 2

为第一句用法a，用第二句用b。下面我使用了<p> but <div> could be used instead.

<p class="a">My favorite fruit is <span class="apple">apple</span></p>
<p class="b">My favorite fruit is <span class="banana">banana</banana>>/p>

Answer 3

您无法使用CSS控制文本随机部分的可见性。即使使用JavaScript，如果没有额外的标记，你所要求的也很难。

首先，正如@jaux所说，你用

隐藏了一切

body { display:none }

如果您想要显示任何内容，则需要删除它。接下来，正如@suspectus所说，你需要用某种元素包装每个句子。即使这样，你也无法做你想要的 - 用纯CSS来隐藏基于子内容的父元素。你需要JavaScript。

用离散元素包装句子后

<p>My favorite fruit is <span class="apple">apple</span></p>
<p>My favorite fruit is <span class="banana">banana</banana>>/p>

您可以使用JavaScript查找父元素，例如：

// Using jQuery
$('.apple').closest('p').hide();

// Using pure JavaScript
var apples = document.querySelectorAll('.apple');
for (var i=apples.length;i--;){
  var parentP = apples[i];
  while (parentP && parentP.tagName.toLowerCase()!='p') parentP = parentP.parentNode;
  if (parentP) parentP.style.display = 'none';
}

您可以通过在拥有段落（或跨度，或div或其他）上设置样式来使用类似的工作来更改其他属性，例如颜色。

Answer 4

删除正文{display: none;}并将其专门应用于您要隐藏的句子。

我会使用ID，因为您不会多次使用它，但您可以使用类来帮助您找到这些<p>标记。

但是，如果你想得到cray cray - 你可以像这样选择它们......

p:first-child { display:none; }
p:nth-child(2) { display: none;}

是的，它看起来很奇怪。但它的确有效。

如何用css控制特定的句子

4 个答案: