选择器总结
1.什么是选择器?
答:除了使用内联样式,对于样式的描述
样式的描述包括两部分:即选择器和样式内容
样式内容:使用键值对的形式对形式的描述
选择器:描述后面的样式施加到那些目标,或者可以说根据某个依据来选择目标
根据不同的选择依据产生了各种不同的选择器
2.选择器
1) 元素选择器
按照标签/元素名来选择相应的目标
div{
font-size: 36px;
}
2) Id选择器
根据元素的id属性来选择
div{
font-size: 36px;
}
3) Class选择器
根据元素的class属性来选择
.class{
font-size:36px;
}
4) 属性选择器
根据属性的特征来选择应用样式的目标
[title^="div"]{
background-color: blue;
}
注意:^可以替换为~、$、*,也可以不写
不选的话是与class类一样
^选中属性以div开头的
~选中包含完整div单词的元素,div1不行,div 1行
$选中属性以div结尾的
*选中属性中包含div的
5) 关系选择器
根据元素间的家族关系来选择目标
书写方法:
1.
div p {
Font-size:30px;
}
先选中div,然后把div中的所有的p标签都应用对应的样式
2.
div > p{
Font-size:30px;
}
先选中div,然后只选中他的直接后代,仅仅是div的下一级
3.
div + p {
Font-size:30px;
}
选中div,然后在选中他的一个弟弟,就是离他最近的一个p
4.
div ~ p {
Font-size:30px;
}
选中div,再选中他所有的弟弟
注意:div是一个类名,p是一个标签名
6) 伪元素、伪类选择器
使用方法:p:link
伪类:其效果与增加一个类来实现的效果等价,所以称为伪类
一些常见的:锚类(link、active、hover、visited),
伪元素:其效果与增加一个元素来实现的效果等价,所以称为伪元素
一些常见的:first-line、first-letter、before、after
7) 组合选择器
多个选择器使用同一种样式,以后逗号隔开