选择器的作用就是选择一些内容指定格式.
标签选择器
<!DOCTYPE html>
<html>
<head>
<!-- 标签选择器 -->
<style type="text/css">
p {color: blue; text-decoration: underline;}
</style>
<meta charset="UTF-8">
<title>Sample document</title>
</head>
<body>
<p>
<strong>C</strong>ascading <!-- strong是加粗-->
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
把p标签的内容设置成蓝色加下画线.
id选择器
id是整个文档惟一的.下面代码定义2个id选择器.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div1 {
200px;
height: 200px;
border: solid 2px blue;
float: left;
margin: 4px;
background-color: green;
}
#div2 {
200px;
height: 200px;
border: solid 2px blue;
float: left;
margin: 4px;
background-color: red;
}
</style>
<meta charset="UTF-8">
<title>Sample document</title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
类选择器
<!DOCTYPE html>
<html>
<head>
<!-- id-->
<style type="text/css">
.red {
200px;
height: 200px;
border: solid 2px blue;
float: left;
margin: 4px;
background-color: green
}
.green {
200px;
height: 200px;
border: solid 2px blue;
float: left;
margin: 4px;
background-color: red
}
</style>
<meta charset="UTF-8">
<title>Sample document</title>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
</body>
</html>
伪类选择器
<html>
<head>
<style type="text/css">
a:link {color: #FF0000} /*搜索引擎中经常有这种情况,访问过的链接和没有访问过的链接颜色不一样,*/
a:visited {color: #00FF00} /*link为没有访问过的颜色,visited为访问过的颜色*/
a:hover {color: #FF00FF} /*鼠标指向超链接的颜色*/
a:active {color: #0000FF} /*鼠标点击超链接的颜色*/
</style>
</head>
<body>
<a href="./c00.html">This is a link</a> <!-- 链接前面不要加http-->
</body>
</html>
子选择器
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div>p{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>子元素选择器</p> <!-- p是div的直接子元素,子选择器才有效-->
<span><p>后代选择器</p></span>
</div>
</body>
</html>
相邻选择器
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li> <!-- 第1个前面没有和它相同的元素,所以第1个没有粗体 -->
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</body>
属性选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">/*为带有 title 属性的所有元素设置样式*/
[title]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2> <!-- title的作用是指向tile的内容时会显示tile里的内容 -->
<a title="W3School" href="http://w3school.com.cn">W3School</a>
<h1>无法应用样式：</h1>
<h2>Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>
</body>
</html>