html css样式选择器介绍

目录

一、单标签选择器

下面的 css 会将所有 h1 标签里的文字设置为红色

html 复制代码
<!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 标签里的文字设置为红色

html 复制代码
<!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 类的标签将其中的文字设置为橙色并加粗

html 复制代码
<!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 标签并将其中的文字设置为橙色并加粗

html 复制代码
<!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 标签,并将其中的文字设置为橙色并加粗

html 复制代码
<!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 标签内的文字,并将其中的文字设置为橙色并加粗。

html 复制代码
<!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 标签内的文字,并将其中的文字设置为红色。

html 复制代码
<!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 标签,并将其中的文字设置为橙色并加粗。

html 复制代码
<!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 类的标签;

html 复制代码
<!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 标签,可以设置正常样式、鼠标悬停、鼠标点击时,点击后的样式。

html 复制代码
<!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 选择器
属性选择器
伪类和伪元素
关系选择器

相关推荐
DiXinWang21 分钟前
关闭谷歌浏览器提示“若要接收后续 Google Chrome 更新,您需使用 Windows 10 或更高版本”的方法
前端·chrome
CoderYanger29 分钟前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
CodeCraft Studio32 分钟前
国产化PDF处理控件Spire.PDF教程:如何在 C# 中从 HTML 和 PDF 模板生成 PDF
pdf·c#·html·.net·spire.pdf·pdf文档开发·html创建模板pdf
muyouking1133 分钟前
深入理解 HTML `<label>` 的 `for` 属性:提升表单可访问性与用户体验
前端·html·ux
软件技术NINI37 分钟前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI38 分钟前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
IT_陈寒1 小时前
Java性能调优:从GC日志分析到实战优化的5个关键技巧,让你的应用快如闪电!
前端·人工智能·后端
Mintopia1 小时前
🚀 Next.js API 压力测试:一场前端与后端的“极限拉扯”
前端·后端·全栈
Mintopia1 小时前
🛡️ 对抗性攻击与防御:WebAI模型的安全加固技术
前端·javascript·aigc
庙堂龙吟奈我何1 小时前
qiankun知识点
前端