前端HTML学习笔记2017-04-16

伪类选择器：用来表示元素的一种特殊的状态，例如访问过的超链接，普通的超链接，获取焦点的文本框

正常链接            a:link     访问过的链接    a:visited(只能定义字体颜色)

鼠标滑过a:hover            正在点击的链接              a:active

获取焦点     input:focus 选中元素 p::selection{}在火狐中使用p::-moz-selection{}

伪元素：选择元素中的特殊位置

例如：p:first-letter{}选中的是p段落的中的第一个字

              P:first-line{}选中的是p段落中的第一行

       p:before{}选中元素最前面的部分，p:after{}选中元素最后面的部分，这两个标签都需要结合content这个样式一起使用，p:before{content : ”我会出现在段落的最前面”}

属性选择器：可以根据元素中的属性或属性值选取指定元素

例如：选择p段落中有title属性的段落p[title]{}

              选择p段落中有title属性值为hello的段落p[title=”hello”]{}

              选中p段落中title属性以ab开头的段落p[title^=”ab”]{}

选中p段落中title属性以ab结尾的段落p[title$=”ab”]{}

选中p段落中title属性包含ab的段落p[title*=”ab”]{}

其他子元素选择器

       :first-child     选择第一个子元素 例如：p: first-child{}

       :last-child      选择最后一个子标签

       :nth-child(3) 选择指定位置3的子元素,或传入even表偶数位置，odd表奇数

       :first-of-type        :last-of-type         :nth-of-type         选择指定类型的子元素

       例如:     p:first-of-type{}选择类型为p的第一个子元素，含type是在类型中排序取第一个子元素，没有type是在所有的子元素中排序，取指定类型的第一个子元素，若一个子元素的类型不符合查找的类型，就选择不到该元素

兄弟元素：

可以选中一个元素后紧挨着指定的一个兄弟元素 前一个+后一个 span+p

可以选中一个元素后所有的兄弟元素 前一个~后面所有 span~p 

否定伪类：选择所有的p元素，除了class的值为hello的p   :p:not(.hello)

样式的继承：css中，祖先元素的样式，也会被他的后代元素继承，利用继承，将一些基本的样式设置给祖先元素，并不是所有的样式都会被子元素所继承，比如背景相关的颜色并不会被继承。

选择器的优先级

使用不同的选择器，选中同一个元素时并设置相同的样式时，就会有优先级

优先级规则

       内联样式1000>id选择器100>类和伪类选择器10>元素选择器1>通配选择器0>继承样式-1

当有多个选择器的时候，在比较优先级的时候需要将优先数值相加

例如: p#p2的优先数值为1+100   就比 #p2 100的优先级大