伪类选择器:用来表示元素的一种特殊的状态,例如访问过的超链接,普通的超链接,获取焦点的文本框
正常链接 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的优先级大