css 初引

标签：原则   lin   交集   nbsp   text   三种方式   优先级   方式   height   

标签选择器:

作用:根据选择器的名称,选中页面中所有的HTML标签

li{

color: blue;

}

类选择器

写法: .class名{}

调用:在HTML标签中,使用class="class名"调用选择器

优先级，class选择器大于标签选择器

*/

.li1{

color: red;

}

id选择器:

写法:#id名{}

调用:在html标签中,用id="id名"来调用

优先级：id选择器大于class选择器

#first{

color: green;

}

选择器注意事项

1.写法不同:class选择器使用.声明,id选择器用#声明

2.优先级不同:作用于同一个标签时:id>class>标签选择器

3.在同一个HTML文件中,id是唯一的,所以id选择器只能作用于一个标签上.但是class可以作用于N个.

选择器的命名规则

只能有字母/数字/下划线/减号组成

开头不能是数字

 

通用选择器:

写法: *{}

作用:选中页面,所有标签,包括html

优先级:最低,小于标签选择器

*{

background-color: blueviolet;

}

选择器优先级排序：

* 首选遵循的是近者优先的原则，哪个选择器作用于最里层标签，哪个生效

* 当作用于同一层标签时，优先级排序↓

* id>class>标签>通用选择器（作用于同一个标签上）

* 权重：

* 标签选择器 1

* class选择器 10

* id选择器 100

* 行级样式表 1000

* 例如：

* .div1 #div2 .div3 #div4 #li{}

* .div1 #div2 #div3 #div4 #li{}

* 如果计算的优先级相同，后写的选择器生效。

* 注意：只有交集 后代 子代选择器才参与优先级的累加，而并集选择器相当于写了多个选择器，所以不参与总的累加

 

ul li{

color: aquamarine;

}

交集选择器

写法:两个选择器紧挨着没有任何分隔,选择器1选择器2选择器3....{}

作用效果:一个标签要满足交集选择器,则必须满足交集选择器中出现的所有选择器  

#first.li1{

color: aliceblue;

}

并集选择器

*写法：选择器1，选择器2，..{}

*生效规则：只要满足并集选择器的任意一个，即可生效。 

   

 

#first,.li1{

color: cadetblue;

}

后代选择器

写法:选择器1 选择器2 选择器3{}选择器之间用空格隔开

生效规则:必须满足后一个选择器是前一个选择器的后代才可以生效.(子代/孙代/重孙..)

ul .li1{

color: red;

}

子代选择器

写法:选择器1>选择器2>选择器3{}选择器之间用>隔开

生效规则:必须满足后一个选择器是前一个选择器的直接子代才可以生效，隔代即中间包含其它标签不会生效.

ul>.li1{

color: red;

}

引入css的三种方式

1.行级样式表:在HTML标签中,使用styl=""形式

缺点:不符合w3c内容和表现分离的要求

代码杂乱,不利于后期维护

2.内部样式表:在header标签中使用

3.外部样式表:讲css代码，全部写到一个css文件中，使用link标签，将html文件与css文件关联。

css 初引

标签：原则   lin   交集   nbsp   text   三种方式   优先级   方式   height   

原文地址：http://www.cnblogs.com/shihaojia/p/7077180.html