例を使用して CSS 疑似クラスを学習する elements_html/css_WEB-ITnose

CSS 擬似クラス要素はとても素晴らしいものです。まず、疑似クラス要素である :before :after を理解しましょう。これは false 要素です。これは要素の前または後ろに挿入できますが、HTML ドキュメント構造では、Js が DOM を通じて制御できないため、存在しません。また、その使用方法も、a:hover、a:active などの疑似クラスと同様に非常に簡単です。ここでの疑似要素は a:before、a:after です。

擬似要素に関して、最も重要な属性は content 属性です CSS の擬似要素に content 属性がない場合、この擬似要素は効果がありません 。ただし、この疑似要素に何もないことを示すために、null 値を渡すことができます。 content: "" では、まず疑似要素の効果を直感的に感じてみましょう。

開発者モードではこれらの疑似要素が表示されないことは明らかですが、実際にレンダリングされています。このように、このような疑似要素を使用すると、HTML 構造に影響を与えることなく、非常に柔軟に何かを行うことができます。このことから、これらの疑似要素によって生成される要素はすべてインライン要素であることもわかります。必要に応じて、それらを手動でブロックレベルの要素に変換できます。 もちろん、コンテンツは受信するテキストや画像

url(img.jpg)

に限定されません。最も強力なのは、要素の属性を attr(href) などのパラメーターとして渡すことができることです。これは、要素の href 値がテキスト形式の疑似要素のコンテンツとして使用されることを意味します。 。

重要なのは、もちろん実践です。ここでは、CSS 疑似要素を使用して非常に優れたものを作成する方法を説明します。

これは、CSS 疑似要素を使用して太極拳を描画する例です。一見すると、信じられないように思えますか?実際はとても簡単なので、見ていきましょう。

まず、この div のすべての黒い部分は、border-bottom と高さの合計が width と等しくなるようにします。border-radius を使用すると、上下に黒と白の色を簡単に実現できます。円。そして、ここに相対性があり、これは次の疑似要素の絶対性を制限することになります。こうして見ると、少しわかりにくいでしょうか。それでは、続きを見てみましょう。

次に、疑似要素を使用します。疑似要素の内容を空にし、高さ、幅、境界線、境界半径の組み合わせを使用して同心円の効果を実現し、異なる色と絶対値、左値と上の値で選択的に覆います。もちろん反対側も同じ手法で、当然とてもカッコいい八卦図が出来上がります。

始めることが重要です。クールだと思ったら試してください。

最後にもう 1 つ、CSS + CSS3 を通じて、さまざまなものを作成でき、想像力を大胆に活用できます。そして常に 1 つのことを覚えておいてください。「もっとやってみよう!」