HTML&CSS_基础04

一、常见的选择器

　　1. 元素选择器

　　　　选择页面中指定的元素

　　2. id选择器

　　　　语法：#id属性值{}

　　3. 类选择器

　　　　语法：.class属性值{}　　

　　　　可以为同一个元素设置多个属性值，多个值之间用空格隔开

　　4. 并集选择器

　　　　语法：选择器1，选择器2，选择器N{}

　　5. 通配选择器

　　　　语法：*{}

　　　　选中页面中的所有元素

　　6. 交集选择器

　　　　语法：选择器1选择器2选择器3{}

　　7. 后代元素选择器

　　　　语法：祖先元素 后代元素{}

　　8. 子元素选择器：

　　　　语法：父元素 > 子元素{}

　　9. 属性选择器

　　　　title属性：见鼠标移入，元素中title属性的值会作为提示文字显示

　　　　作用：根据属性或属性值选取指定元素

　　　　语法：[属性名]：选取含有指定属性的元素

　　　　　　　[属性=“属性值”]：选取含有指定属性值的元素

　　　　　　　[属性^="属性值"]：选取以指定元素开头的元素

　　　　　　　[属性$="属性值"]：选取以指定元素结尾的元素

[属性*="属性值"]：选取包含指定元素的元素

　　10.子元素选择器（伪元素）

　　　　：first-child

　　　　：last-child

　　　　：nth-child（）：后面的括号可以传一个参数，另odd为奇数，even为偶数

　　　　：nth-of-type ：当前类型的子元素排列

　　11. 兄弟元素选择器：

　　　　“+”：后一个兄弟元素

　　　　“~”：选中后面所有的兄弟元素

　　12.否定伪类：

　　　　语法:

　　　　　　:not(选择器)

　　13.选择器优先级：

　　　　当使用不用的选择器选中同一个元素并设置相同的样式时，这样样式会产生冲突

　　　　规则：

　　　　1.内联样式：1000

　　　　2.id选择器：100

　　　　3.类和伪类：10

　　　　4.元素选择器：1

　　　　5.通配选择器*：0

　　　　继承的样式没有优先级，可以在验尸后添加！important将获得最高优先级，但应该避免使用。

　　14.更多选择器知识：

　　　　http://www.w3school.com.cn/h.asp

　　15.一个选择器小游戏：

　　　　http://flukeout.github.io/