属性选择器 [href="#"] [href^="https"] [href$=".cn"] [href*="qq"] [class~="aa"] 复合选择器 后代选择器 ul li { color: red; } 子元素选择器 hh>li { color: green; } 相邻兄弟选择器 #aa+li { color: blue; } 普通兄弟选择器 #aa~li { color: red; } 伪类选择器 选择第一个子元素 ul>li:first-child { color: red; } 选择最后一个子元素 li:last-child { color: green; } 选择只有一个子元素的那个子元素 p:only-child { color: orange; } 选择只有一个指定类型的子元素的那个子元素 p:only-of-type { background-color: rgb(100, 99, 99); } 选择子元素的第3个元素 li:nth-child(3) { background-color: green; } 选择子元素倒数第2个元素 li:nth-last-child(2) { background-color: hotpink; } 选择特定子元素的倒数第二个元素 div>p:nth-last-of-type(2) { color: red; } 伪元素选择器 选中第一行 p::first-line{ color: red; } 选中第一个字 p::first-letter{ color: blue; } 在文本前插入。。 p::before{ content: "before"; } 在文本后插入。。 p::after{ content: "after"; } UI选择器 选择启用状态的元素 input:enabled { border: 1px solid red; } 选择禁用状态的元素。 input:disabled { background-color: yellow; } 选择勾选的 input 元素。 input:checked { display: none; } 输入验证合法与不合法显示时选择的元素。 input:valid { background-color: red; } :optional 选择器用于表单中未设置"required" 属性的元素 input:optional { border: 1px solid green; } 动态伪类选择器 鼠标未点击时a:link { } 鼠标悬停/滑过 a:hover { } 鼠标访问时a:active { } 表示已访问过的超链接a:visited{}
