0.常用选择器
0.1 元素选择器
元素选择器 作用：根据标签名来选中指定的元素 语法：标签名{} 例子：p{} h1{} div{}
p{
color: red;
}
h1{
color: green;
}0.2 id选择器
作用：根据元素的id属性值选中一个元素 语法：#id属性值{} 例子：#box{} #red{}
#red{
color: red;
}0.3 类选择器
类选择器 作用：根据元素的class属性值选中一组元素 语法：.class属性值
.blue{
color: blue;
}
.abc{
font-size: 20px;
}0.4 通配选择器
作用：选中页面中的所有元素 语法: *
*{
color: red;
}1.复合选择器
1.1 交集选择器
作用：选中同时复合多个条件的元素 语法：选择器1选择器2选择器3选择器n{} 注意点： 交集选择器中如果有元素选择器，必须使用元素选择器开头
div.red{
font-size: 30px;
}
.a.b.c{
color: blue
}1.2 并集选择器
选择器分组（并集选择器） 作用：同时选择多个选择器对应的元素 语法：选择器1,选择器2,选择器3,选择器n{}
#b1,.p1,h1,span,div.red{}h1, span{
color: green
}2.关系选择器
2.1 子元素选择器
作用：选中指定父元素的指定子元素 语法：父元素 > 子元素
div.box > span{
color: orange;
}2.2 后代元素选择器
作用：选中指定元素内的指定后代元素 语法：祖先 后代
div span{
color: skyblue
}选择下一个兄弟 语法：前一个 + 下一个
p + span{
color: red;
}选择下边所有的兄弟 语法：兄 ~ 弟
p ~ span{
color: red;
}3. 属性选择器
[属性名] 选择含有指定属性的元素[属性名=属性值] 选择含有指定属性和属性值的元素[属性名^=属性值] 选择属性值以指定值开头的元素[属性名$=属性值] 选择属性值以指定值结尾的元素[属性名*=属性值] 选择属性值中含有某值的元素的元素
/* p[title]{ */
/* p[title=abc]{ */
/* p[title^=abc]{ */
/* p[title$=abc]{ */
p[title*=e]{
color: orange;
}4. 伪类选择器
- 伪类用来描述一个元素的特殊状态 比如：第一个子元素、被点击的元素、鼠标移入的元素...
- 伪类一般情况下都是使用:
- 开头 :first-child 第一个子元素
- :last-child 最后一个子元素
- :nth-child() 选中第n个子元素
- 特殊值：
- n 第n个 n的范围0到正无穷
- 2n 或 even 表示选中偶数位的元素
- 2n+1 或 odd 表示选中奇数位的元素
- 以上这些伪类都是根据所有的子元素进行排序
- :first-of-type :last-of-type :nth-of-type() 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序:not() 否定伪类 将符合条件的元素从选择器中去除
/* ul > li:first-child{
color: red;
} */
/* ul > li:last-child{
color: red;
} */
/* ul > li:nth-child(2n+1){
color: red;
} */
/* ul > li:nth-child(even){
color: red;
} */
/* ul > li:first-of-type{
color: red;
} */
ul > li:not(:nth-of-type(3)){
color: yellowgreen;
}5. a元素的伪类
- :link 用来表示没访问过的链接（正常的链接）
- a:link{
color: red;
} - :visited 用来表示访问过的链接 由于隐私的原因，所以visited这个伪类只能修改链接的颜色
a:visited{
color: orange;
/* font-size: 50px; */
}- :hover 用来表示鼠标移入的状态
a:hover{
color: aqua;
font-size: 50px;
}- :active 用来表示鼠标点击
a:active{
color: yellowgreen;
}6. 伪元素选择器
表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
before 和 after 必须结合content属性来使用
p::first-letter{
font-size: 50px;
}
p::first-line{
background-color: yellow;
}
p::selection{
background-color: greenyellow;
}
/* div::before{
content: 'abc';
color: red;
}
div::after{
content: 'haha';
color: blue;
} */
div::before{
content: '『';
}
div::after{
content: '』';
}
7.样式继承
样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上
继承是发生在祖先后后代之间的
继承的设计是为了方便我们的开发， 利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上， 这样只需设置一次即可让所有的元素都具有该样式
注意：并不是所有的样式都会被继承：比如 背景相关的，布局相关等的这些样式都不会被继承
p{
color: red;
background-color: orange;
}
div{
color: yellowgreen
}8. 选择器权重
选择器的权重
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级
可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，
注意：在开发中这个玩意一定要慎用！
/* #box1{
background-color: orange;
}
div#box1{
background-color: yellow;
} */
.d1{
background-color: purple !important;
}
.red{
background-color: red;
/* font-size: 20px; */
}