html css样式选择器介绍
目录
- 一、单标签选择器
- 二、多标签选择器
- 三、类选择器
- 四、标签结合类选择器
- 五、多个标签结合类选择器
- 六、子标签选择器
- 七、所有子标签选择器
- 八、相邻选择器
- 九、多种选择器混合使用
- 十、超链接样式选择器
一、单标签选择器
下面的 css 会将所有 h1 标签里的文字设置为红色
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>开始学习 CSS</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>我是第一个一级标题</h1>
<h1>我是第二个一级标题</h1>
<p>
这是一个段落文本。 包含了一个<span>span</span> 元素。
</p>
<p>这是第二段。包含了一个 <em>强调</em> 元素。</p>
<ul>
<li>项目 1</li>
<li>项目 2</li>
<li>项目 <em>三</em></li>
</ul>
</body>
</html>
二、多标签选择器
多个标签如果使用一样的 css,可以用逗号分割。
下面的 css 会将所有 h1 和 li 标签里的文字设置为红色
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>开始学习 CSS</title>
<style>
h1,li {
color: red;
}
</style>
</head>
<body>
<h1>我是第一个一级标题</h1>
<h1>我是第二个一级标题</h1>
<p>
这是一个段落文本。 包含了一个<span>span</span> 元素。
</p>
<p>这是第二段。包含了一个 <em>强调</em> 元素。</p>
<ul>
<li>项目 1</li>
<li>项目 2</li>
<li>项目 <em>三</em></li>
</ul>
</body>
</html>
三、类选择器
下面的 css 会选择所有使用了 special 类的标签将其中的文字设置为橙色并加粗
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>开始学习 CSS</title>
<style>
.special {
color: orange;
font-weight: bold;
}
</style>
</head>
<body>
<h1>我是第一个一级标题</h1>
<h1 class="special">我是第二个一级标题</h1>
<p class="special">
这是一个段落文本。 包含了一个<span>span</span> 元素。
</p>
<p>这是第二段。包含了一个 <em>强调</em> 元素。</p>
<ul>
<li>项目 1</li>
<li class="special">项目 2</li>
<li>项目 <em>三</em></li>
</ul>
</body>
</html>
四、标签结合类选择器
下面的 css 会选择所有使用了 special 类的 li 标签并将其中的文字设置为橙色并加粗
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>开始学习 CSS</title>
<style>
li.special {
color: orange;
font-weight: bold;
}
</style>
</head>
<body>
<h1>我是第一个一级标题</h1>
<h1 class="special">我是第二个一级标题</h1>
<p class="special">
这是一个段落文本。 包含了一个<span>span</span> 元素。
</p>
<p>这是第二段。包含了一个 <em>强调</em> 元素。</p>
<ul>
<li>项目 1</li>
<li class="special">项目 2</li>
<li>项目 <em>三</em></li>
</ul>
</body>
</html>
五、多个标签结合类选择器
多个标签结合类选择器，如果使用一样的 css,可以用逗号分割。
下面的 css 会选择所有使用了 special 类的 li 标签以及 使用了 special 类的 p 标签，并将其中的文字设置为橙色并加粗
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>开始学习 CSS</title>
<style>
li.special,p.special {
color: orange;
font-weight: bold;
}
</style>
</head>
<body>
<h1>我是第一个一级标题</h1>
<h1 class="special">我是第二个一级标题</h1>
<p class="special">
这是一个段落文本。 包含了一个<span>span</span> 元素。
</p>
<p>这是第二段。包含了一个 <em>强调</em> 元素。</p>
<ul>
<li>项目 1</li>
<li class="special">项目 2</li>
<li>项目 <em>三</em></li>
</ul>
</body>
</html>
六、子标签选择器
使用空格来表示选择某个标签下第一层级的第一个另一个标签，相当于选择某个标签下第一层级的第一个子标签。下面的 css 选择所有嵌套在 p 标签下 em 标签内的文字，并将其中的文字设置为橙色并加粗。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>开始学习 CSS</title>
<style>
p em {
color: orange;
font-weight: bold;
}
</style>
</head>
<body>
<h1>我是第一个一级标题</h1>
<h1 >我是第二个一级标题</h1>
<p >
这是一个段落文本。 包含了一个<span>span</span> 元素。
</p>
<p>这是第二段。包含了一个 <em>强调</em> 元素。</p>
<p>这是第三段。包含了一个 <em>强调</em> 元素。</p>
<ul>
<li>项目 1</li>
<li >项目 2</li>
<li>项目 <em>三</em></li>
</ul>
</body>
</html>
七、所有子标签选择器
和上面的子标签选择器相似，所有子标签选择器是使用大于符号，表示选择某个标签下第一层级的所有另一个标签。下面的 css 选择所有嵌套在 ul 标签下 li 标签内的文字，并将其中的文字设置为红色。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>开始学习 CSS</title>
<style>
ul > li {
color: red;
}
</style>
</head>
<body>
<ul>
<li>项目 1</li>
<li >项目 2</li>
<li>项目 <em>三</em></li>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</ul>
</body>
</html>
八、相邻选择器
使用加号可以选择某个标签元素后的第一个另一个元素。下面的 css 会选择 h1 后和它同层级的第一个 p 标签，并将其中的文字设置为橙色并加粗。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>开始学习 CSS</title>
<style>
h1 + p {
color: orange;
font-weight: bold;
}
</style>
</head>
<body>
<h1>我是第一个一级标题
<p>
这是段落文本。 包含了一个<span>span</span> 元素。
</p>
</h1>
<p>这是一个段落文本。 包含了一个<span>span</span> 元素。</p>
<p>这是第二段。包含了一个 <em>强调</em> 元素。</p>
<ul>
<li>项目 1</li>
<li >项目 2</li>
<li>项目 <em>三</em></li>
</ul>
</body>
</html>
九、多种选择器混合使用
下面的 css 选择器是一个混合的选择器。
对于 body h1 + p .special 指的是选择 body 标签下第一层的所有 h1 标签，再选择该 h1 标签后第一个相邻的 p 标签，再选择该 p标签内带有 special 类的标签；
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body h1 + p .special , .lispecial {
color: yellow;
background-color: black;
}
</style>
</head>
<body>
<h1>我是第一个一级标题</h1>
<p>第一段文字<span class="special">aaa</span></p>
<p>第二段文字<span class="special">bbb</span></p>
<h1 >我是第二个一级标题</h1>
<p>第三段文字<span class="special">ccc</span></p>
<ul>
<li>项目一</li>
<li class="lispecial">项目二</li>
<li>项目 <em>三</em></li>
</ul>
<p class="special">fhyjytu</p>
</body>
</html>
十、超链接样式选择器
对于 a 标签，可以设置正常样式、鼠标悬停、鼠标点击时，点击后的样式。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
/*link:链接正常的样式;*/
a:link {
color: pink;
}
/*鼠标悬停的样式*/
a:hover {
color:red;
text-decoration: none;
}
/*鼠标点击的样式*/
a:active{
color:rgb(241, 30, 153);
background-color:blue;
text-align:center;
text-decoration: none;
}
/*链接访问过的样式*/
a:visited {
color: green;
}
</style>
</head>
<body>
<h1>我是第一个一级标题</h1>
<p>第一段文字<a href="http://example.com" target="_blank">link</a></p>
</body>
</html>
参考：
让我们开始 CSS 的学习之旅
CSS 选择器
类型、类和 ID 选择器
属性选择器
伪类和伪元素
关系选择器