css中的选择器

标签选择器

例如：作用于当前页面所有的li标签

li{ color: red; }

ID选择器

例如：给当前页面指定的id元素添加样式同一个页面不能出现相同的id

#change{ color: red; }

类选择器

例如：给当前页面某一类标签添加样式同一个页面，可以存在多个同名的类

.change{ color: red; }

后代选择器（descendant selector）又称为包含选择器。

1.词条解释

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。

2.结合符

空格 （ 每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。）

3.代码举例

如果希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

子代选择器

1.词条解释

如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，使用子元素选择器（Child selector）。

2.结合符

大于号（子结合符）。子结合符两边可以有空白符，这是可选的。

3.代码举例

如果选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}。

相邻选择器

1.词条解释

选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

2.结合符

加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。与子结合符一样，相邻兄弟结合符旁边可以有空白符。

3.代码举例

li + li {font-weight:bold;}

伪类选择器

1.词条解释

伪类用于向某些选择器添加特殊的效果

2.结合符

冒号(：)，即伪类结合符。但是它的结合符旁边不可以有空格

3.代码举例

li:nth-child(2n-1){ color: red; } 奇数行变色；

li:first-child{ color: blue; } 第一行变色；

li:last-child{ color: yellow; } 最后一行变色；

li:hover{ color: green; } 鼠标放那，那里变色；

li:nth-child(2n):hover{ color: red } 上面的结合。

通配符选择器

1.词条解释

选择所有标签

2.结合符

星号（*）。

3.代码举例

*{ padding: 0px;/*内边距*/ margin: 0px;/*外边距*/}