CSS权威指南学习笔记-2
??? 今天主要学习了CSS中的选择器,CSS选择器(selector)是css的核心,通过利用selector可以为html文档添加各种样式,并且能够更好的维护html页面的样式,为提高整个网站的前端页面样式的维护性起了决定性的作用。
???? 今天的主要学习内容如下:
????? 1.元素选择器(element selector)
???????? 最常见的元素选择器是html元素?? eg:h1{color:black;}
??????2.类选择器(class selector)
???????? 要应用样式而不考虑具体涉及的元素,这时最常用使用的是类选择器。
???????? eg: html:<p class="warning">when handling plutonium,care must be taken to avoid the </p>
?????????????????????? <p>With plutoninum,<span class="warning">the possibility of implosion????????????? is</span>aaa</p>
??????????????? css: .warning{font-weight:bold;}
????????? 这时,所有class属性为warning值的元素都会应用bold样式
????????? 2.1? 多类选择器
??????????????? 一个class值包含一个词列表?,各个词之间用空格分离。
?????????????? eg:html:<p class="urgent warning">when handling plutionium,care must be taken</p>
??????????????????? css: .warning{font-weight:bold;}
?????????????????????????? .urgent{font-style:italic;}
?????????????????????????? .warning.urgent {background:silver;}
?????????????????这时这三个样式都会应用到此段文字。
?????????3.id选择器
?????????????? id选择器与类选择器类似,不同的是id选择器前面有一个#,如#first,更重要的是同一个id值只能在页面中使用一次。
?????????4.后代选择器
?????????????? h1? em{color:gray;}
?????????????? 这个样式将应用到以h1为祖先的所有em元素。
???????? 5.伪类和伪元素选择器
????????????? 5.1伪类选择器
?????????????????? :link? 指示作为超链接(即有一个href属性)并指向一个未访问地址的所有锚。
??????????????????????? a:link{color:blue;}--所有为访问过的超链接将显示为蓝色
?????????????????? :visited 指示作为已访问地址超链接的所有锚
??????????????????????? a:visited{color:red;}--所有访问过的超链接将显示为红色
??????????????????
?????????????????? :focus 指示当拥有输入焦点的元素
?????????????????? :hover 指示鼠标停留在哪个元素
?????????????????? :active 指示被用户输入激活的元素
?????????????????? 很多web页面对a都有下面的样式?:
????????????????????????????? a:link {color:navy;}
????????????????????????????? a:visited{color:gray;}
????????????????????????????? a:hover{color:red;}
????????????????????????????? a:active{color:yellow;}
???????????????? :first-child 用于选择元素的第一个子元素
?????????????????? eg:html <div><p><em>test</em></p></div>
??????????????????????? css? p:first-child{font-weight:bold;}
???????????????????将选择作为第一个子元素的段落
??????????????5.2伪元素选择器
????????????????????伪元素选择器还有:first-line???? :first-letter????? :before???? :after.
??????????????????
?
???????????
?
????????