CSS の擬似要素の概要と擬似クラスとの違い

疑似要素

CSS 仕様のさらなる改善に伴い、新しい CSS 疑似要素がどんどん追加されていることは承知していますが、日々の開発において、私たちが一般的に使用しており、ブラウザのサポートが比較的楽観的であるものは次のとおりです。前後。しかし、私たちが日常の開発で使用するのは、次のとおりです: {content: ”;} の後にフロートをクリアし、要素を追加します (IE8 ブラウザーでの単一コロンの使用に注意) しかし、コンテンツの可能な値は何ですか。 ?
1. 文字列: コンテンツ: 「文字列」 - 注: 特殊文字は Unicode でエンコードする必要があります。
2. 画像: コンテンツ: url(/path/to/benjamin.png) - 画像は元のサイズで挿入されます。画像はグラデーションをサポートしているため、擬似要素にグラデーション効果を使用できます。
3. 文字なし: コンテンツ: "" - これは、フロートをクリアしたり、背景画像を設定したりする場合に便利です。背景画像のサイズを調整するために、background-size 属性を使用することもできます
4. Counter: content: counter(li) - :mark が表示される前に、リストのシリアル番号を設定するのに便利です。スタイル; 詳細については、次のコードを参照してください:

ol {   
    countercounter-reset: li;   
}   
ol>li {   
    position: relative;   
    padding-left: 2em;   
    line-height: 30px;   
    list-style: none;   
}   
ol>li:before {   
    position: absolute;   
    top: 8px;   
    left: 0;   
    height: 16px;   
    width: 16px;   
    line-height: 16px;   
    text-align: center;   
    content: counter(li);   
    countercounter-increment: li;   
    border-radius: 50%;   
    background-color: #ccc;   
    font-size: 12px;   
    color: #efefee;   
}

PS: コンテンツを設定することはできません: "c1a436a314ed609750bd7c7d319db4daBenjamin2e9b454fa8428549ca2e64dfac4625cd"、これは HTML コード フラグメントとして解析されませんが、解析されます。
5. content: attr(attrName)
content は、特に疑似クラスで使用される場合に、attr 関数を使用できます。

<style type="text/css">   
    .list li {   
        list-style: none;   
        margin-bottom: 20px;   
    }   
    .list li span {   
        vertical-align: middle;   
    }   
    .list li:before {   
        content: attr(data-index);   
        display: inline-block;   
        width: 20px;   
        height: 20px;   
        text-align: center;   
        color: #fff;   
        vertical-align: middle;           
        background-color: #f00;   
        border-radius: 50%;   
    }   
</style>   
<ul class="list">   
    <li data-index="1"><span>专注前端开发和用户体验</span></li>   
    <li data-index="2"><span>专注前端开发和用户体验</span></li>   
    <li data-index="3"><span>专注前端开发和用户体验</span></li>   
    <li data-index="4"><span>专注前端开发和用户体验</span></li>   
    <li data-index="5"><span>专注前端开发和用户体验</span></li>   
</ul>

、IE で発生したバグについて話しましょう:
バグの説明: 疑似クラスを使用して「+」/「-」を実装します。画像を切り替えるとき、開いているクラスを追加および削除することで実現されますが、IE8 では効果が奇妙です。他のブラウザでは正常に表示できません:

.plus {   
    position: relative;   
    display: inline-block;   
    vertical-align: top;   
    width: 20px;   
    height: 20px;   
    margin-right: 24px;   
    border: 1px solid #fdaa47;   
    border-radius: 3px;   
    overflow: hidden;   
}   
/* 横向 */
.plus:before {   
    content: '';   
    position: absolute;   
    top: 10px;   
    left: 3px;   
    width: 14px;   
    height: 1px;   
    background-color: #fdaa47;   
    display: block;   
}   
/* 纵向 */
.plus:after {   
    display: block;   
    content: '';   
    width: 1px;   
    height: 14px;   
    background-color: #fdaa47;   
    position: absolute;   
    left: 10px;   
    top: 3px;   
}   
.opened:after {   
    top: -30px;   
}

addClass('opened') と RemoveClass('opened') を渡すとき、プラス記号とマイナス記号を切り替える: IE8 ブラウザでは効果がありません。現在の解決策は次のとおりです:

<p class="parent">   
    <i class="plus"></i>   
</p>   
<script type="text/javascript">   
$(&#39;.parent&#39;).on(&#39;click&#39;, function() {   
    var $i = $(this).find(&#39;i&#39;),   
        className = $i.attr(&#39;class&#39;);   
    className = /opened/.test(className) ? &#39;plus&#39; : className +&#39; opened&#39;;   
    $i.replaceWith(&#39;<i class="&#39;+ className +&#39;""></i>&#39;);   
});   
</script>

疑似クラスと疑似要素の類似点と相違点
1. W3C CSS 2.1 セレクター
は区別されません。疑似クラスと疑似要素はすべてコロンを使用します
たとえば、
疑似クラス: first-child、
疑似要素: first-line
追記: リンクは仕様に明確に記載されています。疑似クラス:
A:hover は A:link ルールと A:visited ルールの後に配置する必要があることに注意してください。そうしないと、カスケード ルールによって A:hover ルールの 'color' プロパティが非表示になるためです。 active は A:hover の後に配置され、ユーザーがアクティブ化して A 要素の上にマウスを置いたときにアクティブな色 (ライム) が適用されます。

2. CSS セレクター レベル 3
この仕様では疑似クラスと区別されます。疑似要素。疑似クラスは単一のコロンを使用し、疑似要素は二重コロンで始まります。
例:
pseudo-class: first-child
pseudo-elements::first-line, ::first-letter, ::before, ::after
CSS 3 では、CSS2 をベースに多くの疑似クラスが追加されています。 1：ターゲット、UI要素の状態の擬似クラス：チェックなど、構造的な擬似クラス：nth-​​child()など。詳細は仕様を参照してください。

3. CSS セレクター レベル 4 ドラフト
このドラフトでは、入力制御ステータス、値ステータス、値検証に関連する疑似クラス、ツリー構造の疑似クラス、ネットワークの疑似クラスなど、多くの新しい疑似クラスが追加されます。格子構造など。

4. CSS 疑似要素モジュール レベル 4—W3C 第一公開作業草案、2015 年 1 月 15 日
次のような疑似要素を追加しました。
ハイライトされたコンテンツの選択: ::selection、::spelling-error、および ::grammar-error 擬似要素、
Placeholder 入力: ::placeholder 擬似要素。

5. 一般的なアプリケーション
疑似クラス:
1) リンクスタイル
2) インターレースカラー変更
疑似要素:
1) float をクリアした後の疑似要素の最も一般的な使用法、
.fix{ *ズーム:1; }
.fix:after,.fix::after{表示: ブロック; 高さ: 0; クリア: 非表示; }
2)間隔+最初の文字 ボタンのテキストの非表示を実現します
3) 最初の行と最初の文字のスタイル

以上がCSS の擬似要素の概要と擬似クラスとの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。