伪类:
anchor伪类: a:link {} 、a:visited {}、a:hover {} 、a:active
:first-child伪类:选择元素的第一个子元素,eg: p:first-child
:only-child、:nth-child(n)、:nth-last-child(n)、:last-child、:first-of-type、:last-of-type、:only-of-type、:nth-of-type(n)、:nth-last-of-type(n)
:lang 伪类:为不同的语言定义特殊的规则
动态伪类::focus
out-of-range、:in-range、:optional、:checked、 :root、:not(元素名)、 :target 用于包含该锚名称的点击的URL元素上
:read-write、:read-only、:required、:valid、:invalid、:empty、:enabled、:disabled
伪类可以与 CSS 类配合使用:eg: a.red:visited {color:#FF0000;}
eg: q:lang(no){quotes: "~" "~";}
eg: p > i:first-child{...;}
组合选择器:element,element、 element element、element>element、element+element、 element1~element2
后代选取器(以空格分隔)
子元素选择器(以大于号分隔)
相邻兄弟选择器(以加号分隔)
普通兄弟选择器(以破折号分隔)
id选择器:#id
通配选择器:*类选择器(class selector):.class
属性选择:[attribute^=value] 、[attribute$=value]、 [attribute*=value]、[attribute]、[attribute=value]、[attribute~=value]、[attribute|=language]
伪元素
:first-letter、:first-line、::selection、:before、:after eg: p:before {content: attr(class);}
注意:"first-line""first-letter" 伪元素只能用于块级元素。
:first-child 与:first-of-type的区别
:first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个,比如 p:first-of-type,就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了。同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解
伪类和伪元素的区别:
CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。
伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;
伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
X[data-*="foo"]
eg: a[data-filetype="image"] {color: red;
}
X[foo~="bar"]