CSS学习之旅一 ---- CSS选择符(未完待续)
捣腾了CSS一个多星期,感觉也算是系统的学了一些基础的东西,为了巩固新知识,做个关于CSS选择符的总结吧:
CSS常用选择符:
1. 元素选择符
形式:元素 {},如.myclass {color: red;}
特点:直接对具体元素添加样式,十分方便,使用简单,但是不能单独选择元素
2. 类选择符
形式:.类名 {}
特点:最常用的CSS选择符,可以让HTML文档中的多个不同的元素应用其样式
更具体一点的:元素.类名 {},该种方式定义的样式比前一种方式具体,当两种方式定义的样式同时出现时,元素会选择更具体的样式
3. id选择符
形式:#id名 {},如#myid {color: red;}
特点:可以选择某一特定的元素并对其应用样式,和类不同,它只能在HTML文档中出现一次
更具体一点的:元素#id名 {}
4. 伪类选择符
形式:支持伪类的元素:浏览器支持的伪类(link、visited、hover、first-child等) {},如a:link {color: red;}
特点:可以根据状态样式化元素或者样式化元素中的特定部分
5. 子孙选择符
形式:上述选择符 元素 {},如.myclass p {color: red;}
特点:与其他选择符组合使用,可以选择更具体的元素,一般用于在样式继承体系中对某个特定的元素应用特定的样式
其他CSS选择符,这些选择符暂时未被广泛支持:
1. 属性选择符
形式:元素[属性] {},如img[width] {border: black thin solid;}
特点:基于属性值选择元素,如例子中会选中HTML文档中包含width属性的所有img元素
2. 基于兄弟进行选择
形式:元素+兄弟元素 {},如h1+p {font-style: italic;}
特点:可以选择紧跟前面元素的兄弟元素