コーススケジュール
目次
一. CSSよく使われるセレクター
1. 要素セレクター
構文: タグ名{}
機能: 対応するラベルのコンテンツを選択します
例: p{} 、 div{} 、 span{} 、 ol{} 、 ul{} …
2.クラスセレクター（class セレクター）
構文: .class 属性値 {}
機能: class 属性値に対応する要素を選択します
例:<p class="A">段落1</p>
<p class="B">段落1</p>
<p class="C">段落1</p>
.A{} 、 .B{} 、 .C{} …
注: cla2ss の属性値は数字で始めることはできません。記号で始まる場合は、2 つの記号 '_' または '-' のみにすることができます。他の記号は使用できません。複数の属性値を指定できます。
3.IDセレクター
構文: #id 属性値 {}
機能: id 属性値に対応する要素を選択します
例:<p class="A">段落1</p>
<p class="B">段落1</p>
<p class="C">段落1</p>
#A{}、#B{}、#C{} …
注: id の属性値には 1 のみを指定できます。これは再利用でき、数字で始めることはできません。
4. ワイルドカードセレクター
構文: *{}
機能: ページ内のすべてのタグでこのスタイルを実行します。通常、スペースをクリアするために使用されます。
例: *{
margin: 0; //外側の間隔
padding: 0; // 内部の間隔
}
二.グループセレクター
構文: selector1、selector2、selector3...{}
機能: セレクターに対応する要素を同時に選択します
例：
<style>
/* グループを使用する目的は、コードの量を簡素化することです */
div,p,h3,.li2{
font-size: 30px;
}
div,.li2,.text3{
color: red;
}
p{
color: blue;
}
h3{
color: pink;
}
</style>
<div>盒子1</div>
<p>段落1</p>
<p>段落2</p>
<h3>文本标题3</h3>
<h3 class="text3">文本标题3</h3>
<ol>
<li>有序列表</li>
<li class="li2">有序列表</li>
<li>有序列表</li>
</ol>
三. 関係セレクター
1. 子孫セレクター
子孫セレクターは包含セレクターとも呼ばれ、祖先要素は直接的または間接的に子孫要素を含みます。
<style>
/* 子孫セレクター (セレクターを含む) は、ボックスの下にあるすべての子孫 p を選択します。 */
.box p{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<div class="box">
<p>0000</p>
<div>
<p>11111</p>
<p>22222</p>
</div>
<div class="box2">
<p>333</p>
</div>
<p>444</p>
</div>
<style>
/* 選択されるのは、box の子孫 div の子孫 p です。 */
.box div p {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<div class="box">
<p>0000</p>
<div>
<p>11111</p>
<p>22222</p>
</div>
<div class="box2">
<p>333</p>
</div>
<p>444</p>
</div> 
2. 子セレクター
親要素には子要素が直接含まれ、子要素は親要素に直接含まれます。
<style>
/*子セレクターは .box の下にあるすべての子を選択します
.box>p{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<div class="box">
<p>0000</p>
<div>
<p>11111</p>
<p>22222</p>
</div>
<div class="box2">
<p>333</p>
</div>
<p>444</p>
</div>
<style>
/*子セレクターは、.box の下のすべての息子 div 内の息子 p を選択します。
.box>div>p{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<div class="box">
<p>0000</p>
<div>
<p>11111</p>
<p>22222</p>
</div>
<div class="box2">
<p>333</p>
</div>
<p>444</p>
</div>
3. 隣接兄弟セレクター
<p>000</p>
<div class="box">盒子1</div>
<p>111</p>
<p>222</p>
<p>333</p>
<div>
<p>44444</p>
</div>
<p>5555</p>
上記のコードを例にとると、内容が '44444' である p タグを除いて、他のすべての要素は兄弟要素であり、隣接する兄弟要素は互いに隣り合う 2 つのタグです。
上記のコードに内部装飾スタイルを追加します。
<style>
/* box の隣の p が選択されます */
.box+p{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
ページを開いて効果を確認してみましょう。
4. 汎用兄弟セレクター
<p>000</p>
<div class="box">盒子1</div>
<p>111</p>
<p>222</p>
<p>333</p>
<div>
<p>44444</p>
</div>
<p>5555</p>
また、上記のコードを例として、内部装飾スタイルを追加します。
<style>
/*.box の後のすべての兄弟 p が選択されます。*/
.box~p{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
5. ケース
上記のコードを例にとると、「5555」という内容のラベルのスタイルを自分で変更したいという要件があり、残りは変更されません。最初にそれを分析しましょう。このラベルは非常に明白です。隣接する兄弟要素を選択するか、一般的な Brother 要素は p5 タグのみを変更することはできません。まず、.box の後ろにある p タグを確認します。そして、.box の後ろに div タグが 1 つだけある場合、p5 がこの div の兄弟要素のコードは次のとおりです。
<style>
.box~div+p{
width: 200px;
height: 200px;
background-color: yellow;
}
</style> 
四. 属性セレクター
属性セレクターを記述するには 7 つの方法があります
1. XX[属性]
2. XX[属性=属性値]
3. XX[属性^=属性値]
4. XX[属性 $=属性値]
5. XX[属性 *=属性値]
6. XX[属性 ~= 属性値]
7. XX[属性|=属性値]
小さなケースを考えてみましょう。
<style>
.demo {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
overflow: hidden;
margin: 20px auto;
}
.demo a {
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
text-align: center;
background: #aac;
color: blue;
font: bold 20px/50px Arial;
margin-right: 5px;
text-decoration: none;
margin: 5px;
}
</style>
<div class="demo">
<a href="http://www.baidu.com" target="_blank" class=" links item first" id="first" title="link">1</a>
<a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
<a href="sites/file/test.html" class="links item" title="link-1 aa" lang="zh-cn">3</a>
<a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
<a href="sites/file/image.jpg" class="links item" title="link-23 aa">5</a>
<a href="mailto:baiduhotmail" class="links item" title="website link" lang="zh">6</a>
<a href="/a.pdf" class="links item" title="open the website" lang="cn">7</a>
<a href="/abc.pdf" class="linksitem" title="close the website" lang="en-zh">8</a>
<a href="abcdef.doc" class="links item" title="http://www.sina.com">9</a>
<a href="abd.doc" class="linksitem last" id="last">10</a>
</div>
上記のコードのデフォルトのスタイルは次のとおりです。
次に、1 ～ 7 のメソッドの変更されたスタイルを style タグに記述します。
<style>
/* 属性セレクターの重みは 0010 です */
/* 書き方1 XX[属性]はaタグを選択し、title属性変数を持つ */
/* a[title]{
background: yellow;
} */
/* a[lang][target]{
background: yellow;
} */
/*キーポイント: 書き方 2: あれこれ [属性=属性値] 指定された属性を持つ特定のラベルを選択します。属性値はまったく同じである必要があり、複数のスペースがあると機能しないものもあります*/
/* a[lang="zh"]{
background: yellow;
} */
/* a[title="this is a link"]{
background: yellow;
} */
/* class 名は item であり、属性 lang を持ち、属性値は zh-cn とまったく同じである必要があります */
/* .item[lang="zh-cn"]{
background: yellow;
} */
/* id は最後で、title 属性と class 属性があり、属性値はリンクの変更のみです */
/* #last[title][class="links"]{
background: yellow;
} */
/* 書き方3：XX[属性^=属性値] */
/* タグには class 属性があり、その属性値は li で始まります */
/* a[class^=" li"]{
background-color: yellow;
} */
/* a[title^="this"][lang]{
background-color: yellow;
} */
/* 4 あれこれ[属性 $=属性値] の書き方 */
/* a タグには class 属性があり、属性値は t の変更で終わります */
/* a[class$="t"]{
background-color: yellow;
} */
/* a[href$=".pdf"]{
background-color: yellow;
}
a[href$=".doc"]{
background-color: red;
}
a[href$=".png"]{
background-color: green;
} */
/* 書き方 5 あれこれ [属性 *=属性値] */
/* href 属性を持ち、文字 b が含まれるタグを選択します */
/* a[href*="b"]{
background-color: green;
} */
/* 書き方6 XX [属性~=属性値] */
/* a タグが選択され、class 属性があり、属性値が itme word から完全に変更されています */
/* a[class~="item"]{
background-color: green;
} */
/* 書き方7 XX[属性|=属性値] */
/* これはタグを持つように選択されており、属性タイトルがあり、属性値が 1 つだけ link であるか、複数の属性値がありますが、link- で始まる必要があります。 */
a[title|="link"]{
background-color: green;
}
</style>
7 番目のメソッドがデフォルトで表示されます (他の 6 つのメソッドを見る必要がある生徒は、自分で他の 6 つのメソッドのコメントを開きます)。選択されたメソッドには a タグがあり、属性 title があり、属性値は 1 つだけです link であるか、複数の属性値がありますが、link- で始まる必要があります。その後、1 番目、3 番目、5 番目になります。ページを開いて確認してください
五. 疑似クラスセレクター
1. 一般的に使用される疑似クラスセレクター
:first-child 最初の子要素
:last-child 最後の子要素
:nth-child() n 番目の要素を選択します
だいたい:nth-child() の特別な値 (括弧内の内容は次のタイプで入力できます)
n n 番目の n の範囲は 0 から正の無限大 (すべて選択)
even または 2n 偶数要素を選択します
odd または 2n+1 は奇数ビットを選択して要素を取得します
すべての要素で child で終わるが選択されています
:first-of-type 最初の子要素
:last-of-type 最後の子要素
:nth-of-type() n 番目の要素を選択
同じ要素内で type で終わるものが選択されています
<style>
/* box の下の最初の子要素が変更されます。つまり、p1 が変更されます */
.box :first-child{
border: 2px solid blue;
}
/* box の最初の子要素が li の場合、 */
.box li:first-child{
border: 2px solid blue;
}
.box p:first-child{
border: 2px solid blue;
}
/* box の最後の子要素が変更されます。つまり、p6 が変更されます */
.box :last-child{
border: 2px solid blue;
}
.box p:last-child{
border: 2px solid blue;
}
/* box の下の 3 番目の子要素は */
.box :nth-child(3){
border: 2px solid blue;
}
.box li:nth-child(3){
border: 2px solid blue;
}
/* box の 7 番目の子要素は p の変更です */
.box p:nth-child(7){
border: 2px solid blue;
}
.box p:nth-child(9){
border: 2px solid blue;
}
/* n は 0 から始まる数列で、n=0 から n+3 まで計算します */
/* n=0 n+3=3 */
/* n=1 n+3=4 */
/* n=2 n+3=5... 結果は3位、4位、5位、6位、7位、8位、9位…と変化。*/
.box :nth-child(n+3){
border: 2px solid blue;
}
/* box の下の 3、4、5、6、7、8、9... が li の場合に変更します */
.box li:nth-child(n+3){
border: 2px solid blue;
}
/* b1ox の 3 番目、2 番目、1 番目を意味します */
.box :nth-child(-n+3){
border: 2px solid blue;
}
/* box の 3 番目、2 番目、1 番目の p タグが表現されます *//
.box p:nth-child(-n+3){
border: 2px solid blue;
}
/* box の 2、4、6、8、10、12...偶数を示します */
.box :nth-child(2n){
border: 2px solid blue;
}
.box :first-child{
border: 2px solid red;
}
/* は、box の 2 番目、4 番目、6 番目、8 番目、10 番目、12 番目... が li の偶数であることを意味します */
.box li:nth-child(2n){
border: 2px solid blue;
}
/* 2n と Even は両方とも偶数を意味します */
.box li:nth-child(even){
border: 2px solid blue;
}
/* box の 1 番目、3 番目、5 番目、7 番目、9 番目... の奇数を意味します */
.box :nth-child(2n+1){
border: 2px solid blue;
}
.box :nth-child(odd){
border: 2px solid blue;
}
/* 5 7 9 .... */
.box :nth-child(2n+5){
border: 2px solid blue;
}
.box :nth-last-child(2n){
border: 2px solid blue;
}
.box :only-child{
border: 2px solid blue;
}
</style>
<ul class="box">
<p>1111</p>
<p>222</p>
<li>无序列表的li1</li>
<p>33333</p>
<li>无序列表的li2</li>
<li>无序列表的li3</li>
<p>44444</p>
<li>无序列表的li4</li>
<p>555</p>
<li>无序列表的li5</li>
<p>666</p>
</ul>
<style>
/* box の下の最初の子要素 */
.box :first-child{
border: 2px solid blue;
}
/* box での同じタイプの最初のもの */
.box :first-of-type{
border: 2px solid blue;
}
/* child と -type の違い child は、特定の親要素の下にある子要素のみを調べます。 -type は、特定の親要素の下にある同じタイプの子要素を調べます。 */
.box :last-of-type{
border: 2px solid blue;
}
.box p:last-of-type{
border: 2px solid blue;
}
/* box の 2 番目の p */
.box p:nth-of-type(6){
border: 2px solid blue;
}
/* box の偶数li */
.box li:nth-of-type(2n){
border: 2px solid blue;
}
.box li:nth-of-type(2n+1){
border: 2px solid blue;
}
.box li:nth-last-of-type(2){
border: 2px solid blue;
}
/* box の子要素が li の 1 つだけの場合 */
.box li:only-child{
border: 2px solid blue;
}
/* box に 1 li しかない場合 */
.box li:only-of-type{
border: 2px solid blue;
}
.box :nth-last-child(2){
border: 3px solid blue;
}
.box :nth-last-of-type(2){
border: 3px solid blue;
}
</style>
<ul class="box">
<p>1111</p>
<p>222</p>
<li>无序列表的li1</li>
<p>33333</p>
<li>无序列表的li2</li>
<li>无序列表的li3</li>
<p>44444</p>
<li>无序列表的li4</li>
<p>555</p>
<li>无序列表的li5</li>
<p>666</p>
</ul> 
2. 疑似クラスを否定する
:not() はシンボリック条件の要素を削除します
3. 要素の疑似クラス
:link は訪問されていない a ラベルを示します
: visited は訪問済みの a ラベルを示します
上記の 2 つの疑似クラスは、 ハイパーリンク に固有です
。プライバシーの問題のため、 visited 疑似クラスはリンクの色のみを変更できます。
次の 2 つの疑似クラスがすべてのタグで使用できます
:hover マウスが移動した後の要素の状態
: active マウスがクリックされた後の要素の状態
六. 擬似要素セレクター
疑似クラスと同様に、疑似要素は要素の特別な状態を表す存在しない要素です。
いくつかの一般的な疑似要素:
::first-letter は最初の文字を意味します
::first-line は最初の行を意味します
::selection は選択された要素を示します
::before 要素の開始前
::after 要素の終了位置の後
befor および after は、contend と一緒に使用する必要があります (before、after コンテンツは選択できず、常に先頭と末尾に配置されます)。