CSS的选择器

基本选择器

/* 元素选择器（选择所有的p元素） */
p {
    color:red;
}

/* id选择器（选择id为biaoti的元素） */
#biaoti {
    color: blue;
}

/* 类选择器（选择类名为lei的元素） */
.lei {
    color: aqua;
}

/* 通配选择器 */
* {
    color: blueviolet;
}

/* 交集选择器（选择h2且类名是jiaoji-2的元素） */
h2.jiaoji-2 {
    color: brown;
}

/* 并集选择器（选择类名是binji-1和类名是binji-2的元素） */
.binji-1, .binji-2 {
    color: chartreuse;
}

/* 子元素选择器（选择div的子元素span） */
div>span {
    color: red;
}

/* 子元素选择器（选择类名为div-2的div的子元素span */
div.div-2>span {
    color: red;
}

/* 连写子元素选择器（选择div的子元素span中的p元素） */
div>span>p {
    color: red;
}

/* 后代元素选择器（选择div的后代元素span） */
div span {
    color: red;
}

/* 兄弟选择器之选择下一个兄弟（选择div下面的span元素）。注意span元素必须紧挨着div，如果div和span中间存在一个其他元素，例如还有一个p元素，那么这个选择器就不起效了 */
div+span {
   color: red;
}

/* 兄弟选择器之选择下面所有的兄弟（选择div下面的所有span元素）。注意起效的一定是div后面的元素，如果一个span元素在div元素之前，那么这个选择器是不适用的 */
div~span {
    color: red;
}

属性选择器

/* 属性选择器
   [属性名] 选择含有指定属性的元素
   [属性名=属性值] 选择含有指定属性和属性值的元素
   [属性名^=属性值] 选择属性值以指定值开头的元素
   [属性名$=属性值] 选择属性值以指定值结尾的元素
   [属性名*=属性值] 选择属性值中含有某值的元素的元素
 */
/* 属性选择器（选择所有含有title属性的元素） */
[title] {
    color: red;
}

/* 属性选择器（选择含有属性title的p元素）*/
p[title] {
    color: red;
}

伪类选择器

/* 伪类选择器
   第一个子元素: :first-child
   最后一个子元素: :last-child
   任意位置的子元素: :nth-child()  "括号里面填写的是元素的位置，从1开始"
   第一个同类子元素: :first-of-type
   最后一个同类子元素: :last-of-type
   任何位置的同类子元素: :nth-of-type
   选中除了某位置之外的其他元素: :not(:nth-child(3))
 */
ul>li:first-child {
    color: red;
}

ul>li:last-child {
    color: red;
}

ul>li:nth-child(3) {
	color:red;
}

ul>li:first-of-type {
    color: red;
}

ul>li:last-of-type {
	color: red;
}

ul:li:not(:nth-child(3)) {
    color: red;
}

/* 没有访问过的链接，正常的链接 */
a:link {
    color: red;
}

/* 访问过的链接，只能修改链接的颜色 */
a:visited {
    color: red;
}

/* 鼠标移入的状态 */
a:hover {
    color: red;
}

/* 鼠标点击的状态 */
a:active {
    color: red;
}

伪元素选择器

/* 选择第一个字母 */
p::first-letter {
    color: red;
}

/* 选择第一行 */
p::first-line {
	color: red;
}

/* 选择选中的内容 */
p::selection {
    color: red;
}

/* 内容前的位置 */
p::before {
	content: "is before";
}

/* 内容最后的位置 */
p::after {
    content: "is after";
}

样式的继承
我们为一个元素设置的样式同样也会应用到它的后代元素上，但是并不是所有的元素都会被继承，例如背景相关，布局相关等

选择器的优先级
选择器的权重如下：
内联样式: 1,0,0,0
id选择器: 0,1,0,0
类和伪类选择器: 0,0,1,0
元素选择器: 0,0,0,1
通配选择器: 0,0,0,0
继承的样式: 没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的），选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器，如果优先级计算后相同，此时则优先使用靠下的样式，可以片面的理解为越精确复杂的选择器优先级越高。