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