css 选择器总结

选择器总结

什么是选择器？

答：除了内联样式（用style属性描述的），对于样式的描述格式如下：

#tt{
Font-size :24px;
}
Div{
Background-color：red；
}

样式的描述包括两部分：即选择器和样式内容。

样式的内容：是键值对形式描述样式的细节，比如字体大小、颜色、高度

选择器：描述后面的样式施加到哪些目标，或者说是根据某个依据来选择应用样式的目标！

根据选择依据的不同，就产生了各种不同的选择器。

元素选择器：

按照标签（元素）的名称来选择相应的目标

Div {
Background-color：red；
}

Id选择器

根据元素的id属性来选择，比方下列中的选择器就是选中id=”tt”的目标，其书写格式为：#idname

#tt{
Font-size :24px;
}

类选择器

根据元素class属性来选择，比方下列中的选择器就是选中class=”tt”的目标，其书写格式为：.classname

.tt{
Font-size :24px;
}

属性选择器

根据属性的特征来选择应用样式的目标，所以从这个意义上来讲，它包含了id、class选择器，书写格式为

[title]：选择设置了title属性的元素

[title = “tt”]：选择title属性等于”tt”的元素

[title ^= ”tt”]：选择title属性以”tt”开头的元素

[title $= ”tt”]：选择title属性以”tt”结尾的元素

[title ~= ”tt”]：选择title属性包含完整”tt”单词的元素

[title *= ”tt”]：选择title属性包含”tt”的元素

关系选择器：

根据元素间的家族关系来选择目标

E  F：在选择器E选中的目标中再去选中后代满足F选择器的目标

E > F：选中直接后代元素

E + F：选中第一个“弟”元素

E ~ F：选中所有的“弟”元素

伪类、伪元素选择器

 

伪元素：其效果与增加一个元素来实现的效果等价，所以称之为伪元素

伪类：其效果与增加一个类来实现的效果等价，所以称之为伪类

 

组合选择器：多个选择器使用同一个样式描述，以逗号隔开

学习方法提示：细节有可能记不住了，但是只要理解了就好了，需要用的时候不记得查一下就行了