首页 > 代码库 > css 初引
css 初引
标签选择器:
作用:根据选择器的名称,选中页面中所有的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标签中使用<style>标签包裹css代码
<head>
<style type="text/css">
</style>
</head>
3.外部样式表:讲css代码，全部写到一个css文件中，使用link标签，将html文件与css文件关联。
<link rel="stylesheet" href="http://www.mamicode.com/css/.." />
css 初引