CSS选择器的分类与应用
一.概述
计算机前端分为HTML，CSS，JavaScript。前端工程相当于造房子，HTML是利用许多的标签把大的空间划分为一个个小的独立的空间。CSS相当于做装修的。HTML与CSS两个组成一个静态的不与人交互的房子。JavaScript是做交互的，分为效果交互与数据交互。（数据交互JavaScript自己做太难，所以需要jQuery。jQuery是一个JavaScript库，把JavaScript的方法进行封装）层叠样式单:加样式
CSS是层叠样式单,它的作用是加样式。CSS又分为选择器 :选择哪些元素来加样式； 盒子模型:元素本身特性:内联级元素，块级元素，弹性盒子；布局:横着布局（用float,内联块级元素布局，弹性盒子布局)，竖着布局（用div标签）。CSS有各种样式。下面我们先说CSS选择器的分类与应用。
二.选择器样式的分类
1.内部样式
在当前html文件上的<head></head>加style标签来写样式
<style>
div {
color:pink;
background:white;
}
p {
color:pink;
background:white;
}
</style>2.外部样式
单独建一个css文件，利用link进行关联来写样式
link这个语句写在<head></head>里
<link rel="stylesheet" href="css/css选择器.css">3.行内样式
一行一行的写
<div style="color: red;background:yellow"></div> 三.三种样式优先级的比较
行内样式优先级最高 外部样式=内部样式，谁在下面执行谁
四.选择器外部样式的基本格式
选择器 {
属性：值；
属性1：值1；
}
div {
color:pink;
background:yellow;
}
五. 选择器外部样式的分类
一.基本选择器
1.元素选择器 ：用元素名称做选择
div {
color:pink;
background:yellow;
} 特例：选择所有元素用
* {
color:pink;
background:yellow;
} 2. 属性选择器
什么属性都可以，class,aaa,id,bbb
div[id] 有id属性的div元素
div[id=xx] 有id属性，且id属性值为xx的div元素
div[id*=xx] 有id属性，且id属性值包含xx的div元素
div[id^=xx] 有id属性，且id属性值以xx开头的div元素
div[id$=xx] 有id属性，且id属性值以xx结尾的div元素
div[id] {
color:pink;
background:yellow;
}
div[id=xx] {
color:pink;
background:yellow;
} 3.id选择器
#后跟id的值
#xx{
color:pink;
background:yellow;
}4.class选择器
/* .后跟class的值 */
特例：结合选择器
/* 既是p标签的，又是class值为xx的 */
p.xx{
color:pink;
background:yellow;
}5.包含选择器 selector1 selector2
/* div下的所有p标签 用空格 强调包含 div的子孙后代 */
div p{
color:pink;
background:yellow;
}6.子选择器 selector1>selector2
/* 只强调父子关系 */
div>p{
color:pink;
background:yellow;
}7.兄弟选择器 selector1~selector2
/* class用.cc表示 以下表示class值为cc的之后的li标签*/
.cc~li{
color:pink;
background:yellow;
}/* 找之后所有的标签 */
.cc~*{
color:pink;
background:yellow;
}8.选择器组合 selector1，selector2，selector3
/* 有限且样式重复 用选择器组合 */
/* 而 * 都会选择，包括背景 */
p,
div a,
span{
color:pink;
background:yellow;
}二.伪元素选择器
1.首字母
只给首字母加样式
/* div::first-letter只能用于块级元素，即竖着分布的元素 div标签 h标签 */
div::first-letter{
color:pink;
font-size: 30px;
background:yellow;
}2.首行
/* div::first-line只能用于块级元素，即竖着分布的元素 div标签 h标签*/
div::first-line{
/* 单词裂开 */
word-break: break-all;
color:pink;
font-size: 30px;
background:yellow;
}3.在前边插入
/* ::before 样式也是给前面加入的东西加上的，html里没有，但页面有 */
div::before{
content:"aaaa";
color:pink;
font-size: 30px;
background:yellow;
}4.在后边插入
/* ::after */
div::after{
content:"aaaa";
color:pink;
font-size: 30px;
background:yellow;
}三.伪类选择器
1.结构型伪类选择器
:nth-child()
只认数字，如果类型刚好符合，则被选中，否则无效果
括号里可以是数字n n从1开始
可以是英文单词 odd为奇数 even为偶数
括号里可以是表达式 5n+2 n从0开始
找第一个：nth-child(1) 与first-child等价
找最后一个：last-child 与 nth-last-child(1)等价
倒着数：nth-last-child()
:nth-of-type()
既认数字也认类型，找同类型的第n个元素
括号里可以是数字n n从1开始
可以是英文单词 odd为奇数 even为偶数
括号里可以是表达式 5n+2 n从0开始
找第一个：first-of-type 与nth-of-type(1)等价
找最后一个：last-of-type 与 nth-last-of-type(1)等价
倒着数：nth-last-of-type()
ul li:nth-last-of-type(3n+2){
color:pink;
font-size: 30px;
background:yellow;
}2.ui状态伪类选择器
：hover 鼠标悬停状态 鼠标在上面，但没有点击所呈现状态
：focus 焦点状态 鼠标已点击所呈现状态
：checked 选中状态 对于复选框
ul li:hover{
color:pink;
background:yellow;
}/* 对于输入框或复选框用input */
input:checked{
/* 加阴影 阴影的水平偏移量 阴影的垂直偏移量 阴影的模糊度 阴影的颜色*/
box-shadow: 3px 3px 3px red;
}3.其它伪类选择器
not() 排除括号里的剩下加状态 ()括号里填标签所赋予的class值，例如.Java .php
ul li:not(.java):not(php){
color:pink;
background:yellow;
} 六.选择器的优先规则
1.选择器写的越长（越准确），优先级越高
2.优先级高低：id选择器>class选择器>元素选择器
3.同级别长度下，css代码按顺序执行，后边的效果会把前边的覆盖掉
4.终极规则：以上规则适用大部分场景特殊场景不适用，自行测试