CSS 的常用选择器

一、标签选择器

div {
	
}

二、类选择器

.article {
	
}

三、id 选择器

#pass {

}

四、通配符选择器

* {
    margin: 0;
    padding: 0;
}

五、后代选择器

div a span {
  
}

六、子代选择器

div > a {
  
}

七、并集选择器

div a,
span a {

}

八、链接伪类选择器

如果混合使用，需要按照 " link、visited、hover、active " 的顺序书写，否则浏览器可能无法正常显示这4种样式

a:link {
  /* 选择鼠标未点击的 */
}

a:visited {
  /* 选择鼠标已经点击过的 */
}

a:hover {
  /* 选择鼠标经过 */
}

a:active {
  /* 选择鼠标点击未弹开 */
}

九、属性选择器

[YY] {
    /* 选择有YY属性的所有元素 */
}

E[YY] {
    /* 选择有YY属性的E元素 */
}

E[YY="ZZ"] {
    /* 选择有YY属性，且属性值等于ZZ的元素 */
}

E[YY^=icon] {
    /* 选择有YY属性，且属性值是以icon开头的元素 */
}

E[YY$=icon] {
    /* 选择有YY属性，且属性值是以icon结尾的元素 */
}

E[YY*=icon] {
    /* 选择有YY属性，且属性值包含icon的元素 */
}

十、结构伪类选择器

1. n 的说明

取值	意义
1 2 3 … n	选中第几个子元素
even(偶数)、odd(奇数)	选中全部的奇数或偶数
公式	2n(0 2 4 6 … )、5-n(5 4 3 2 1 0) 、、、、、、

2. child 选择器

功能：选择有父级元素的第 n 个 XX元素，先关注是第几个孩子，再判断类型是否符合

先找到有父级元素的第 n 个 XX元素，之后判断是不是指定元素

li:first-child {
    找到同一级中的第 1 个子元素
    判断是不是 li
}

li:last-child {
    找到同一级中的 最后1个 子元素
    判断是不是 li
}

li:nth-child(n) {
    找到同一级中的第 n 个子元素
    判断是不是 li
}

3. type 选择器

与child选择器功能一样，只不过 type 是先找出所有符合类型要求的元素，再关注第几个

li:first-of-type {

}

li:last-of-type {

}

li:nth-of-type(n) {

}

十一、伪元素选择器

需要注意的内容

• 必须要有 content 属性，否则不起效果
• before 在内容前面，after 在内容后面
• before 和 after 创建的是一个行内元素
• 伪元素和标签选择器一样，权重为 1
• 创建出来的元素在 Dom 中查找不到，所以称为伪元素

p:before {
	content: '前面前面';
    color: red;
}

p:after {
	content: '后面后面';
    color: yellow;
}