-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 を編集して、文 1 と文 2 をそれぞれパターン a と b で表示するにはどうすればよいですか?

4

4 に答える 4

2

削除するbody {display:none;}

于 2013-06-23T15:30:15.003 に答える
0

最初の文にクラス a を適用し、2 番目の文にクラス 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;}し、非表示にする文に具体的に適用します。

<p>複数回使用することはないので ID を使用しますが、クラスを使用してこれらのタグを見つけることができます。

ただし、cray cray を取得する場合は、次のように選択できます...

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

確かに、奇妙に見えます。しかし、それは機能します。

于 2013-06-23T15:46:50.043 に答える