css中选择器种类总结

1: 类型选择器 ：即HTML标签选择器

选择器名称（）｛

属性：属性值

｝

如

H2 ｛color：white;｝

关注点:不需要 “.” 号，不需要“#”号，就是 HTML标签名称｛属性：属性值｝

2：属性选择器 ： HTML标签中的属性选择器，比如div 有align属性

选择器名称[属性=属性值]｛

           属性：属性值

｝

如 :

p[align=center]{

color :white;

}

解释：html中的标签P中所有属性align为中间的P标签颜色默认为白色

3:ID选择器 通过标签的ID属性定义HTML标签的CSS样式，因为ID要求是唯一的，所以该CSS样式也会是唯一，相当于HTML标签中style属性。

#ID名称｛

属性：属性值；

｝

比如html中有<p id=p1,align='center'></p>

定义CSS样式 ：#p1{

color:white;

}

4,类选择器：常用的 ".名称{}",名称可以自己定义，需要引用的地方加class="该类型名称"

.名称｛

属性：属性名

｝

css :

.mycolor{

color :white;

}

html :<p class='mycolor' ></p>

5:通配选择器 一般不经常用,一般用于页面整体字体，颜色

* ｛

color :white

｝

6:后台选择器 ：子子孙孙

父标签 后台标签 ｛

属性 ：属性值

｝

父标签一般使用html标签选择符，

css：

li a {

font-size:150%;/*字体变大默认的150%*/

text-decoration:none; /*去掉字体装饰 ，即去点连接默认的下划线*/

}

html

<ul>

<li><a href=www.baidu.com>百度</a></li>

<li><a href=www.goole.com>谷歌</a></li>

</ul>

7：子选择器 ：

父标签 > 子标签｛

属性：属性值

｝

css:

li >a{

text-decoration:none; /*去掉字体装饰 ，即去点连接默认的下划线*/

}

html:

<ul>

<li><a href=www.baidu.com>百度</a></li>

<li><a href=www.goole.com>谷歌</a></li>

</ul>

8 :兄弟选择器 ：同一父标签下，并列的子标签

兄弟标签1+兄弟标签2｛

属性：属性名

｝

css：

li + li ｛

font-size：200%

｝

html:

<ul>

<li><a href=www.baidu.com>百度</a></li>

<li><a href=www.goole.com>谷歌</a></li>

</ul>