伪类和伪元素
- 给链接定义样式
- 正常链接： ：link
- 访问过的链接： ：visited（只能定义字体颜色）
- 鼠标滑过的链接： ：hover
- 正在点击的链接： ：active
- 其他
- 获取焦点： ：focus
- 指定元素前： ：before
- 指定元素后： ：after
- 选中的元素： ：：selection
- 其他选择器
- 给段落定义样式
- 首字母： ：first-letter
- 首行： ：first-line
- 属性选择器 可以挑选带有特殊属性的标签。
[属性名]
[属性名="属性值"]
[属性名-="属性值"]
[属性名|="属性值"]
[属性名^="属性值"]
[属性名$="属性值"]
[属性名*="属性值"]
子元素选择器
- 子元素选择器可以给另一个元素的子元素设置样式
- 语法： 父元素>子元素{ }
- 比如body>h1将选择body子标签中的所有h1标签
其他子元素选择器
- 选择第一个子标签 ：first-child
- 选择最后一个子标签 ：last-child
- 选择指定位置的子元素 ：nth-child
- 选择指定类型的子元素
:first-of-type
:last-of-type
:nth-of-type
兄弟选择器
- 除了根据祖先父子关系，还可以根据兄弟关系查找元素。
- 语法：
否定伪类
- 否定伪类可以帮助我们选择不是其他东西的某种东西
- 语法 ：not(选择器){ }
- 比如p:nto(.hello)表示选择所有的p元素但是class为hello的除外
继承
- 就像父亲的财产会遗传给儿子一样，在CSS中祖先元素的样式同样也会被子元素继承
- 继承是指应用在一个标签上的那些CSS样式会同时被应用到其内嵌标签上
- 比如为父元素设置了字体颜色，子元素也会应用上相同的颜色
- 当然并不是所有的样式都会被继承
选择器的优先级
- 内联样式：优先级1000
- id选择器：优先级100
- 类、属性、伪类选择器：优先级10
- 元素选择器：优先级1
- 通配符：优先级0
- 继承：没有优先级
文本标签
- < em >和< strong >
- em标签用于表示一段内容中的着重点
- strong标签用于表示一个内容的重要性
- 这两个标签可以单独使用，也可以一起使用
<p>
<strong>警告：任何情况下不要接近僵尸。</strong>
他们只是<em>看起来</em>很友好，实际上他们是为了吃你的胳膊！
</p>
- < i >和< b >
- i标签会使文字变成斜体
- b标签会使文字变成粗体
- 这两个标签和em和strong类似，但是这两个标签没有语义
- 所以根据html5标准，当我们只想设置文本特殊显示，而不需要强调内容时就可以使用i和b标签
- < small >
- small标签表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等
- 浏览器在显示small标签时会显示一个比父元素小的字号
<p><small>©2018爱奇艺.保留所有权利.</small></p>
- < cite >
- 使用cite标签可以指明对某内容的引用或参考。例如，戏剧、文章或图书的标题，歌曲、电影、照片或雕塑的名称等
<p>
<cite>《七龙珠》</cite>讲的是召唤神龙的故事</p>
- < blockquote >和< q >
- blockquote和q表示标记引用的文本
- blockquote用于长引用，q用于短引用
- 在两个标签中还可以使用cite属性来表示引用的地址
孟子曾经说过：
<blockquote>天将降大任于斯人也</blockquote>
他说的真对啊！
<p>孔子曾经说过：<q>学而时习之不亦悦乎</q><p>
- < sup >和< sub >
- sup和sub用于定义上标和下标
- 上标主要用于表示类似于103中的3
- 下标则用于表示类似于H2O中的2
- < ins >和< del >
- ins表示插入的内容，显示时通常会加上下划线
- del表示删除的内容，显示时通常会加上删除线
- < code >和< pre >
- 如果你的内容包含代码示例或文件名，就可以使用code元素
- pre元素表示的时预格式化文本，可以使用pre包住code来表示一段代码
<pre>
<code>
function fun(){
alert("hello")
}
</code>
</pre>