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的选择器。一共有三种。

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

基本选择器

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

第二部分层次选择器。

层次选择器不改变自己。
一后代选择器。
body p{
}
二子选择器
body>p{
}

三相邻兄弟选择器。只有向下的邻居会发生变化。
.active + p{
class下面的第一个p标签才会发生变化。
}
四通用选择器
.active~p
{,当前选中元素的向下的所有的兄弟元素。
}

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标签，约定俗成，很重要的元素都放在里面。