CSS【选择器篇】- 表严肃

https://www.bilibili.com/video/av7293888/
@表严肃
参考评论区@千千千千尺

元素选择器

p {color: gray;}
p,h1 {   } /*选择多个元素*/ 

类选择器

<div class="a">a</div>
.a {   } 
.a.b {   } /*指定多个类名（无空格）*/
.a .b {   } /*选取类a下的类b（有空格）*/

id选择器

id： 指定页面中唯一元素，只有特殊的元素给id

<p id="red">这个段落是红色。</p>
#red {color: red;}

属性选择器

[title] {color: red;}
[属性:＂＂　 ] {   }　　
[属性*:＂＂　 ] {   } 部分匹配
[属性^:＂aa＂　 ] {   } 匹配前两个字符是“aa”的属性
[属性$:＂bb＂　 ] {   } 匹配最后两个字符是“bb”的属性

后代选择器

CSS中用空格隔开的类选择器选中某元素的某后代元素

.a .b {   } /*选取类a下的类b*/
* {   }  /*页面中所有元素*/
.a * {   }  /*a类的所有后代元素*/

相邻选择器及通用相邻选择器

.a + div {          /*选择类a的后一个相邻的兄弟div*/
    background: rgba(255,0,0,0.3); /*不透明度0.3*/
}
.a ~ div {   }  /*选择类a后面所有的兄弟div*/

伪类选择器

a:link {   } /*未访问过的链接 */
a:visited {   } /*已访问过的链接*/ 
a:hover {   } /*鼠标移动到链接上*/ 
a:active {   } /*鼠标点击链接瞬间 */
input:focus {   } /*鼠标选中输入框 */

a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后

伪元素选择器

p:first-letter {   } /*段落的首字母*/
h1:before {content: "xx";} /*在h1元素前插入内容“xx”*/
h1:after {content: "xx";} /*在h1元素后插入内容“xx”*/
p:first-child{   } /*选取属于其父元素的首个子元素*/
p:last-child{   } /*选取属于其父元素的最后一个子元素*/
p:nth-child(2) {   } /*选中其父元素中的第二个子元素*/

可用“:”或“::”来选择某伪元素，多用“:”

选择器权重

style属性（内联） > ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器