css3选择器相关

input[type="text"]匹配text类型 web

input[value="abc"]匹配val=abcchrome

input[value^="abc"]匹配val起始位置=abc浏览器

input[value$="abc"]匹配val结束位置=abcspa

input[value*="abc"]匹配val任意位置=abcfirefox

li:nth-child(2){background-color: red;} li父容器的第二个元素get

li:nth-of-child(2){background-color: red;} 跟上面比of会无视其余元素,仅计算li元素input

only-of-type同上
li:nth-child(3n+1){background-color: red;}第一个起每三行
li:nth-child(4n+2){background-color: yellow;}第二个起每四行
li:hover{background-color: blue;}鼠标选择
li:first-child{background-color: red;}第一个
li:last-child{background-color: red;}最后一个
li:only-child{background-color: red;}惟一元素it

li:not(.box){background-color: red;}取反io

li:empty{background-color: red;} 选空元素safari

:target {color: red;} 锚点跳转后目标样式

input:focus{border: 1px solid red;outline: none;}  选中样式
input[type="checkbox"]:checked + span{background-color: red;} 选中样式

::selection{background-color: #333;} 选中样式

::-moz-selection{background-color: #333;}支持火狐

#asd:first-letter{font-size: 50px;} 首字节样式
#asd:first-line{background-color: #333;}首行样式

-moz-表明firefox浏览器私有属性
-ms-表明IE浏览器私有属性
-webkit-表明chrome、safari私有属性

<input type="" name="" disabled value="123">禁用 <input type="" name="" readonly value="321">只读

相关文章
相关标签/搜索