一、 css 選擇器1.css派生選擇器The strongly emphasized word in this paragraph isred.This subhead is also red.The strongly emphasized word in this subhead isblue....
一、 css 選擇器
1.css派生選擇器
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p> <h2>This subhead is also red.</h2> <h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
2.css 後代選擇器
<html> <head> <style type="text/css"> ul em {color:red; font-weight:bold;} </style> </head> <body> <ul> <li>List item 1 <ol> <li>List item 1-1</li> <li>List item 1-2</li> <li>List item 1-3 <ol> <li>List item 1-3-1</li> <li>List item <em>1-3-2</em></li> <li>List item 1-3-3</li> </ol> </li> <li>List item <em>1-4</em></li> </ol> </li> <li>List item 2</li> <li>List item 3</li> </ul> </body> </html>
3.css 子元素選擇器
子選擇器使用大於號 >
<!DOCTYPE HTML> <html> <head> <style type="text/css"> h1 > strong {color:red;} </style> </head> <body> <h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1> </body> </html>
4.css 相鄰兄弟選擇器
使用 + 相連
<!DOCTYPE HTML> <html> <head> <style type="text/css"> li + li {font-weight:bold;} </style> </head> <body> <div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> </div> </body> </html>
5.id選擇器
id選擇器使用#
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
選擇id為 sidebar 元素中派生出的p標簽
6.class選擇器
類選擇器以一個點號顯示
<!--和 id 一樣，class 也可被用作派生選擇器：--> .fancy td { color: #f60; background: #666; } <!--在上面這個例子中，類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是一個表格或者一個 div） 元素也可以基於它們的類而被選擇：--> td.fancy { color: #f60; background: #666; } <!-- 在上面的例子中，類名為 fancy 的表格單元將是帶有灰色背景的橙色。-->
7.屬性選擇器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; } </style> </head> <body> <form name="input" action="" method="get"> <input type="text" name="Name" value="Bill" size="20"> <input type="text" name="Name" value="Gates" size="20"> <input type="button" value="Example Button"> </form> </body> </html>
| 選擇器 | 描述 |
|---|---|
| [attribute] | 用於選取帶有指定屬性的元素。 |
| [attribute=value] | 用於選取帶有指定屬性和值的元素。 |
| [attribute~=value] | 用於選取屬性值中包含指定辭彙的元素。 |
| [attribute|=value] | 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。 |
| [attribute^=value] | 匹配屬性值以指定值開頭的每個元素。 |
| [attribute$=value] | 匹配屬性值以指定值結尾的每個元素。 |
| [attribute*=value] | 匹配屬性值中包含指定值的每個元素。 |
