伪类，伪元素和vertical-align属性
1.伪类和伪元素
伪类用于在页面中的元素处于某个状态时，为其添加指定的样式。
伪元素会创建一个抽象的伪元素，这个元素不是DOM中的真实元素，通过JS，也抓取不到伪元素，也不能给它绑事件，但是会存在于最终的渲染树中，我们可以为其添加样式。
伪类是使用单冒号:伪元素使用双冒号::。
-
伪元素不属于文档，所以js无法操作它
-
伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件
常见的伪元素
::before
在当前元素的内容的前面插入一个子元素。插入的元素为内联元素。
需要注意的是，使用::before时， 必须使用content来指定子元素的内容。
.element::before{
content: ;
}
::after
在当前元素的内容的后面插入一个子元素。
其他和 ::before类似。
<style>
p::after{
content:"明天";
}
</style>
<p>你好</p>
伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。
content属性的值可以有
- 字符串，字符串作为伪元素的内容添加到主元素中
-
attr(attr_name), 伪元素的内容跟主元素的某个属性值进行关联，及其内容为主元素的某指定属性的值 -
url()/uri(), 引用外部资源，例如图片； -
counter(), 调用计数器，可以不使用列表元素实现序号问题。
::first-line
选择当前元素的第一行。
需要注意的是，其只作用于块级元素
对::first-line使用margin和padding是无效的。
为文本首行设置样式
<style>
p::first-line{
color:red;
}
</style>
<p>你好<br />明天</p>
::first-letter
选择第一个字母。
<style>
p::first-letter{
color:red;
}
</style>
<p>你好，明天</p>
::selection
选中当前元素中，选中的文字。
对::selection的只能使用 color, background-color和text-shadow这几个属性。
2.伪类
当已有的元素处于某个状态时或者为了表达文档树之外很难具体表达的信息，就可以通过伪类为其添加相对应的样式
常见的伪类
-
状态伪类：是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。
常见的状态伪类主要包括：
-
:link 伪类将应用于未被访问过的链接，与:visited互斥。
-
:hover 应用于鼠标悬停到的元素；
-
:active 伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。
-
:visited 应用于被访问过的链接，与:link互斥。
-
:focus 应用于拥有键盘输入焦点的元素。
-
:first-child 伪类将应用于元素在页面中第一次出现的时候。
-
:lang 伪类将应用于元素带有指定lang的情况。
<html> <head> <title>first-child用法</title> <style type="text/css"> q:lang(no){quotes:"~" "~";color:red;} <style> </head> <body> <p>文字<q lang="no">段落中引用的文字</q>文字</p> </body> </html>
-
结构性伪类：通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。
常见的结构性伪类包括：
- :first-child 选择某个元素的第一个子元素；
<html> <head> <title>first-child用法</title> <style type="text/css"> p:first-child{color:red;} /*表示第一个子段落的颜色为红色*/ <style> </head> <body> <p>firstTime</p> <p>firstTime</p> </body> </html>-
:last-child 选择某个元素的最后一个子元素；
-
:nth-child() 选择某个元素的一个或多个特定的子元素；
-
:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
-
:nth-of-type() 选择指定的元素；
-
:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
-
:first-of-type 选择一个上级元素下的第一个同类子元素；
-
:last-of-type 选择一个上级元素的最后一个同类子元素；
-
:only-child 选择的元素是它的父元素的唯一一个子元素；
-
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
-
:empty 选择的元素里面没有任何内容。
-
:checked匹配被选中的input元素，这个input元素包括radio和checkbox。
-
:default匹配默认选中的元素，例如：提交按钮总是表单的默认按钮。
-
:disabled匹配禁用的表单元素。
-
:enabled匹配没有设置disabled属性的表单元素。
-
:valid匹配条件验证正确的表单元素。
行内元素与行内块元素的的margin-top问题
行级元素，不能设置宽和高，但是padding属性可以设置，注意行级元素不能设置margin-top和margin-bottom,但是可以设置margin-left和margin-right属性。如果需要设置行级元素的margin-top或margin-bottom属性，必须将行级元素转换成行内块元素或块级元素。
行内元素转换为行内块元素：
display:inline-block;
常见的行内元素和块元素
| 级别 | 元素 |
|---|---|
| 行内元素 | a,b,strong,span,img,label,button,input,select,textarea |
| 块级元素 | header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer |
行内元素margin-top 其他元素也被拽下来问题
设置头部样式时时常有给图标设置样式旁边的文字也一起下来的情况
行内元素默认对齐方式是vertical-alignver：baseline；图片会和span保持队形
解决方法：
- 可以用vertical-align来解决
- 或者加浮动
vertical-align
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。
vertical-align属性值及含义
| 属性值 | 含义 |
|---|---|
| baseline | 基线对齐。行内框的基线与父元素的基线对齐 |
| sub | 下标对齐。将行内框的基线下降到父元素适合下标的位置 |
| super | 上标对齐。将行内框的基线上升到父元素适合下标的位置 |
| top | 顶部对齐。行内框的顶线与行框的顶线对齐。 |
| text-top | 文本顶部对齐。行内框的顶线与父元素的text-top对齐 |
| middle | 居中对齐。行内框的中线与父元素的中线对齐 |
| bottom | 底部对齐。行内框的底线与行框的底线对齐 |
| text-bottom | 文本底部对齐。行内框的底线与父元素的text-bottom对齐 |
vertical-align 属性设置一个元素的垂直对齐方式。
第一个用到vertical-align:text-top;
第二个用到vertical-align:text-bottom;
总结：
- 只有元素属于inline或是inline-block ，vertical-align属性才会起作用。
- vertical-align，取值是百分数值时，是相对于此标签继承的line-height值决定的。
- line-height，取值是百分数值时，是相对于当前的font-size值决定的。