ホームページ > 記事 > ウェブフロントエンド > CSSレイアウトに名前を付けるときに下線を避ける方法
この記事の内容は、CSS レイアウトに名前を付けるときに下線を避ける方法についてです。必要な方は参考にしていただければ幸いです。
CSS ハックを使用したことがある友人は、アンダースコアを使用した名前付けもハックであることを知っているはずです。たとえば、「_style」のような名前を使用すると、IE 以外のほとんどのブラウザーがこのスタイルの定義は無視されるため、名前を付けるときに区切り文字として「_」を使用するのは不規則です。 CSS チェックを行うとエラー メッセージが表示されるため、名前にアンダースコアを使用することは避けてください。
この目的のためには、アンダースコアを置き換えることができ、標準に準拠した記号を見つける必要があります。もちろん、この種の区切り文字を使用する必要はありません。これは単なる個人的な習慣の問題です。 。
簡単なテストを行って、アンダースコアを「~」、「$」、「`」、「&」、および「-」に置き換えた結果、「-」記号のみが使用できるようになりました。 js のサポートも正常です。テストを見てください:
以下は引用された内容です:
css 部分:
コードは次のとおりです。
.try-a{ color:#00f; } .try~a{ color:#00f; } .try`a{ color:#00f; } .try&a{ color:#00f; } .try$a{ color:#00f; } .try-b{ color:#f00; } .try~b{ color:#f00; } .try`b{ color:#f00; } .try&b{ color:#f00; } .try$b{ color:#f00; }
html 部分:
コードは次のとおりです:
<div id="a" class="try-a">try1</div> <div id="b" class="try~a">try2</div> <div id="c" class="try`a">try3</div> <div id="d" class="try&a">try4</div> <div id="e" class="try$a">try5</div></p> <p><input type="button" value="ok" onclick="b();" />
js 部分:
コードは次のとおりです:
function b(){ document.getelementbyid("a")。classname="try-b"; document.getelementbyid("b")。classname="try~b"; document.getelementbyid("c")。classname="try`b"; document.getelementbyid("d")。classname="try&b"; document.getelementbyid("e")。classname="try$b"; }
その結果、「try1」が赤くなり、正常に表示されます。ただし、CSS定義ではidセレクタがよく使われます。ページ内のid名に「_」が使用されている場合、CSSスタイルでは必然的に下線「_」が表示されるため、ここでのidには注意が必要です。また、名前にアンダースコアを使用することも避けてください。
上記は、CSS レイアウトに名前を付けるときに下線を避けるための完全な紹介です。CSS3 チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。
以上がCSSレイアウトに名前を付けるときに下線を避ける方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。