CSS的选择器

基本选择器

　　1.标签选择器

　　　　使用标签名作为选择器的名称

　　　　div {

　　　　　　color: white;

　　　　}

 

　　2.类选择器

　　　　在标签内使用class属性定义类名

　　　　<div class="hello"></div>

　　　　　　.hello / div.hello {

　　　　　　color: white;

　　　　}

 

　　3.id选择器

　　　　在标签内使用id属性定义类名

　　　　<div id="hello"></div>

　　　　#hello 或 div#hello {

　　　　　　color: white;

　　　　}

　　　　id选择器在整个HTML文档中是唯一的，同一个id只能定义一次

 

优先级

　　行内样式 > id选择器 > class选择器 > 标签选择器

 

扩展选择器

　　1.关联选择器

　　　　<div><p>~~~~~~</p></div>

　　　　设置div里p的样式

　　　　div p {

　　　　　　color: white;

　　　　}

 

　　2.组合选择器

　　　　<div>1111</div>

　　　　<p>2222</p>

　　　　把div和p设置成相同的样式

　　　　div,p {

　　　　　　color: white;

　　　　}

 

　　3.伪元素选择器

　　　　伪类

　　　　　　:link 元素未访问前，比如超链接未点击前

　　　　　　:hover 鼠标指针悬浮在元素上

　　　　　　:active 点击元素鼠标未释放时

　　　　　　:visited 元素访问后，比如超链接点击后

　　　　　　:focus 元素获得焦点时，按Tab键切换焦点

　　　　　　:first-child 对象的第一个子对象

　　　　　　:first 页面容器第一页

　　　　　　:left 页面容器位于装订线左边的所有页面

　　　　　　:right 页面容器位于装订线右边的所有页面

　　　　　　:lang 对象使用特殊语言的内容

　　　　伪对象

　　　　　　:first-letter 对象内第一个字符

　　　　　　:first_line 对象内第一行

　　　　　　:before 和content属性一起使用，设置在对象前发生的内容

　　　　　　:after 和content属性一起使用，设置在对象后发生的内容