CSS3 シリーズ 1 (概要、セレクター、セレクターを使用したコンテンツの挿入)_html/css_WEB-ITnose

CSS3 モジュール構造

CSS の歴史的発展

CSS (Cascading Style Sheet)、Web ページのスタイルを制御し、Web コンテンツからスタイル情報を分離できるようにするために使用されるマークアップ言語。

CSS3 属性セレクター

1. E[attr=val] は、属性 att があり、その値が val に等しいことを意味します
2. E[attr*=val] は、属性 attr があり、その値に次の値が含まれていることを意味しますval
3. E [attr^=val] は属性 attr を持ち、その値が val
で始まることを意味します
4. E[attr$=val] は属性 attr を持ち、その値が val
で終わることを意味します

実際には、上記の 4 つ以外に 2 つの用途があります。比較的少数の属性セレクターがあります。つまり、

E[attr|=val] は、属性 attr を持つ要素を選択するために使用され、属性の値は val であるか、val- で始まります (ここで、 - は必須です）。

a[lang|=zh]{do something} //将会选择具有lang属性值为zh或属性值以zh-开头的a标签

E[attr~=val] 要素の属性がスペースで区切られた複数の属性値を持つ場合、attr 属性が複数の属性値を持つ限り E[attr~=val] を使用します。 val と一致する要素である場合、それが選択されます。

<a href="" id="test" title="test first"></a> a[title~=test]{do something} //将会选择具有title属性且其中一个属性值为test的a标签

ユニバーサル疑似クラスセレクター

1. E:first-line: 要素内のテキストの最初の行にスタイルを使用します
2. E:first-letter は、要素内のテキストのスタイルを設定するために使用されます スタイルを使用します最初の文字 (ヨーロッパおよびアメリカのテキスト) または最初の文字 (中国語または日本語) の場合
3. E:before は要素の前にコンテンツを挿入するために使用されます
4. E:after は要素の後にコンテンツを挿入するために使用されます

CSS3 構造擬似クラス セレクター

1. : ルート セレクターは、スタイルをページのルート要素にバインドします。いわゆるルート要素は、HTML 内のドキュメント ツリーの最上位にある要素を指します。ページとは、ページ全体の 部分が含まれることを意味します
2. E:この構造要素の下にある下位構造要素を除外したくない
3. E:empty は、要素のコンテンツが空白の場合に使用されるスタイルを指定します
4. E:target はページ内の特定の要素 ターゲット要素はスタイルを指定します。スタイルは、ユーザーがページ上のハイパーリンクをクリックしてターゲット要素にジャンプした後にのみ有効になります
5. E:first-child は、特定の要素の最初の子要素を選択するために使用されますelement
6. E:last -child は、特定の要素の最後の子要素を選択するために使用されます。
7. E:nth-child は、親要素の 1 つ以上の特定の子要素を選択するために使用されます。ここで、n は数値 (1 から始まる)、n を含む式、または奇数 (奇数)、偶数 (偶数) です。番号）。
8. E:nth-last-child 使い方はnth-childと同じですが、nth-last-child()で選択される要素は親要素の最後の子要素から始まります。
9. E:nth-of-type は、親要素で指定された特定の型の子要素のみをカウントします (要素に複数の子要素型がある場合、選択に nth-of-type を使用する方が便利です)
10. E:nth-last-of-type 使用法は nth-of-type と同じですが、次の点が異なります。 nth-last-of-type() も親要素の最後の子要素から開始します。
11. E:only-child 一致する要素の親要素には子要素が 1 つだけあります

CSS3 UI 要素ステータス疑似クラスセレクター

1. E:hover{do something} // 一致する E を選択しますマウスが留まる場所 要素
2. E:active{do something} //一致する E 要素を選択すると、要素がアクティブ化され、アンカーやボタンでよく使用されます
3. E:link{do something} //定義されたハイパーリンクを選択しますが、リンクはまだ訪問されていない要素です
4. E:visited{do something} //ハイパーリンクが定義されており、リンクが訪問されている要素を選択します
5. E:focus{do something} //一致する E 要素を選択し、要素がフォーカスを取得します
6. E:enabled{do something} //一致する E 要素を選択すると、要素は利用可能な状態になります
7. E:disabled{do something} //一致する E 要素を選択すると、要素は無効な状態です
8. E :read-only{do something} //要素が読み取り専用状態のときにスタイルを指定するために使用されます
9. E:read-write{do something} //スタイルを指定するために使用されます要素が非読み取り専用状態の場合
10. E:checked{do something} //フォーム内のラジオボタンまたはチェックボックスが選択されているときのスタイルを指定するために使用されます
11. E:default{do something} / /ページを開いたときのデフォルトを指定するために使用されます。選択状態のラジオ ボタンまたはチェック コントロールのスタイル (ユーザーがチェック ボックスまたはチェック ボックス コントロールの選択状態を非選択状態に設定した場合でも) E: 指定されたスタイルデフォルトのセレクター内の はまだ有効です)
12. E :indeterminate{do something} //ページを開いたときにラジオ ボタン ボックスのどれも選択状態に設定されていない場合に、ラジオ ボタン ボックスのグループ全体のスタイルを指定するために使用されます (ページを開いたときにユーザーがいずれかを選択) 任意のラジオボタン、スタイルは未指定)
13. E::selection は、要素が選択されたときにスタイルを指定するために使用されます

CSS3 階層関係セレクター

子孫セレクター "E F 》Eに一致する要素のうち、Fに一致する要素をすべて選択します。

子选择器「E > F」 选择配配E的元素的匹配F的直系子元素。

相邻兄弟元素选择器「E + F」E和F是同辈元素，具有相同的父元素，并且F元素紧邻在E元素的后面，此时可以使用相邻兄弟选择器。（也就是说只会选择紧接着E元素的第一个F元素）

通用兄弟选择器「E ~ F」E和F是同辈元素，具有相同的父元素，并且F元素在E元素之后，E ~ F将选中E元素后面的所有F元素。

使用选择器来插入内容

        h1:before {            content: 'MYTEXT';        }        h2::after {            content: none;        }        h2::before {            content: normal;            /*            虽然normal和none属性值都表示不插入任何内容            但normal比none使用更广泛，            换句话的意思就是说none属性值只能应用到这两个选择器中，而normal属性值还可以应用到其它用来插入内容的选择器中            */        }        h3:before {           content:url(logo.png);        }        h3 {            background-image:url(logo.png);            /*            虽然两种方法都可以插入图像，但是使用background-image方法时，如果在打印的时候设定了不打印背景就不能正常打印图像了            但使用before选择器追加的图像文件却可以正常打印            */        }        img::after {            content:attr(alt);/*将alt属性的值作为图像的标题来显示*/        }

上面的几个用法可能都会，但下面的用法相信用的相对会比较少，但却很实用哦！

    <style type="text/css">        h1:before {            content: counter(mycounter,upper-alpha)'.';            /*后面的.可以为其指定样式 比如说color:blue                 upper-alpha为大写罗马字母 这里面的值可以是list-style-type中的任意一种             */            color: blue;            font-size: 42px;        }        h1 {            counter-increment: mycounter;        }    </style>    <h1>大标题</h1>    <p>示例文字</p>    <h1>大标题</h1>    <p>示例文字</p>    <h1>大标题</h1>    <p>示例文字</p>

界面显示如下图所示：（也就是说使用counter属性值来针对多个项目追加连续编号）

再来看一个相对上面稍微复杂一点的，也就是编号多层嵌套的例子

 <style type="text/css">        h1:before {            content: counter(mycounter)'.';            color: blue;        }        h1 {            counter-increment: mycounter;            counter-reset: subcounter;        }        h2:before {            content: counter(mycounter) '-' counter(subcounter) '.';        }        h2 {            counter-increment: subcounter;            counter-reset: subsubcounter;            margin-left: 40px;        }        h3:before {            content: counter(mycounter) '-' counter(subcounter) '-' counter(subsubcounter) '.';        }        h3 {            counter-increment: subsubcounter;            margin-left: 80px;        }    </style>    <h1>大标题</h1>    <h2>中标题</h2>    <h3>小标题</h3>    <h3>小标题</h3>    <h3>小标题</h3>    <h2>中标题</h2>    <h3>小标题</h3>    <h3>小标题</h3>    <h2>中标题</h2>    <h3>小标题</h3>    <h3>小标题</h3>    <h1>大标题</h1>    <h2>中标题</h2>    <h3>小标题</h3>

界面效果图如下：（相信你看了代码一看便明白了）

还有一个使用content的小技巧，那就是在字符串两边添加嵌套文字符号

        h1:before {            content:open-quote;        }        h1:after {            content:close-quote;        }        h1 {            quotes:"(" ")";            /*当如果要使用双引号的时候 需要用\转义字符*/            quotes:"\"" "\"";        }