内容概述
一. 伪类
我的理解是，伪类是方便选择器选择的：比如某个交互操作自动给元素添加的类
（如果没有伪类，在这些交互操作的时候需要用js给目标元素加上类）
伪类是把常见的功能做成现成的类
类用.作为选择符，伪类用:作为选择符
a:target这种选择器是交集选择器，中间没有空格，加了空格是后代选择器！
动态伪类（dynamic pseudo-classes）
-
共五个：
- link: a
- visted: a
- focus 获取焦点时（用于a和input元素）
-
hover 悬停时（除了用于a，也能用在其他元素上）
- active 激活的瞬间（除了用于a，也能用在其他元素上）
-
1 用于a元素
- 使用注意：
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
所以建议的编写顺序是 :link、:visited、:hover、:active - 动态伪类编写顺序建议为
:link、:visited、:focus、:hover、:active
记忆：女朋友看到LV包包后，（Feng）疯一样地ha ha大笑
- 使用注意：
-
2 hover/active应用到其他元素
strong:hover { color: purple; } -
3 获取焦点：focus
:focus指当前拥有输入焦点的元素（能接收键盘输入）
文本输入框一聚焦后，背景就会变红色
-
去除a元素默认的:focus焦点状态效果：（导航栏等）
-
方法1
outline: none;取消了效果但还是能选中（没有实现功能，不推荐）选中时（焦点状态）会给元素加上outline（轮廓），设置为none即可不显示
a:focus { outline: none; } -
方法2 将tabindex属性设置为-1，表示不能被选中
<a tabindex="-1" href="#">Google一下</a>
-
-
4 直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了
a { color: red; }- 相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red
结构伪类（structural pseudo-classes）
-
:nth-child( )
选中子元素中的第几个（除了根元素，其他都可以是子元素）
-
1
:nth-child(数字)- 例
:nth-child(1)是父元素中的第1个子元素 - 例
p:nth-child(3)
- 例
-
2
:nth-child(n)n代表任意正整数和0HTML里都是从1开始，而不是0
- 例
:nth-child(2n)是父元素中的第偶数个子元素（第2、4、6、8...个）（0在这里没有意义）
跟:nth-child(even)同义 - 例
:nth-child(2n + 1)是父元素中的第奇数个子元素（第1、3、5、7......个）
跟:nth-child(odd)同义 - n的表达式
- 2n + 3 ：3，5，7……
- -n + 3：3，2，1（n从0开始递增）（常用）
- 例
-
:nth-last-child( ) 从后向前数
:nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
1
:nth-last-child(数字)-
2
:nth-last-child(n)n代表任意正整数和0:nth-last-child(1)，代表倒数第一个子元素
:nth-last-child(-n + 2)，代表最后2个子元素
-
:nth-of-type( )
- :nth-of-type()用法跟:nth-child()类似，不同点是:nth-of-type()计数时只计算同种类型的子元素
- 注意
- nth-child()是所有子元素，如果类型不同, 忽略
- nth-of-type()是同种类型的子元素
-
:nth-last-of-type( )
- 从后向前数
-
其他结构伪类：
- :first-child，等同于:nth-child(1)
- :last-child，等同于:nth-last-child(1)
- :first-of-type，等同于:nth-of-type(1)
- :last-of-type，等同于:nth-last-of-type(1)
- :only-child，是父元素中唯一的子元素
- :only-of-type，是父元素中唯一的这种类型的子元素
- :root，根元素，就是HTML元素
- empty，内容完全空白的元素
其他伪类（用得较少）
-
目标伪类 :target
- 用于锚点
- 例：点击链接，跳到目标位置的标题（用锚点实现），标题变红（用js）
-
元素状态伪类（UI element states pseudo-classes）
:enabled、:disabled、:checked(input)
-
例：给不可交互按钮button设置样式
:disabled { color: red; } /*相当于*/ button[disabled] { color: red; }button 有disabled等属性
-
否定伪类:not()
- :not(x)表示除x以外的元素，特殊场景下用
- x是一个简单选择器：元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
- class不香吗?
- 注意：会选中HTML元素，可以在Chrome调试的时候看到继承情况
语言伪类（language pseudo-classes）:lang( )
二. 伪元素
-
常用的伪元素有：
- :first-line、::first-line（很少用）
- :first-letter、::first-letter （很少用）
- :before、::before（常用）
- :after、::after（常用）
为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line
-
::first-line、::first-letter（很少用）
- ::first-line可以针对首行文本设置属性
- ::first-letter可以针对首字母设置属性
- 只有下列属性可以应用在::first-line伪元素
- ·字体属性、颜色属性、背景属性
word-spacing、letter-spacing、text-decoration、text-transform、line-height
- ·字体属性、颜色属性、背景属性
- 只有下列属性可以应用在::first-letter伪元素
- 字体属性、margin属性、padding属性、border属性、颜色属性、背景属性
text-decoration、text-transform、letter-spacing、word-spacing（适当的时候）、line-height、float、vertical-align（只有当float是none时）
- 字体属性、margin属性、padding属性、border属性、颜色属性、背景属性
-
::before、::after（常用）
-
::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片）
.box::before { content: "插入的文本"; color: red; font-size: 20px; } .box::after { /* content: url(../img/diqiu.jpg); */ content: ""; display: inline-block; width: 30px; height: 30px; background-color: #f00; }- 注意：【content必须要写】没有content也要写个空字符串
“”
- 注意：【content必须要写】没有content也要写个空字符串
-
在CSS属性值中，使用url(图片的URL)来引用图片
url(dot.png);
url('dot.png');
url("dot.png");加不加引号都可以
-
三. Emmet语法
- !和html:5
- !和html:5可以快速生成完整结构的html5代码
-
>（子代）和+（兄弟）
Emmet语法注意点：中间不要留空格
-
*（多个） -
^（上一级）和()（分组） - 属性(id属性
#、class属性.、普通属性[])div#header+div.page+div#footer.class1.class2.class3td[title=hello]
- 内容{}
a{click}+span{here}
- $
ul>li.item$*5-
ul>li.item$$$*5，生产001、002、……、005
- 隐式标签
- 一般省略标签默认是div
- ul>.item ul下默认是li
- table>.row>.content table下默认是tr td(讲完table回头看)
- css emmet语法
- whmp
- fz fw
- lh bgc
- dib
四. CSS的特性
-
继承
-
一个元素如果没有设置某属性的值，就会跟随父元素的值
比如color、font-size等属性都是可以继承的
并不是所有的属性都可以继承(文本相关属性, 更多的去查文档MDN)，究竟哪些属性可以继承，不用死记硬背，用多了自然熟练。而且可以随时查阅官方文档找到答案
-
不能继承的属性，一般可以使用inherit值强制继承
img { width: 100%; /* width: inherit; */ }浏览器的开发者工具也会标识出哪些样式是继承过来的inherited from
-
注意：【CSS属性继承的是计算值】，并不是当初编写属性时的指定值（字面值）
- 例：0.5em，继承的是计算后的px值
-
-
层叠
基本层叠: 选择器相同时, 后面的属性会层叠前面的属性
-
优先级(权重)
- !important: 10000
- 内联样式: 1000
- id: 100
- 类/伪类/属性: 10
- 元素/伪元素: 1
通配符：0
优先比较优先级高的选择器
比较优先级的严谨方法
从权值最大的开始比较每一种权值的数量多少，数量多的则优先级高，即可结束比较
如果数量相同，比较下一个较小的权值，以此类推
如果所有权值比较完毕后，发现数量都相同，就采取“就近原则”
- CSS经验
- 为何有时候编写的CSS属性不好使，有可能是因为
选择器的优先级太低
选择器没选中对应的元素
CSS属性的使用形式不对
元素不支持此CSS属性，比如span默认是不支持width和height的
浏览器不支持此CSS属性，比如旧版本的浏览器不支持CSS3的某些属性
被同类型的CSS属性覆盖，比如font覆盖font-size - 建议：充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错
- 为何有时候编写的CSS属性不好使，有可能是因为
快捷键
- alt + shift + f: 代码格式化
提问
1.文字相关的属性
- text-align
- text-transform
- text-decoration
- text-indent
- letter(字母)-word(单词)-spacing
2.字体相关的属性
- font-size
- font-family
- font-weight
- font-style
- font-varient
- line-height
- font
3.关键的选择器
- 后代选择器: .box 空格 其他选择器
- 子代选择器: >
- 相邻/全兄弟选择器: + ~(全)
- 交集选择器: div.box
- 并集选择器: div, .box
