-1

我想隐藏一个特定的句子并用 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？

4

4 回答 4

2

消除body {display:none;}

于 2013-06-23T15:30:15.003 回答
0

为第一句应用 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>
于 2013-06-23T15:31:42.373 回答
0

您无法使用 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 或其他）上设置样式来更改其他属性（如颜色）来使用类似的工作。

于 2013-06-23T15:38:37.913 回答
0

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

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

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

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

没错，它看起来很奇怪。但它有效。

于 2013-06-23T15:46:50.043 回答