前端学习笔记012---CSS标签选择器、类选择器

最新推荐文章于 2024-03-06 17:08:15 发布

叶言-ne

最新推荐文章于 2024-03-06 17:08:15 发布

阅读量179

点赞数

分类专栏：前端学习笔记文章标签： css html html5

本文链接：https://blog.csdn.net/ketemstion/article/details/120572679

版权

前端学习笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的标签选择器和类选择器。标签选择器用于快速为页面中同类型的标签设定统一样式，而类选择器则能单独选择并设置特定标签的样式，支持多类名应用，实现更精细化的样式控制。通过实例展示了如何使用类选择器为不同的li元素赋予不同颜色。

摘要由CSDN通过智能技术生成

CSS选择器

1.1标签选择器

   指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

标签选择器可以把某一类标签全部选择出来。

优点：能快速为页面中同类型的标签统一设置样式。

缺点：不能差异化设置，只能选择全部的当前标签。

在这里插入图片描述

1.2类选择器

   单独选一个或者某几个标签。

  长名称或词组可以使用中横线来为选择器命名。
  
  不要使用纯数字、中文等命名，尽量使用英文字母来表示。

在这里插入图片描述

 <style>
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
    </style>

</head>
<body>
    <ul>
        <li class="red">冰雨</li>
        <li class="blue">来生缘</li>
        <li>李香兰</li>
        <li>生僻字</li>
    </ul>
</body>

在这里插入图片描述

类选择器–多类名

      给一个标签指定多个类名。

1.多类名的使用方式
在这里插入图片描述

叶言-ne

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录