css选择器
css基础
１.1 CSS整体的重点
☞ 选择器
☞ 盒子模型
☞ 浮动
☞ 定位
☞ 动画 ，伸缩布局（c3部分）
１.12 CSS特性
1. ☞ 层叠性（覆盖）
◆在同一个标签中，如果优先级相同，如果定义的样式发生冲突，那么最后一次定义的样式会将前面定义的样式（冲突的那部分）覆盖掉。（根据样式表的书写顺序额）
声明冲突：属性相同值不同，依靠层叠性解决
-
标签优先级 优胜略汰 跟来源和重要性
-
特殊性 优胜略汰
color = "red"; 普通声明
color = "red" !important;重要声明
-
源次性 优胜略汰
2. ☞继承性：
◆首先只有在嵌套关系的标签中才会出现继承性。
◆如果子元素默认没有样式，同时该元素又受父元素的样式影响
◆color ， font属性 ，text-align(此标签只能用于块标签当中)...都可以被子元素继承，文本类的样式具有继承性
◆注意：
✔width 和 height 不能被继承，块级元素宽度受父级影响，是因为块级元素特性
✔a标签在默认情况下，不能受父元素的文字颜色影响
✔标题标签在默认情况下，不能直接等于父元素设置的文字大小
3. ☞优先级
标签选择器<类选择器<ID选择器<行内样式<!important
0 0 0 0 0
选择器数量和 ，类选择器数量和，ID选择器和 相比较
同等优先级，使用靠后的样式
并集优先级单个计算
✔继承的权重为0
✔权重可以叠加
总结：
◆一般我们通过css设置样式的时候，不要把选择器的优先级设置的太高或者太低。
注意：在浏览器中交集的优先级要大于单个类或者id，但是，一个元素标签和一个类或者一个id比不上交集的优先级，大概是浏览器会在分别写的类（或id）和元素间选择一个，然后再和其他比较
属性名 = “属性值”或者 属性名 = ‘属性值’
单引号或者双引号都是一样的
１.2 CSS概念
☞ 作用：
◆美化网页（通过css控制标签的样式）
◆网页布局（通过css控制标签的位置）
☞ 概念：层叠样式表 (Cascading Style Sheets)或者级联样式表层叠：css的特性。
注意：
◆css是以html为基础
☞ 书写方式：
内部样式表
✔先准备一个html页面
✔在html页面中，head标签中添加一个style标签
✔在style标签中写css代码
◆外联式写法（外部样式表）
✔首先新建一个单独的css文件（在该文件中不需要写style标签，直接写css代码就可以）
✔通过link标签将该css文件引入到当前html页面中
注意：
一个页面中可以同时引用多个css文件
◆行内式写法：将css代码写入到html标签内部（内联样式）
☞将css代码在标签内部设置
☞总结：
✔行内样式只能影响当前标签的样式
✔行内样式会导致网页结构乱
✔样式与结构没有分离
１.3 CSS语法
☞ 选择器 {属性: 值; ......}
☞选择器分类
◆基础选择器
✔标签选择器（掌握）
✔类选择器（掌握）
✔ID选择器 在css当中尽量不要使用id选择器
✔通配符选择器
◆复合选择器
✔标签指定式选择器（交集选择器）
✔并集选择器
✔子代选择器
✔后代选择器
兄弟选择器
✔属性选择器
✔伪类选择器
１.4 标签选择器
☞ html标签名 {属性: 值;}
☞ 作用：
◆ 通过html标签名选中需要设置样式的标签
注意：
◆代码中遇到特殊符号，都必须是英文输入法下的符号。
１.5 类选择器(使用最多)
类命名规范
☞ 自定义类名不能使用纯数字或以数字开头
☞ 不推荐使用汉字定义类名
☞ 不能使用特殊字符或者以特殊字符开头（$,#,@,%...）
☞ 建议不推荐使用标签名作为类名
☞一般我们用具有一定语义的单词或者汉语拼音去定义一个类名 语义化类名
自定义类名 {属性: 值; ....} 定义
类样式的调用：
标签通过class属性去调用定义好的类样式
例如：
.test {color: red;}
<p class=”test”>文字</p>
１.6 ID选择器（了解）
#自定义id名称 {属性: 值; ....}
调用：
标签通过id属性调用id样式
#test {color: red;}
<p id=”test”></p>
ID选择器与类选择器的区别：
◆语法定义有区别 ( . #)
◆在id选择器中，一个标签只能调用一个id样式。
◆一个类样式可以被多个标签调用，但是一个id样式最好只能被一个标签调用（否则，不符合编程规则）
１.7 通配符选择器（了解）
语法：
* {属性: 值;...}
特点：
将页面中所有的标签都选中
1.8☞标签指定式选择器（交集选择器）
标签名.类名 {属性: 值;}
标签名id名 {属性: 值;}
总结：
标签指定式选择器符合 ：既。。。。又。。。的关系
注意：在浏览器中交集的优先级要大于单个类或者id，但是，一个元素标签和一个类或者一个id比不上交集的优先级，大概是浏览器会在分别写的类（或id）和元素间选择一个，然后再和其他比较
1.9☞后代选择器
选择器 选择器 {属性: 值;}
总结：
◆后代选择器标签之间的结构关系必须是嵌套结构
◆后代选择器中只能选中所有的后代元素（直接子元素和间接子元素）
◆后代选择器中，选择器与选择器之间必须使用空格隔开
注意上图的li标签样式
1.10☞ 子代选择器
选择器>选择器 {属性: 值；}
总结：
◆子代选择器只能选中直接子元素
◆子代选择器不能选中父元素
◆子代选择器标签的结构必须是嵌套结构
1.11☞兄弟选择器
兄标签 + 弟标签 { 修饰弟标签 } 单个紧挨着的弟标签
兄标签 ~ 弟标签 {修饰后边所有兄弟标签）后边所有的弟标签
1.12☞ 并集选择器（多个选择器）
选择器,选择器 {属性: 值;}
注意：
◆首先并集选择器可以选中所有符合条件的标签
◆并集选择器与标签的结构无关
◆并集选择器一般在css样式初始化的时候会使用。
１.13 属性选择器
☞属性选择器是通过标签的属性选中标签
☞语法：
[]{属性:值;....}
1.14伪类
☞给链接添加样式:
-
正常链接 a:link （存在兼容性问题，直接用a即可）
-
鼠标滑过的链接 a:hover （hover 可以用于任何标签前面）
-
正在点击的链接 a:active
-
访问过的链接 a:visited(只能定义字体颜色）该选择器会让浏览器有缓存问题；通过历史记录判断该标签是否被访问过 （用途很少）
hover作用于自身的时候只能给亲父级或者亲祖父级添加，才能影响自己
-
获取焦点 :focus
-
获取第一个子标签 :first-child
选中的元素 ::selection
1.131☞ 结构伪类选择器
1. :first-child {属性: 值；} 选中父元素中的第一个子元素
2. :last-child {属性: 值;} 选中父元素中最后一个子元素
3. :nth-child(n) {属性: 值;} 选中父元素中第n个子元素
◆n 可以取一个正整数 （取值可以取到数字0）
◆n可以设置一个关键字 odd(奇数个数) | even（偶数个数）
◆n可以是一个表达式 an+b
a和b可以设置正数和负数
注意：不能使用 n-b 这样的结果是计算机不会报错，同时会忽视nth:child()
p:nth-child(-n + 2):指的是p标签的父级的前（小于等于2）个子元素 中 的p标签
4. :nth-last-child(n){属性: 值;}
选中倒数第n个子元素
5. :first-of-type
6. :last-of-type
7. :nth-of-type
1.132☞目标伪类选择器
注意：伪类选择器是通过:
:target {属性:值;....}
◆目标伪类选择器配合锚链接使用
◆当该标签被锚链接指向的时候，那么才会执行里面的css代码。
1.133☞否定伪类 :not(元素标签)
１.145伪元素选择器
-
:first-line {} 选中父容器中的第一行
-
:first-letter{} 选中首字母（文字）
-
:before
-
:after
::selection{} 设置鼠标选中标签时的样式
注意：
::selection {}只能设置与颜色相关的属性。
现在伪元素不支持ie6
当使用nth-child的时候并不会把伪元素计算在内
总结：
after和before
◆伪元素必须设置content属性
◆伪元素属于行内元素
◆伪元素中不能再创建伪元素
◆一般是将伪元素要依附于某一个标签
: 和：：是一样的区别不大w3c文档中是：符号
◆一个标签可以同时调用多个类样式
✔一个标签只能调用一个id样式
