CSS基础——基本选择器、高级选择器
什么是CSS
1.Cascading Style Sheet 级联样式表
2.表现HTML 或 XHTML文件样式的计算机语
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
CSS的发展史
CSS的优势
1.内容与表现分离
2.网页的表现统一，容易修改
3.丰富的样式，使得页面布局更加灵活
4.减少网页的代码量，增加网页的浏览速度，节省网络带宽
5.运用独立于页面的CSS，有利于网页被搜索引擎收录
CSS基本语法结构
语法
选择器 { 声明1;
声明2;
}
h1 {
font-size:12px;
color:#F00;
}
h1
font-size
12px
font-size:12px;
CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上
style标签
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>
HTML中引入CSS样式
1.行内样式
使用style属性引入CSS样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
2.内部样式表
CSS代码写在< head>的< style>标签中
<style>
h1{color: green; }
</style>
①.优点
方便在同页面中修改样式
②.缺点
不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
3.外部样式表
1.CSS代码保存在扩展名为.css的样式表中
2.HTML文件引用扩展名为.css的样式表，有两种方式
①链接式
②导入式
1.链接外部样式表
语法
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
href=“style.css”
rel=“stylesheet”
type=“text/css”
2.导入外部样式表
语法
<head>
<style type="text/css">
@import url("style.css");
</style>
</head>
链接式与导入式的区别
1.标签属于XHTML，@import是属于CSS2.1
2.使用链接的CSS文件先加载到网页当中，再进行编译显示
3.使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4.@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
CSS样式优先级
1.行内样式>内部样式表>外部样式表
2.就近原则
CSS3基本选择器
1.标签选择器
2.类选择器
3.ID选择器
1.标签选择器
HTML标签作为标签选择器的名称
< h1>…< h6>、< p>、< img/>
语法
h1 {
font-size:12px;
color:#F00;
}
h1
font-size
12px
font-size:12px;
2.类选择器
语法
<标签名 class= "类名称">标签内容</标签名>
.class { font-size:16px;}
.class 类名称
font-size 属性
16px; 值
font-size:16px; 声明
3.ID选择器
语法
#id { font-size:16px;}
”#“ id id名称
font-size 属性
16px 值
font-size:16px； 声明
小结
1.标签选择器直接应用于HTML标签
2.类选择器可在页面中多次使用
3.ID选择器在同一个页面中只能使用一次
基本选择器的优先级
ID选择器>类选择器>标签选择器
标签选择器是否也遵循“就近原则”？
不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 >class类选择器 >标签选择器的优先级
CSS的高级选择器
1.层次选择器
2.结构伪类选择器
3.属性选择器
1.层次选择器
E F ------后代选择器 ------选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F ------子选择器 ------选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F ------相邻兄弟选择器 ------选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F ------通用兄弟选择器 ------选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
后代选择器
语法
body p{ background: red; }
后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入
子选择器
语法
body>p{ background: pink; }
相邻兄弟选择器
语法
.active+p { background: green; }
通用兄弟选择器
语法
.active~p{ background: yellow; }
结构伪类选择器
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用CSS3结构伪类选择器</title>
</head>
<body>
<p>p1</p><p>p2</p><p>p3</p>
<ul>
<li>li1</li><li>li2</li><li>li3</li>
</ul>
</body>
</html>
| 选择器 | 功能描述 |
|---|---|
| E:first-child | 作为父元素的第一个子元素的元素E |
| E:last-child | 作为父元素的最后一个子元素的元素E |
| E F:nth-child(n) | 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd |
| E:first-of-type | 选择父元素内具有指定类型的第一个E元素 |
| E:last-of-type | 选择父元素内具有指定类型的最后一个E元素 |
| E F:nth-of-type(n) | 选择父元素内具有指定类型的第n个F元素 |
ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}
小结
使用E F:nth-child(n)和EF:nth-of-type(n)的 关键点
EF:nth-child(n)在父级里从一个元素开始查找，不分类型
EF:nth-of-type(n)在父级里先看类型，再看位置
属性选择器
| 属性选择器 | 功能描述 |
|---|---|
| E[attr] | 选择匹配具有属性attr的E元素 |
| E[attr=val] | 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写） |
| E[attr^=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串 |
| E[attr$=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串 |
| E[attr*=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配 |
E[attr]属性选择器
语法
a[id] { background: yellow; }
E[attr=val]属性选择器
语法
a[id=first] { background: red; }
E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中
E[attr=val]属性选择器*
语法
a[class*=links] { background: red; }
E[attr^=val]属性选择器
语法
a[href^=http] { background: red; }
E[attr$=val]属性选择器
语法
a[href$=png] { background: red; }