css選擇器

 

CSS 元素選擇器 http://www.w3school.com.cn/css/css_selector_type.asp

h1 {color:blue;}

選擇器分組 http://www.w3school.com.cn/css/css_selector_grouping.asp

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

所有的標題元素都是綠色的

通配符選擇器

CSS2 引入了一種新的簡單選擇器 - 通配選擇器（universal selector），顯示為一個星號（*）。該選擇器可以與任何元素匹配，就像是一個通配符。

例如，下面的規則可以使文檔中的每個元素都為紅色：

* {color:red;}

 

 

 

 

在 CSS 中，類選擇器以一個點號顯示：http://www.w3school.com.cn/css/css_selector_class.asp

.center {text-align: center}

在上面的例子中，所有擁有 center 類的 HTML 元素均為居中。

 

元素也可以基於它們的類而被選擇：

td.fancy {
	color: #f60;
	background: #666;
	}

在上面的例子中，類名為 fancy 的表格單元將是帶有灰色背景的橙色。

<td class="fancy">

CSS 多類選擇器

<p class="important warning">
This paragraph is a very important warning.
</p>

 

.important {font-weight:bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}

CSS ID 選擇器詳解 http://www.w3school.com.cn/css/css_selector_id.asp

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。

id 選擇器以 "#" 來定義。

下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：

#red {color:red;}
#green {color:green;}

屬性選擇器 http://www.w3school.com.cn/css/css_selector_attribute.asp

下面的例子為帶有 title 屬性的所有元素設置樣式：

[title]
{
color:red;
}

屬性和值選擇器

下面的例子為 title="W3School" 的所有元素設置樣式：

[title=W3School]
{
border:5px solid blue;
}

[title~=hello] { color:red; }由空格分隔的屬性值

[lang|=en] { color:red; }連字符分隔的屬性值

 

CSS 后代選擇器http://www.w3school.com.cn/css/css_selector_descendant.asp

后代選擇器（descendant selector）又稱為包含選擇器。

后代選擇器可以選擇作為某元素后代的元素。

如果寫作 ul em {color:red;}，這個語法就會選擇從 ul 元素繼承的所有 em 元素，而不論 em 的嵌套層次多深

CSS 子元素選擇器 http://www.w3school.com.cn/css/css_selector_child.asp

與后代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。

例如，如果您希望選擇只作為 h1 元素子元素的 strong 元素，可以這樣寫：

h1 > strong {color:red;}

 

CSS 相鄰兄弟選擇器 http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp

相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。

例如，如果要增加緊接在 h1 元素后出現的段落的上邊距，可以這樣寫：

h1 + p {margin-top:50px;}

CSS 偽類 (Pseudo-classes) http://www.w3school.com.cn/css/css_pseudo_classes.asp

CSS 偽類用於向某些選擇器添加特殊的效果

語法

偽類的語法：

selector : pseudo-class {property: value}

CSS 類也可與偽類搭配使用。

selector.class : pseudo-class {property: value}

錨偽類

在支持 CSS 的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。

a:link {color: #FF0000}		/* 未訪問的鏈接 */
a:visited {color: #00FF00}	/* 已訪問的鏈接 */
a:hover {color: #FF00FF}	/* 鼠標移動到鏈接上 */
a:active {color: #0000FF}	/* 選定的鏈接 */

 

CSS2 - :first-child 偽類

p:first-child {font-weight: bold;} 這個p是第一個子元素。修飾p
li:first-child {text-transform:uppercase;}

 

 

CSS 偽元素 (Pseudo-elements) http://www.w3school.com.cn/css/css_pseudo_elements.asp

語法

偽元素的語法：

selector:pseudo-element {property:value;}

CSS 類也可以與偽元素配合使用：

selector.class:pseudo-element {property:value;}

屬性	描述	CSS
:first-letter	向文本的第一個字母添加特殊樣式。	1
:first-line	向文本的首行添加特殊樣式。	1
:before	在元素之前添加內容。	2
:after	在元素之后添加內容。	2