擬似要素
擬似要素はいくつかの特別な要素の位置を選択するために使用することができます
まず、段落スタイルが定義されています
- ：最初の文字の イニシャル（ブロック要素のみ）
- ：最初の行 の最初の行の
図1に示すように、pは文字色の最初の要素に設定されているが黄色である、フォント30px
P：最初の文字{色：黄色;フォントサイズ：30px;}
<P>これは段落です。</ P>
図2に示すように、Pの最初の行は背景色が緑色である設定（ライトポイント）
P：最初のライン{背景色：緑;}
要素の2つ、前部及び後部
- ：前 部分正面要素（以下、直後の開始タグ）
- ：後の 部分最後尾の要素（ラベルの前端部に対して）
前と後の一般的なコンテンツは、このスタイルの使用と組み合わせる必要があり、内容によって前または後の位置にいくつかのコンテンツを追加します。
コンテンツは、CSSを追加することによって追加されているのであなたはこの部分をチェックすることはできません。
1、p要素の後にテキストを追加
P：後{内容が「エレメントの端面に表示される」;色：青;}
図2に示すように、テキストは、要素pの前に付加（挿入擬似希土類元素の含有量は、このセクションがチェックされていない「最初の要素を表示します」）
P：前{内容： "前部要素が表示された";色：オレンジ;}
属性セレクタ
プレス属性選択要素は、指定された属性または属性値を持つ要素にフォーマットすることができ、要素は、属性の選択に応じて設定されます
文法構造：
NO1、第1のセレクタ（セレクタ要素は、その属性を調べるために）
NO2は、その後、属性の名前を入力します（要素の名前は、プロパティを確認するために）
角カッコ[]、オブジェクト属性とターゲットを取り囲みます。
NO3、適切な属性セレクタを選択し、セレクタの属性は次のとおりです。
- [プロパティ名] 特定のプロパティに一致するには、どのような特定のプロパティの値を聞きません
- [=「値」属性名] 予選要素の属性値が選択されます
- [名前〜=「値」属性] の値は、本明細書に完全な単語ではなく、単語の一部と一致する必要があり（属性値は、異なる属性値との間のスペースで区切られ、他の要素を含んでいてもよい）が選択される要素の値を含む属性。
- | [=「値」属性名] 初めに又は付加価値で要素が選択された値に等しい属性値、|（またはしない文字Lフロントパイプ記号）。ハイフンを入力しないでください
- [^ =「値」属性名] value属性の値が（完全な単語として、または単語の一部）ここで始まる要素が選択される表します
- [名$属性=「値」]は 選択される元素の（単語の完全な単語、またはその一部として）最終値にこの属性の値を表します。
- [名前* =「値」属性] プロパティの値が選択されますここで値のうちの少なくとも1種の元素が含まれていることを示し、値が完全な単語のプロパティ値である必要はありません
例：
1.すべての段落pは赤の前景色に設定されているクラス属性を持つ選択
P [クラス] { 色：赤 }
<Pクラス= "B1">最初の段落</ P>
<Pクラス= "B2">第二段落</ P>
<P>第三段落の</ P>
2.任意のlang値がp要素（完全に一致する）ENに等しい属性を選択し、赤にフォアグラウンド色を設定
P [LANG = "EN"] { 色：赤 }
<Pのlang = "EN">最初の段落</ P>
</ P> <P>第二段落
<P>第三段落の</ P >
3、- =試験ワード整合部、すなわち、一方（フルワード）に隣接するスペースと単語に一致する複数の。属性値のクラス属性を選択すると、記事の要素をboxone、そして黄色に背景色を設定しています。
article[class~="boxone"] {background-color:yellow}
<article class="boxone content">article</article>
<article class="boxoone">center</article>
(1) *=选择器可以匹配部分字符串（不需要完整的单词）
article[class*="box"] {background-color:yellow} √
(2) 当写成如下形式的时候，这个选择器将无法匹配，因为box不是空格分隔的单词列表中某个完整的单词。
article[class~="box"] {background-color:yellow} ×
4、|=选择任何带有lang属性且属性值是以es开头的h2，设置前景颜色为蓝色。
h2[lang|="es"] {color:blue}
<h2 lang="es">第一个二级标题</h2>
<h2 lang="zh">第二个二级标题</h2>
5、可以通过联合使用多种选择器，选择既有href属性，又有任意属性值包含单词box的class属性的a元素，设置背景颜色为橙色。
a[href][class~="box"] {background-color:orange}
<a href="http://www.baidu.com">百度</a>
<a href="#" class="box link">未链接</a>
<a href="http://www.baidu.com" id="box">其他进入方式</a>
6、*=选择器选择所有既有href属性，又有任意属性包含are（作为完整单词或单词的一部分，如hare、dare。无论are出现在属性值的什么位置）的title属性的a元素。
a[href][title*="are"] {font-size:30px}
<a href="#" title="百度are">百度</a>
<a href="#" title="sinlangsre">新浪</a>
<a href="#" title="wangyi">网易</a>
7、^=选择器匹配任何href属性以http://开头(作为完整的单词，或单词的一部分)的a元素。
a[href^="http://"] {background-color:red}
<a href="http://www.baidu.com">百度</a>
<a href="#">新浪</a>
8、匹配任何src属性完全等于logo.png的img元素。
img[src="wj1.png"] {border:1px solid green}
<img src="wj.png">
9、选择器的精确度比前一个低，匹配任何src属性值以。png结尾的img元素。
img[src$=".png"] {border:1px solid green}
<img src="wj.png">
<img src="1.jpg">