HTML学习之级联样式单与CSS选择器

一、级联样式单

级联样式单 就是CSS 简单理解就是单独写的CSS文件

样式单优先级：内样式 > 内部定义样式 > 外部样式

引入外部CSS文件

<link type="text/css" rel="stylesheet" href="CSS文件的路径">
rel="stylesheet"一定要加，不然可能效果无法显示

导入外部样式单

！！这个用的少了解即可，尽量还是使用 l引入外部CSS文件！！

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

内部CSS样式

<style type="text/css">
	样式的定义
</style>

使用行内样式

style="样式定义";

二、CSS选择器

CSS样式有继承关系子类会继承父类的样式

1.元素选择器——最简单的选择器

元素名{……}
另外
*{……}//*代表可匹配HTML中任何元素

2.属性选择器（效果叠加，看优先级，优先级按下面顺序越往下大）

1.元素名{……}
2.E[属性]{……}//对有所写属性的E元素起作用
3.E[id*="a"]{……}//包含a
4.E[id^="a"]{……}//对id属性为a开头的E元素  E[id$="a"]{……}//以a结尾
5.E[属性=a]{……}//对有所写属性且属性为a的E元素起作用

3.id选择器 （多用于js）

#id值{……}//eg： id=x  则 #x{……}

4.class选择器（多用于css）

.class值{……}//eg： class=x  则 .x{……}

5.包含选择器（注意中间的空格）

E1 E2{……};//E1要包含E2 ，E1是父级 父级的父级……都可

6.子选择器

E1>E2{……};//这时E1必须是E2父级

7.兄弟选择器（少用，有些小毛病）

E1~E2{……};//E1 E2是兄弟有同一父级

三、伪元素选择器

:first-letter//对第一个字符
:first-line//对第一行
:before//对象前端
:after//对象尾端

相关属性

content：插入指定内容
quotes……不多赘述

结构性伪类选择器

常用：
选择器:first-child://选择器父级的第一个子元素
选择器:last-child://……的最后一个子元素
选择器:nth-child(n)://……第n个子元素
选择器:nth-last-child(n):/……倒数第n个子元素
选择器:nth-child(odd/even);//……第奇数个/偶数个元素
选择器:nth-last-child(odd/even);

UI元素状态伪类选择器

常用：
//以下两个通常对应超链接
选择器:link//未访问前
选择器:visited//访问后

选择器:hover//鼠标悬停
选择器:focus//得到焦点（按我理解可以是例如：文本框点击时）
选择器:enabled//处于可用状态
选择器:disabled//不可用状态
选择器:checked//选中状态

:not伪类选择器

E1:not(E2)；匹配E1且不符合E2的 相当于E1减去E2

脚本中修改显示样式

获取：getElementById()
修改行内CSS（link外部CSS不行）:目标.style.属性=属性值
eg:document.body.style.backgroundColor=blue;
修改HTML元素的class属性值：目标.className=class 选择器