[note] CSS 伪类|伪元素|Emmet|继承

作者: 反复练习的阿离很笨吧 | 来源:发表于2020-02-06 15:06 被阅读0次

内容概述

一. 伪类

我的理解是，伪类是方便选择器选择的：比如某个交互操作自动给元素添加的类

（如果没有伪类，在这些交互操作的时候需要用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代表任意正整数和0
  
  HTML里都是从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时）
::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也要写个空字符串“”
- 在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.class3
- td[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
- 优先比较优先级高的选择器
- 比较优先级的严谨方法
  从权值最大的开始比较每一种权值的数量多少，数量多的则优先级高，即可结束比较
  如果数量相同，比较下一个较小的权值，以此类推
  如果所有权值比较完毕后，发现数量都相同，就采取“就近原则”

屏幕快照 2020-02-06 下午3.00.52.png

CSS经验
- 为何有时候编写的CSS属性不好使，有可能是因为
  选择器的优先级太低
  选择器没选中对应的元素
  CSS属性的使用形式不对
  元素不支持此CSS属性，比如span默认是不支持width和height的
  浏览器不支持此CSS属性，比如旧版本的浏览器不支持CSS3的某些属性
  被同类型的CSS属性覆盖，比如font覆盖font-size
- 建议：充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错

快捷键

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

[note] CSS 伪类|伪元素|Emmet|继承

内容概述

一. 伪类

动态伪类（dynamic pseudo-classes）

结构伪类（structural pseudo-classes）

其他伪类（用得较少）

二. 伪元素

三. Emmet语法

四. CSS的特性

快捷键

提问

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读