ホームページ > 記事 > ウェブフロントエンド > CSS学習メモ(1)：selector_html/css_WEB-ITnose
CSS学習メモ(1)：selector_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:20:081249ブラウズ
1. 要素セレクター
HTML ドキュメント要素は最も基本的なセレクター
例:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><style type="text/css"> p {color:blue;}</style></head><body> <p>这一段话是蓝色的。</p></body></html> この例では e388a4556c0f65e1904146cc1a846bee 要素のフォントの色を青に設定し、要素セレクターが機能します。ドキュメント内のすべての e388a4556c0f65e1904146cc1a846bee 要素。同様に、次のように複数の要素にスタイルを同時に適用することもできます。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><style type="text/css"> h1,p {color:blue;}</style></head><body> <h1>标题颜色</h1> <p>这一段话是蓝色的。</p></body></html> 複数の要素にスタイルを適用する場合は、カンマで区切ります。
*ワイルドカード セレクターとして、任意の要素と一致できます。
形式: 要素|ワイルドカード
2. クラスセレクター
クラスセレクターのスタイルは、次のようなクラス属性に関連付けられている必要があります:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><style type="text/css"> .one {color:blue;}</style></head><body> <p class="one">第一段。</p> <p>第二段</p> <p class="one">第三段</p></body></html> Format: 。クラス名
コード 3 つの e388a4556c0f65e1904146cc1a846bee 要素があり、そのうちの 2 つは class="one" というクラス属性を持っています。これらの 2 つの e388a4556c0f65e1904146cc1a846bee を指定するには、c9ccee2e6ea535a969eb3f532ad9fe89 の .one クラス セレクターを使用します。要素。要素セレクターとは異なり、クラス セレクターは [.] で始まり、その後に指定されたクラス属性値が続きます。クラス セレクターは、複数の異なる要素に同じクラス値を指定できます。
3. マルチクラスセレクター
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> .one {color:blue;} .two {color:red;} .one.two {color:green;} </style></head><body><p class="one two">第一段。</p><p class="two">第二段</p><p class="one">第三段</p></body></html>
効果:
形式:.クラス名 1. クラス名 2...
マルチクラスの概念は、複数の属性値を指定できることです。クラスの場合 (e388a4556c0f65e1904146cc1a846bee に class="one two" を指定した場合)、この e388a4556c0f65e1904146cc1a846bee 要素の class 属性には 2 つの属性値 "one" と "two" が含まれます。 、中央にスペースを区切り文字として使用します。スタイル シートでは、[.属性値 1. 属性値 2|...] を使用して要素を指します。上記のコードでは、クラス値が「one」である要素の色に青を適用し、クラス値に「two」が含まれる要素に赤を適用し、クラス値に「one」と「」の両方が含まれる要素の色に緑を適用します。二"。スタイル シートで .one.two{color:green;} が指定されていない場合、acc564b9f02edfb35a056b963af7abc5最初の段落。 94b3e26ee717c64999d7867364b1b4a3どんな効果があるの？答えは赤です。 .one と .two は両方とも、条件を満たす acc564b9f02edfb35a056b963af7abc5 の最初の段落を指すためです。 94b3e26ee717c64999d7867364b1b4a3 にすると、カスケードに従ってスタイルが適用されます。
4. ID セレクター
同様のセレクターは似ていますが、クラス セレクターの class 属性ではなく id 属性に一致します。クラス セレクターとは異なり、ID セレクターは HTML ドキュメント内で 1 回だけ使用されますが、指定された id 属性値は多くのブラウザーで複数回出現する可能性がありますが、これは誤りであり、JavaScript で getElementById() メソッドを使用すると不要なエラーが発生します。引き起こされる。 #elementID 属性値を通じて要素を指します。例:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> #p1 {color:blue;} </style></head><body><p id="p1">第一段。</p><p>第二段</p><p>第三段</p></body></html> 形式: #ID 属性値
5. 属性セレクター
注: Safari、Opera およびすべての Gecko ベースのブラウザーは、IE5/Mac および IE6/Win より前は属性セレクターをサポートしていません。属性セレクター。
1. シンプルな属性セレクター
使用法: 特定の属性を持つ要素が必要な場合、属性の値は気にしません。単純な属性セレクターを使用できます。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> p[class] {color:blue;} </style></head><body><p class="one">第一段。</p><p class="two">第二段</p><p>第三段</p></body></html> 効果:
形式: 要素|ワイルドカード [属性]
class 属性を含む e388a4556c0f65e1904146cc1a846bee 要素の色が青になり、class の値が変化しないことがわかります。焦点を当てる。
次のような複数の属性に基づいて選択することもできます: a[href][title]{font-weight:bold;} //href 属性と title 属性の両方を持つ 3499910bf9dac5ae3c52d5ede7383485 要素を太字にします。
2. 特定の属性値に基づいて選択する
上記の例は属性値に注意を払わないセレクターなので、ここでは属性値に注意を払う必要があるセレクターについて説明します。上記の例を変更してみましょう:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> p[class="one"] {color:blue;} </style></head><body><h1 class="one">123</h1><p class="one">第一段。</p><p class="two">第二段</p><p>第三段</p></body></html> 効果:
形式: element | wildcard [attribute = 属性値]
p[class="one"] が p.one と同等であることがわかります。属性セレクターを使用すると、クラス セレクターの効果を実現するだけでなく、他の属性値に基づいて要素を選択できます。
3. いくつかの属性値に基づいて選択します
属性が単語リスト (スペースで区切られている) を受け入れることができる場合は、次のような単語の 1 つに基づいて選択できます:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> h1[class~="box"]{color:blue;} </style></head><body><h1 class="one two box">123</h1></body></html> 効果:
形式: 要素 | ワイルドカード [属性 ~ = 属性部分の値]
より高度な CSS セレクター (CSS2):
[foo^="bar"] foo 属性値が「bar」で始まるすべての要素を選択します
[foo$ ="bar"] foo 属性値が「bar」で終わるすべての要素を選択します
[foo*="bar"] foo 属性値に文字列「bar」が含まれるすべての要素を選択します特定の属性の選択タイプ
rree
这个规则会匹配lang属性等于en或者以en-开头的所有元素，encn也不会起作用，因为不是en-开头，效果：
格式：元素|通配符[属性|="属性值"
六、后代选择器
h1 em{color:blue;} 可以看作对作为h1后代元素的em元素颜色改为蓝色，用代码展示就是：
<h1><em>123</em></h1>
需要注意的是,这里是后代元素，而不只是子元素，如下面的代码也是有效的：
<h1><b><em>123</em></b></h1>
如果只想缩小范围，选择子元素而不是后代元素，则可以使用下面的方式：
h1 > em{color:blue;} 选择相邻兄弟元素，如：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> h1+p{color:blue;} </style></head><body><p>段落1</p><h1>段落2</h1><p>段落3</p><p>段落3</p><p>段落4</p></body></html> 效果：
通过h1+p匹配了之前的兄弟元素是4a249f0d628e2318394fd9b75b4636b1的所有符合要求的e388a4556c0f65e1904146cc1a846bee元素，如果e388a4556c0f65e1904146cc1a846bee元素之前元素隔着其它元素，则不符合匹配要求，但中间只隔着文本内容并不会影响匹配。
接下来我们要讲的就是更有意思伪类和伪元素了。
伪类
1.链接伪类
：link 指示作为超链接（即有一个href属性）并指向一个未访问地址的所有锚。有些链接会不正确的解释
：visited 指示作为已访问地址超链接的所有锚
例子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> a:link {color:blue;} a:visited{color:red;} </style></head><body><a href="#1">被点击过了了</a><a href="#2">未被点击</a></body></html> 结果：
链接伪类也适用于ID选择器,如：
a#one:link{color:yellow;} 2.动态伪类
:focus 当前拥有输入焦点的元素
:hover 指示鼠标停留元素
:active 指示被用户输入激活的元素
例子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> input:focus{background-color:black;} a:hover {background-color:yellow;} a:active{background-color:red;} </style></head><body><input type="text"><a href="#6">例子</a></body></html> 无操作效果：
文本框获得焦点效果：
鼠标在文字上停留效果：
鼠标在文字上按下左键时效果：
伪元素
1.设置首字母样式
如将e388a4556c0f65e1904146cc1a846bee元素中第一个字母变成红色:
p:first-letter{color:red;} 效果：
2.设置第一行的样式
如：
p:first-line{color:red;} 效果：
3.设置之前和之后元素的样式
如：
h2:before{content:"<<";color:blue;}h2:after{content:">>";color:red;} 效果：
第一次写博客，免不了诸多错误，仅作为个人学习笔记。作为一名在校学生，希望大家多多指教。