CSS选择器

css的三种使用方式

1.行内样式。不推荐使用。如果只有这么一个的话要改变样式，偷懒也可以。

2内部样式表。放在head标签里面的

3.外部样式表。（推荐）分离样式。

外部引用CSS的两种方式

1.外部引用css（建议采用外部引用的方式）
<link rel="stylesheet" href="css/style.css">

• 外部引用CSS的优势。内容和表现分离。
• 网页结构比较统一，可以实现复用。
• 样式十分丰富。
• 建立使用独立于HTML的CSS文件。
• 利用SEO容易被搜索引擎收录。

2.导入式 这个是CSS2.1之后特有的。

<style>
 @import url("链接url")
</style>

优先级：行内样式>内部样式表>外部样式表。也就是，就近原则。

第一部分基础选择器。

CSS的选择器。一共有三种。

作用:选择页面中的某一个或者某一类元素。

基本选择器

h1{
	1.标签选择器。
	选中所有的h1标签元素。
}
class="name"
.name{
	类选择器。优点是可以跨标签。
	可以多个标签归类，属于同一个class。
}
#id名{
    3.id选择器。Id必须全局唯一。
    id="id名"
}

优先级：Id选择器>类选择器>标签选择器。

第二部分层次选择器。

层次选择器不改变自己。

body p{
	1.后代选择器。body下所有p标签
}
p>a{
	2.子选择器，p标签的子类标签
}
.active + p{
	3.相邻兄弟选择器。只有向下的邻居会发生变化。
	class下面的第一个p标签才会发生变化。
}
.active~p{
    4.通用选择器
    当前选中元素的向下的所有的兄弟元素。
}

css style以分号为结尾

伪类选择器

结构 伪类选择器带冒号的一般都是伪类

ul li:first-child{
	选中ul列表的第一个元素
}
ul li:last-child{
	选中列表的最后一个元素。
}
p:nth-child(1){
	选择当前p元素的父级元素。选中父级元素的第一个，并且是当前元素才生效。
}
p:nth-type(2){
	选中父元素下的，p元素的第二个类型。
}
a:hover{
	鼠标悬停时，a标签会产生变化
}

属性选择器，可以支持正则表达式。

a[id=first,class="links"]{<--!属性选择器可以选择多个参数-->
	可以选择a标签，Id为多少多少的
}
a[class="links"]{
	这里是绝对的。必须等于links才能够改变。
}
a[class*="links"]{
	这里是相对的。包含links都能够改变。
}

a[class$="links"]{
	祝你选中以links为结尾的class
}

美化网页
span标签，约定俗成，很重要的元素都放在里面。