13

私は次のHTMLマークアップを持っています：

<h1> 
     <div class="sponsor"> 
          <span>Hello</span>  
     </div> 
     World 
</h1>

CSSセレクターを使用すると、が表示されh1ますHello World。

残念ながら、マークアップを変更することはできません。RSSフィードを集約するシステムを使用しているため、CSSセレクターのみを使用する必要があります。

テキストノードしか取れないCSSセレクターはありますか？具体的にはWorld、この例では？

4

6 に答える 6

4

CSSの現在の状態ではこれを行うことができません。次のリンクを確認してください：W3C

ここでの問題は、画面に書き込んだコンテンツがDOM：Pに表示されないことです。

また::outside、まだ機能していないようです（少なくとも、Safari 6.0.3の私にとっては）、または単に目的の結果がまだ生成されていないだけです。

私のフィドルをチェックしてから、DOMソースをチェックしてください：JSfiddle

最後に、属性セレクターがありa { content: attr(href);}、CSSがDOMノード属性を読み取れるようにします。innerHTMLこれに相当するものはまだないようです。タグの内側のマークアップを操作できるかもしれませんが、それが可能であれば素晴らしいでしょう。

于 2013-03-26T17:06:03.447 に答える
3

これは、先週私が尋ねた質問とほぼ反対です。純粋なCSSでクラスや識別子を使用せずに、コンテナ内の最初の要素を選択することは可能ですか。

簡単な答えはノーです。"World"この例では、それ自体の要素ではありません。したがって、それを選択する方法はありません。

ここで行う必要があるのは、スタイルを設定してから、h1そのスタイルを。でオーバーライドすることdiv.sponsorです。たとえば、ここで「世界」の背景を黒にし、テキストを白にしたい場合は、次のようなものを使用します。

h1 {
    background:black;
    color:white;
}

h1 div.sponsor {
    background:white;
    color:black;
}

ただし、残念ながら、たとえば「ワールド」という単語だけが必要で、マークアップにそれ以上のものが含まれている場合、これは機能しません<div>Hello</div> World Foo。

この状況では、純粋なCSSで「ワールド」だけをスタイリングすることは不可能だと思います。

于 2013-03-26T16:15:36.333 に答える
3

回避策のビット：

h1 {
  color: red;
}
h1 * {
  color: lime;
}
<h1> 
     <div class="sponsor"> 
          <span>Hello</span>  
     </div> 
     World 
</h1>

于 2015-03-05T14:43:19.850 に答える
1

また、同じ問題が発生しました。マークアップに触れることができず、jsで制御できません。div要素のテキストノードを非表示にする必要がありましたが、要素は表示されたままになります。だからここに私の解決策があります：

マークアップ：

<div id="settings_signout_and_help">
        <a id="ctl00_btnHelpDocs" class="ico icoHelp" href="http://" Help Guide</a>
            Signed in as: <a id="ctl00_lUsr" href="Profile.aspx">some</a>&nbsp;&nbsp;
            <a href="Logout.aspx">Home</a>
                Sign out
        </div>

css：

#settings_signout_and_help {
font-size: 1px !important;
}

#settings_signout_and_help a {
font-size: 13px !important;
}

これがみんなに役立つことを願っています！

于 2013-07-15T09:16:16.137 に答える
0

C＃関数によって生成されたhtmlから「World」テキストを削除しなければならないという同様の問題がありました。

'h1'要素でfont-sizeを0に設定してから、cssをdivクラスに適用しました。基本的に余分なテキストを非表示にしますが、コンテンツはdivに保持します。

于 2015-05-18T19:38:17.243 に答える
-3

CSSだけでどうやってやるのかわからないけど...

JQueryを使用すると、子要素内のものを除く、内部のすべての要素を選択できます

$（ "h1：not（h1> div）"）。css（）そして必要なCSS効果をそこに入れます。

于 2016-03-07T19:07:34.147 に答える