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>