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;/*外边距*/}
 
原文地址:https://www.cnblogs.com/ytsbk/p/7227941.html