版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38230811/article/details/83188285
CSS的基本选择器
1标签选择器
使用标签名作为选择器名称
选择并设置所有 <p> 元素的样式：
<html>
<head>
<style>
p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎来到我到的主页</h1>
<div class="intro">
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</div>
<p>我最好的朋友是米老鼠。</p>
</body>
</html>
2 class选择器
选择并设置 class="intro" 的元素的样式：
<html>
<head>
<style>
.intro
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎来到我到的主页</h1>
<div class="intro">
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</div>
<p>我最好的朋友是米老鼠。</p>
</body>
</html>
3 id选择器
为 id="firstname" 的元素设置样式：
<html>
<head>
<style>
#firstname
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎来到我到的主页</h1>
<div class="intro">
<p id="firstname">我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</div>
<p>我最好的朋友是米老鼠。</p>
</body>
</html>
优先级
style>id>class>标签
CSS扩展选择器
1关联选择器
设置嵌套标签的样式
选择并设置位于 <div> 元素内部的每个 <p> 元素的样式：
<html>
<head>
<style>
div p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎来到我到的主页</h1>
<div class="intro">
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</div>
<p>我最好的朋友是米老鼠。</p>
</body>
</html>
2组合选择器
不同的标签具有相同的样式选择并设置所有 <h1> 样式和所有 <p> 元素的样式：
<html>
<head>
<style>
h1,p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎来到我到的主页</h1>
<div class="intro">
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</div>
<p>我最好的朋友是米老鼠。</p>
</body>
</html>
3伪元素选择器
:link
选择未被访问的链接，并设置其样式：
实例
<head>
<style>
a:link
{
background-color:yellow;
}
</style>
</head>
<body>
<a href="http://www.w3school.com.cn">W3Sschool</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a>
<p><b>注释：</b>:link 选择器为未被访问过的链接设置样式。</p>
</body>
</html>
| a:visited |
选择所有已被访问的链接。 |
|
| a:active |
选择活动链接。 |
|
| a:hover |
选择鼠标指针位于其上的链接 |
更多选择器 ：
http://www.w3school.com.cn/cssref/css_selectors.asp