主题:css中选择器种类总结
 楼主 zyt60 发表于2011-1-5 9:21:13
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,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>

 

 1 wjk630 发表于2011-1-5 18:56:22

值得收藏

 2 ntmzr22 发表于2011-1-8 9:35:41

不错,非常感谢!

 3 tong5088 发表于2011-1-25 9:16:06

很好,收下。。。

奇新云平台
切换