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.