CSS基础之伪类伪元素&样式优先权

/*--------------------
本文为个人学习笔记，
基于书本以及自身掌握，
对相关内容未做深入展开
--------------------*/

伪类&伪元素

---

• 首字样式控制 —— 使用伪元素::first-letter

<p>首字放大的效果</p>

p::first-letter{
    font-size: 40px;
}

首字放大

<p>uppercase</p>

p::first-letter{
    text-transform:uppercase
}

首字母大写

• 首行样式控制 —— 使用伪元素::first-line

<p>我想第一行文字有加粗效果，不管屏幕宽度多少，始终能做到这个效果。</p>

p{
    width:200px;
}
p::first-line{
    font-weight: bold;
}

首行控制

• 伪元素::before与::after用于为DOM中的元素添加内容；需要配合特有的content属性；注意，添加的内容并不真正存在于DOM中；另外，基于表现与内容分离的原则，我们使用这两个伪元素的目的是进行样式控制，而不是真正的内容输出，后者是HTML的事。
• 伪类是对CSS选择器的补充、扩展以及筛选；锚伪类即超链接伪类是最常见的，比如:hover、:link、:active、:visited等，此时的伪类用于对同一元素的不同状态进行控制，表单元素获得焦点时通过:focus伪类进行控制也相似；CSS3的:nth-child()等伪类则更多扩展了CSS选择器的“选择”功能。

样式优先权

---

• 行内（style="..."） > 内部（<style>...</style>） > 外部（<link href="..."/>）
• id选择器（#idName{}） > 类选择器（.className{}） > 元素标签选择器（p{}）
• 两行相同属性的定义，后者会覆盖前者
• !important优先于以上所有