选择器总结

选择器总结

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) 组合选择器

多个选择器使用同一种样式，以后逗号隔开