-
元素选择器
作用:根据标签名来选中指定的元素
语法:标签名{}
例如:h1{} p{} div{}
h1{
color: red;
}
-
id选择器
作用:根据元素的id属性值来选中元素
语法:#id属性值{}
例如:#p1{} #pp{}
注意:id选择,对应属性值,一个页面只能用一次
#p1{
color: orange;
}
-
class选择器
作用:根据元素的class属性值来选中元素
语法:.class属性值{}
例子:.p2{} .p3{} .pp{}
用法跟id选择器类似,但可以复用
.p2{
color: green;
}
-
通配选择器
作用:选中页面中所有的标签
语法:*{}
*{
padding: 0;
margin: 0;
}
-
复合选择器
并集选择器
作用:选中同时符合多个条件的元素
语法:选择器1选择器2选择器3·····{}
注意:如果选择器中有元素选择器,元素选择器要写在前面
span.p1{
font-size: 30px;
}
交集选择器
作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2,选择器3·····{}
h1,h3{
background-color: greenyellow;
}
-
关系选择器
子元素选择器
作用:通过父元素找到对应的子元素
语法:父>子{}
后代选择器
作用:通过祖先元素找到指定的后代元素
语法:祖先 后代{}
相邻兄弟选择器
作用:通过兄元素找到相邻弟的元素,只找相邻的一个弟弟
语法:兄+弟{}
选择所有兄弟选择器
语法:兄~弟{}
注意:前面的兄弟不选
-
属性选择器
语法:
[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择以指定属性值开头的元素
[属性名$=属性值]{} 选择以指定属性值结束的元素
[属性名*=属性值]{} 选择属性值含有某值的元素
-
伪类选择器
不存在的类,用来表示一个元素特殊的状态
例如:第一个元素 被点击元素 鼠标移入的元素
语法:
1、 :first-child 第一个子元素
2、 :last-child 最后一个子元素
3: :nth-child() 选中第几个元素
特殊值
n 选择所有的
2n+1/odd 选中奇数
2n/even 选中偶数
注意:以上所有的伪类都是根据所有的子元素进行排序
1、 :first-of-type 同类型的第一个
2、 :last-of-type 同类型的最后一个
3、 :nth-of-type(2) 同类型选择哪个
注意:以上这些伪类是根据同类型的子元素中去选择
-
a元素伪类
:link 用来表示未访问过的链接
:visited 用来表示访问过的链接
注意:由于隐私问题,大部分的浏览器对访问的链接,只能设置颜色
:hover 鼠标移入的效果
:active 鼠标点击效果
注意:
1:link visited 只对a标签产生效果
hover active 对所有标签都可以产生效果
2:如果要同时设置这四个伪类,那么伪类是有顺序要求的
:not() 否定伪类
-将符合条件的元素从选择器中去除
-
伪元素选择器
伪元素 不真实存在元素(元素的位置)
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 选中的内容
::before 元素的最前面
::after 元素的最后面
before和after需要配合content使用
p::before{
color: red;
content: '你好';
}
-
选择器的权重
!important 最高优先级
内联样式 1000
id选择器 100
类和伪类选择 10
元素选择器 1
子选择器,相邻选择器 通配符 0
继承的样式 没有优先级
注意:1:如果优先级一样,则优先使用靠下的样式
2:比较优先级的时候,需要将所有的选择器优先级相加,最后优先级高的,则优先展示
3:选择器权重相加,不会超过上一级选择器的选择器