2-1、css选择器

1、css选择器

如何引用css样式：

• 行内样式（内联样式）<p style="color: red;"></p>
• 内部样式表（嵌入样式） 写在style中，在head中建立style标签
• 外部样式表 链接外部的css文件，link标签
• 导入式 @import 写在style中

<style type="text/css">
	@import url("css/1.css");
	@import "css/1.css";
</style>

使用内部样式表时，有些低版本的浏览器不支持style标签，会将所有的样式原原本本地显示出来，为了避免这种情况的出现，那么，我们是使用<!-- -->将所有的属性包裹起来，那么，在低版本浏览器中，不识别style标签，就会识别<!-- -->，将所有的样式隐藏起来，在高版本浏览器中，识别style，那么就会不识别
<!-- -->，也就是无效，不影响样式的应用。
优先级：行内样式 > 内部样式 > 外部样式
1.链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
2.最后定义的优先级最高（就近原则）

对于不同的选择器，使用统一样式，使用逗号分割：

h1,p,span{font-size:50px;}

---

CSS选择器

• 标签选择器
• 类选择器
• id选择器
• 全局选择器
• 群组选择器
• 后代选择器

标签选择器：
p{color: red;}

类选择器：
给标签定义class="cl"，然后在css中写.cl{color:red;}
类是cl的p标签 p.cl{color:red;} 注意，这里是没有空格的
能够同时给一个标签定义多个类,，用空格隔开，<p class="cl1 cl2 ">

id选择器：
同一个html文件下，同一个id只能有一个。
给标签定义id="idd" ，然后在css中写 #idd{color:red;}

群组选择器：
集体统一的样式设置：
p,h1,.cl1,#idd{font-size:25px;}
全局选择器：
通配符*{font-size:25px;}

后代选择器：
x先说几个概念，根元素html，兄弟元素，父元素，子元素，祖先，后代，祖先后代关系包括父子。
p em{color:red;}注意，这里是有空格的

伪类选择器：

1. 链接伪类
   链接的四种状态：未访问状态:link，已访问状态:visited，鼠标悬停状态:hover，激活状态（点下鼠标未松开时的状态）:active。

使用伪类的时候，需要注意顺序，否则会不生效。
1.a:hover 必须置于a:link 和 a:visited之后，才有效
2.a:active必须置于a:hover之后，才有效
3.伪类名称对大小写不敏感。

:link > :visited > :hover > :active

<a href="css.html" class="a1">伪类</a>
<style type="text/css">
	.a1:link{color: red;}
</style>

也可以给其他标签设置伪类，比如p标签：

<p class="p1">测试伪类</p>

.p1:active{font-size: 50px;}

伪类：hover和：active兼容
·IE6及更早版本，支持a元素的4种状态
·IE6浏览器不支持其他元素的：hover和：active

---

CSS选择器优先级：

id选择器>class选择器>标签选择器

CSS权值：

同一样式表中：（同一样式表是指，同一外部引用文件中，同一style中）

• 权值相同：就近原则
• 权值不同：根据权值来判断CSS样式，哪种css样式权值高，就是用哪种样式。

选择器权值：

• 标签选择器：权值为1
• 类选择器和伪类：权值为10
• id选择器：权值为100
• 通配符选择器：权值为0
• 行内样式：权值为1000

权值如何计算：

• 统计不同选择器的个数
• 每类选择器的个数乘以相应权值
• 把所有的值相加得出选择器的权值
  
  p b的权值更高，所以应用的是这个。这里不遵循就近原则，因为权值不同。
  

也可以通过添加!important，强行调整优先为最高。

---

CSS命名规范

main-top
main_top
mainTop

id不要滥用，class适当的使用