ホームページ > 記事 > ウェブフロントエンド > CSSセレクターに関する注意事項
1. 要素セレクター
1. *
* { margin: 0; padding: 0; }
より高度なセレクターについて説明する前に、このよく知られたクリア セレクターについて理解する必要があります。アスタリスクは、ページ上のすべての要素を選択します。多くの開発者は、「マージン」と「パディング」をクリアするためにこれを使用します。もちろん練習時に使用することもできますが、本番環境で使用することはお勧めしません。ブラウザに不要なものがたくさん追加されます。
`*` は、要素のすべての子要素を選択するために使用することもできます。
#container * { border: 1px solid black; }
`#container` の下にあるすべての要素が選択されます。
2. E
a { color: red; } ul { margin-left: 0; }
ページ上のすべてのタグを見つけたい場合は、「id」または「class」を使用する代わりに、タグ セレクターを直接使用します。
3. .info
.error { color: red; }
これは「クラス」セレクターです。複数の要素をターゲットにできる点で、`id` セレクターとは異なります。複数の要素をスタイルしたい場合は、「class」を使用できます。特定の要素を変更したい場合は、「id」を使用してその要素を見つけます。
4. #footer
#container { width: 960px; margin: auto; }
ID で要素を見つけるにはセレクターで `#` を使用します。
2. 複数要素の組み合わせセレクター
5. E、Fa,li { color: red; }はすべての a 要素と li 要素に一致します6. E F
li a { text-decoration: none; }は li の後の複数の a 要素 (孫を含む) にのみ一致します 7. E > F
div#container > ul { border: 1px solid black; }li の後の複数の a 要素とのみ一致します (孫を除く) `E F` と `E > F` の違いは、後者のコマンドが直接の子要素を選択することです。以下の例を見てください:
<div id="container"> <ul> <li> List Item</li> <ul> <li> Child </li> </ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>`#container > ul` は、`id` を 'container' として持つ `div` の下にあるすべての直接の `ul` 要素のみを選択します。最初の `li` の下に `ul` 要素は配置されません。 8. E + F
ul + p { color: red; }これを隣接セレクターと呼びます。これは、指定された要素のすぐ後続の要素の選択を指示します。上の例では、すべての `ul` タグの後の最初の段落を選択し、その色を赤に設定します。 9. E~F
ul ~ p { color: red; }`ul + p` セレクターは、指定された要素の直後にある要素のみを選択します。このセレクターは、ターゲット要素に続くすべての一致する要素を選択します。 3. 関係セレクター 10. E[att]は、その値に関係なく、att 属性を持つすべての E 要素と一致します。
<style> a[class]{color:#f00;} </style> </head> <body> <ul> <li><a href="?" class="external">外部链接</a></li> <li><a href="?">内部链接</a></li> <li><a href="?" class="external">外部链接</a></li> <li><a href="?">内部链接</a></li> </ul> </body>
上面的这个例子中,只会选择有class属性的元素。那些没有此属性的将不会被这个代码修饰。
11. E[att=val]
匹配所有att属性等于"val"的E元素
a[class="external"]{color:#f00;}
上面这片代码将会把`class`属性值为`external`的标签设置为红色,而其他标签则不受影响。
12. E[att~=val]
匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素
<style> a[class~="external"]{color:#f00;} </style> </head> <body> <ul> <li><a href="?" class="external txt">外部链接</a></li> <li><a href="?" class="txt">内部链接</a></li> <li><a href="?" class="external txt">外部链接</a></li> <li><a href="?" class="txt">内部链接</a></li> </ul> </body>
这个`~`符号可以定位那些某属性值是空格分隔多值的标签(因此只有外部链接是红色字体)。
13. E[att|=val]
选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
<style> li[class|="test3"]{color:#f00;} </style> </head> <body> <ul> <li class="test1-abc">列表项目1</li> <li class="test2-abc">列表项目2</li> <li class="test3-abc">列表项目3</li> <li class="test4-abc">列表项目4</li> <li class="test5-abc">列表项目5</li> <li class="test6-abc">列表项目6</li> </ul> </body>
因此只有项目3为红色。
14. E[att^="val"]
选择具有att属性且属性值为以val开头的字符串的E元素。
<body> <ul> <li class="abc">列表项目1</li> <li class="acb">列表项目2</li> <li class="bac">列表项目3</li> <li class="bca">列表项目4</li> <li class="cab">列表项目5</li> <li class="cba">列表项目6</li> </ul> </body>
li[class^="a"]{color:#f00;}
选择具有class属性且属性值为以a开头的字符串的E元素(因此只有项目1、2为红色)。
15. E[att$="val"]
匹配所有att属性以"val"结尾的元素
li[class$="a"]{color:#f00;}
选择具有class属性且属性值为以a结尾的字符串的E元素(项目4、6为红色)。
16. E[att*="val"]
匹配所有att属性包含"val"字符串的元素
li[class*="a"]{color:#f00;}
因为class的属性中都含有字母a所以结果均为红色。
四、伪类选择器
17. E:link
设置超链接a在未被访问前的样式。
<ul> <li><a href="?" class="external">外部链接</a></li> <li><a href="?">内部链接</a></li> <li><a href="?" class="external">外部链接</a></li> <li><a href="?">内部链接</a></li> </ul>
a:link{color:#03c;} .external:link{color:#f00;}
运行结果:外部链接为红色;内部链接为蓝色
18. E:visited
设置超链接a在其链接地址已被访问过时的样式。
19. E:hover
设置元素在其鼠标悬停时的样式。
20. E:active
设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
21. E:first-child
匹配父元素的第一个子元素E。
<body> <ul> <li>test1</li> <li>test2</li> <li>test3</li> <li>test4</li> <li>test5</li> </ul> </body>
li:first-child{color:#f00;}
结果只有列表第一条信息test1为红色
22. E:last-child
匹配父元素的最后一个子元素E。
li:last-child{color:#f00;}
结果只有列表最后一条信息test5为红色
23. E:only-child
匹配父元素仅有的一个子元素E。
<ul> <li>test1</li> </ul> <ul> <li>test2</li> <li>test3</li> <li>test4</li> </ul>
li:only-child{color:#f00;}
结果只有列表test1为红色
24. E:nth-child(n)
匹配父元素的第n个子元素E。
li:nth-child(3){color:#f00;}
结果只有列表test3为红色
25. E:nth-last-child(n)
匹配父元素的倒数第n个子元素E。
li:nth-last-child(3){color:#f00;}
结果只有列表test3为红色
26. E:first-of-type
匹配同类型中的第一个同级兄弟元素E。
<div class="test"> <div><b>我是一个div元素</b></div> <p>这是段落1</p> <p>这是段落2</p> <p>这是段落3</p> <p>这是段落4</p> <p>这是段落5</p> </div>
p:first-of-type{color:#f00;}
结果只有这是段落1为红色。
27. E:last-of-type
匹配同类型中的最后一个同级兄弟元素E。
p:last-of-type{color:#f00;}
结果只有这是段落5为红色。
28. E:only-of-type
匹配同类型中的唯一的一个同级兄弟元素E。
b:only-of-type{color:f00;}
结果只有我是一个div元素为红色。
29. E:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E,n 可以代表数字也可以代表字母。
p:nth-of-type(2){color:#f00;}
结果只有这是段落2为红色。
n为odd时表示奇数;n为even表示偶数;
p:nth-of-type(odd){color:#f00;}
结果:段落1、3、5显示为红色。
p:nth-of-type(even){color:#f00;}
结果:段落2、4显示为红色。
30. E:nth-last-of-type(n)
匹配同类型中的倒数第n个同级兄弟元素E,n 可以代表数字也可以代表字母。。
p:nth-last-of-type(2){color:#f00;}
结果:段落4显示为红色。
n为odd时表示奇数;n为even表示偶数;
p:nth-last-of-type(odd){color:#f00;}
结果:段落1、3、5显示为红色。
p:nth-last-of-type(even){color:#f00;}
结果:段落2、4显示为红色。