选择器

Posted 2020-08-31 特大土逗

分组

选择器分组 h2,p {color:gray;}

声明分组 h1 {font:18px Helvetica;color:purple;background:aqua;}

类选择器和ID选择器

多类选择器 .warning.urgent {background:silver;}

属性选择器

简单属性选择器 h1[class] {color:silver;}

根据具体属性值选择 planet[moons="1"] {font-weight:bold;}

根据部分属性值选择 p[class~="warning"] {font-weight:bold;}

特定属性选择类型 *[lang|="en"] {color:white;}

使用文档结构

后代选择器 h1 em {color:gray;}

选择子元素 h1 > strong {color:red;}

选择相邻兄弟元素 h1 + p {margin-top:0;}

伪类和伪元素

伪类选择器 a:visited {color:red;} link hover active

选择第一个子元素 p:first-child {font-weight:bold;}

结合伪类 a:link:hover {color:red;}

伪元素选择器 

设置首字母样式 p:first-letter {color:red;}

设置第一行的样式 p:first-line {color:purple;}