css学习笔记总结 css选择器及优先级总结

7种css选择器

    id 选择器 #
    类选择器 a.red{color:red}
    伪类选择器 a:link 未访问的 a:visited 访问过的 a:active 正在活动的 a:hover
    属性选择器 [title]{color:blue} type title等标签属性都可以作为选择器
    伪元素选择器 p:first-line  设置块级标签首行样式
    组合选择器 后代 空格| 子元素 > | 相邻+ |普通兄弟 ~
    标签选择器 p h1

1. 伪类和伪元素与类的区别
   从样式上 类是一个. 伪类是两个点 : 例如 a:link

   从概念上：

   伪类是类似于类选择器，但又不是类选择器，区别在于伪类选择元素基于的是当前元素处于的状态，是动态的，而不是元素的 id、class、属性等静态的标志。当状态改变时，不同的伪类状态可能会失效或生效，它的功能和 class 有些类似，但本质不同，所以叫伪类。

   伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。【也就是因为控制的范围很小，并不会在文档中用特定的标签显示出来，但也是一种特殊的元素，比如段落的第一行，段落的第一个字，或段落特定内容的前后插入内容等，在 html 标签中无法看到有标签表示这些特殊含义，但确实是页面元素的内容。】

样式表及优先级

（内联样式）Inline style
（内部样式）Internal style sheet
（外部样式）External style sheet

内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器
1000 100 10 10 10 1 1