Winteriscoming

CSS伪类/伪元素包括:

Link相关的

:link

:visited

:hover

:active

Link和Input相关的

:focus

:target

:enabled

:disabled

:checked

:indeterminate//没有默认选中的一组单选按钮

:required

:optional

:read-only

:read-write

位置数目相关的

:root基本上就是选中html了,除非某些特殊情况比如xml文档中

:first-child是父节点的第一个子元素

:last-child是父节点的最后一个元素

:nth-child()括号类可以有多重写法比如2n+1,关键字odd,even分别选中奇数和偶数,或填写具体数字,只选该数字的节点

:nth-of-type()类似nth-child,但是能应用到不同类型

:first-of-type选中父节点中的第一个该类型的子元素

:last-of-type选择父节点中的最有一个该类型的子元素

:nth-last-of-type()同nth-of-type,但是顺序反过来,从最后往选

:only-of-type是父节点的唯一子节点时选中

关系伪类选择器

:not()排除法选择器

:empty选择既没有文本也没有子元素的元素

文本相关的

::first-letter选择第一个字母

::first-line选择第一行

:lang语言选择器

部分示例

!DOCTYPEhtmlstylea:link{color:00FF00}a:hover{color:0000FF}/*选择获取焦点的input输入框*/input:focus{border:1pxgreenbold;}/*选择元素p内的第一个字母*/p:first-letter{text-transform:uppercase;color:red;}/*选择元素p内的第一行*/p:first-line{text-decoration:underline;}/*选择属于其父元素的第一个子元素p*/p:first-child{color:firebrick;}/*在元素前面添加内容*/span:before{content:"";}/*在元素后面添加内容*/span:after{content:"";}/*选择前面有section元素的所有div元素,不管中间是否有别的元素*/section~div{background-color:red;}/*使用户选择的元素背景变为深橙色*/::selection{background-color:darkorange;}/styleahref=";source=search_tab"ALink/abrinputtype="text"name="name"id="name"pthisisaparagraph.//pdivpFirstchild/ppSecondchild/p/divspanATaleofTwoCities/spansection/sectionp/pdivDivaftersection1/divdivDivaftersection2/div

Pseudoselector

nth-child示例

!DOCTYPEhtmlstyletr:nth-child(even){background-color:beige;}/styletabletheadtrthName/ththQuantity/th/tr/theadtbodytrtdBMW/tdtd1200/td/trtrtdAudi/tdtd1300/td/trtrtdPorsche/tdtd1000/td/trtrtdBenz/tdtd1100/td/tr/tbody/table

应用偶数行样式