目次
1. よく使われるセレクター
1. エレメントセレクター
構文: タグ名{}
機能: 対応するラベルのコンテンツを選択します
例:p{}、div{}、span{}、ol{}、ul{}.
2.クラスセレクター（クラスセレクター）
構文: .class 属性値 {}
機能: クラス属性値に対応する要素を選択する
例 : <p class="A">段落 1</p>
<p class="B">段落1</p>
<p class="C">段落 1</p>
.A{}、.B{}、.C{} ......
注: クラス内の属性値は数字で始めることはできません. 記号で始まる場合は、'_' または '-' の 2 つの記号のみにすることができます. 他の記号は使用できません. 複数の属性値が存在する可能性がありますクラスで。
3.idセレクター
構文: #id 属性値 {}
機能: id 属性値に対応する要素を選択する
例: <p id="A">段落 1</p>
<p id="B">段落1</p>
<p id="C">段落1</p>
#A{} 、 #B{} 、 #C{} ......
注: id の属性値は 1 にのみ指定できます。これは再利用でき、数字で始めることはできません
4.ワイルドカードセレクター
文法： *{}
機能: ページ内のすべてのタグがこのスタイルを実行するようにします。通常、スペースをクリアするために使用されます。
例： *{
margin: 0; //外側の間隔
padding: 0; // 内側のスペース
}
2.グループセレクター
構文: セレクター 1、セレクター 2、セレクター 3...{}
機能: セレクタに対応する要素を同時に選択する
例：
<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>
3. 関係セレクター
1.子孫セレクター
子孫セレクターは包含セレクターとも呼ばれ、祖先要素は直接的または間接的に子孫要素を含みます
<style>
/* 后代选择器(包含选择器),选择到的是box下面的所有后代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下所有的儿子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>
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,那么就是内容为111的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,那么就是除了内容为'44444'以外的所有p*/
.box~p{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
5.ケース
上記のコードを例にとると、「5555」という内容のラベルのスタイルを変更したいという要件があり、残りは変更されません.まずそれを分析しましょう.このラベルは非常に明白です.選択隣接する兄弟要素または一般的な兄弟要素は、p5 タグのみを変更することはできません。まず、.box の後ろにある p5 タグを見て、.box の後ろに div タグが 1 つしかない場合、p5 がこの div の兄弟要素であることが起こります。 、コードは次のとおりです。
<style>
.box~div+p{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
4 番目に、属性セレクター
属性セレクターを記述する方法は 7 つあります。
1.まあまあ[プロパティ]
2. XX[attribute=属性値]
3.まあまあ [属性^=属性値]
4.まあまあ[属性$ =属性値]
5.まあまあ[属性*=属性値]
6.まあまあ[属性〜=属性値]
7.まあまあ[属性|=属性値]
小さなケースを考えてみましょう:
<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:baidu@hotmail" 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>上記のコードのデフォルトのスタイルは次のとおりです。
style タグに 1~7 メソッドの変更されたスタイルを記述します。
<style>
/* 属性选择器的权重是0010 */
/* 写法1 某某[属性] 选择到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是last且有title属性且有class属性,属性值只能是links的变 */
/* #last[title][class="links"]{
background: yellow;
} */
/* 写法3: 某某[属性^=属性值] */
/* a标签有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 某某[属性*=属性值] */
/* 选择到a标签且有href属性且只要有字母b就可以 */
/* a[href*="b"]{
background-color: green;
} */
/* 写法6 某某[属性~=属性值] */
/* 选择到的是a标签且有class属性,且属性值有完整的itme词的变 */
/* a[class~="item"]{
background-color: green;
} */
/* 写法7 某某[属性|=属性值] */
/* 这个是选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变 */
a[title|="link"]{
background-color: green;
}
</style>7 番目の方法がデフォルトで表示され (他の 6 つの方法を読む必要がある学生は、他の 6 つの方法のコメントを自分で開きます)、選択した方法にはラベルが付けられ、属性のタイトルと、1 つの属性値のみが表示されます。リンクまたは複数の属性値がありますが、link- で始まる必要があります。次に、1 番目、3 番目、5 番目です。ページを開いて確認します
5. 疑似クラスセレクター
1. 一般的に使用される擬似クラス セレクター
:first-child 最初の子要素
:last-child 最後の子要素
:nth-child() n番目の要素を選択
概要: nth-child() の特別な値 (括弧内の内容は次のタイプで入力できます)
n n 番目の n の範囲は 0 から正の無限大 (すべて選択)
even または 2n 偶数要素を選択
奇数または 2n+1 奇数ビットを選択して要素を取得します
子で終わることは、すべての要素の中から選択することです
:first-of-type 最初の子要素
:last-of-type 最後の子要素
:nth-of-type()同じ要素内で選択する type で終わるn 番目の要素を選択します
<style>
/* box下面的第1个子元素变,也就是p1变 */
.box :first-child{
border: 2px solid blue;
}
/* box下面的第1个子元素是li的时候变*/
.box li:first-child{
border: 2px solid blue;
}
.box p:first-child{
border: 2px solid blue;
}
/* box下面的最后1个子元素变,也就是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;
}
/* 表示的意思是box里面的第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下面的第1个子元素变,从结构看第1个是p,所以p1变了 */
.box :first-child{
border: 2px solid blue;
}
/* box下面的同类型的第1个变,从目前的结构上看ul下面有2个类型,1个是li和1个是p所以li类型和p类型的第1个都变了 */
.box :first-of-type{
border: 2px solid blue;
}
/* -child和-type的区别 child只看某个父元素下面的子元素 -type看的某父元素下面的同类型的子元素 child就是问班级有多少人 type就是问班级有多少女生和多少男生 */
.box :last-of-type{
border: 2px solid blue;
}
.box p:last-of-type{
border: 2px solid blue;
}
/* box 里面的p的第2个 */
.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里面的只有1个子元素是li的时候变 */
.box li:only-child{
border: 2px solid blue;
}
/* box里面的li只有1个的时候变 */
.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 はタグを訪問していないことを意味します
:visited はタグを訪問したことを意味します
The above two pseudo-classes are unique to hyperlinks
. プライバシーの問題により、訪問された疑似クラスはリンクの色のみを変更できます.
次の 2 つの疑似クラスは、すべてのラベルで使用できます
: hover マウスが移動された後の要素の状態
: active マウスがクリックされた後の要素の状態
6. 疑似要素セレクター
疑似クラスと同様に、疑似要素は、要素の特別な状態を表す存在しない要素です。
いくつかの一般的な疑似要素:
::first-letter は最初の文字を意味します
::first-line は最初の行を意味します
::selection は選択された要素を表します
::before 要素の開始前
::after 要素の終了位置の後
before と after は contend と一緒に使用する必要があります (前後に書かれた内容は選択できず、常に先頭と末尾になります)