css学习笔记（二）
css中的选择器selector
选择器分为：html标签选择器、class选择器、id选择器、关联选择器、组合选择器、伪元素选择器
1.html标签选择器
例：
<html>
<head>
<style>
<!--
p{color:blue;background:green;...}
-->
</style>
</head>
<body>
<p>
html标签选择器
</p>
</body>
</html>
2.class选择器
第一种情况：关联class例：
在test.css中
p.A{color:red;background:green;...}
在a.html中
<html>
<head>
<link rel="Stylesheet" href="test.css" type="text/css">
</head>
<body>
<p class="A">
class选择器
</p>
</body>
</html>
第二种情况：独立class例：
在test.css中
.A{color:red;background:green;...}
作用于所有class为A的html标签元素
在a.html中
<html>
<head>
<link rel="Stylesheet" href="test.css" type="text/css">
</head>
<body>
<p class="A">
class选择器
</p>
<div class="A">
独立class选择器
</div>
</body>
</html>
3.id选择器
例：
在test.css中
#B{color:blue;background:green;...}
在a.html中
<html>
<head>
<link rel="Stylesheet" href="test.css" type="text/css">
</head>
<body>
<p id="B">
id选择器
</p>
</body>
</html>
4.关联选择器
例：
在a.html中
<html>
<head>
<style>
<!--
p em{color:red;background:red;...}
只对p中em标签中的内容起作用
-->
</style>
</head>
<body>
<p>
关联选择器
<em>关联选择器</em>
</p>
</body>
</html>
5.组合选择器
例：
在a.html中
<html>
<head>
<style>
<!--
h1,h2,p{color:red;background:green;...}
-->
</style>
</head>
<body>
<h1>组合选择器</h1>
<h2>
组合选择器
</h2>
<p>
组合选择器
</p>
</body>
</html>
6.伪元素选择器
用于同一html标签元素的各种状态的样式设置
格式为：
html元素：伪元素{color:red;background:green;...}
html元素.class选择器名:伪元素{color:red;background:green;...}
一般常用的伪元素有：
A：active{color:red;background:green;...}链接点击时
A:hover{color:red;background:green;...}鼠标放到链接上时
A:link{color:red;background:green;...}正常链接
A:visited{color:red;background:green;...}访问后的链接
P:first-line{color:red;background:green;...} 段落首行
P:first-letter{color:red;background:green;...}首行首字母