CSS学习笔记——CSS三大基本选择器

最新推荐文章于 2024-04-24 10:57:13 发布

Brray_Jim

最新推荐文章于 2024-04-24 10:57:13 发布

阅读量2.7k

点赞数 2

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/qq_25445557/article/details/82252947

版权

HTML/CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS三大基本选择器

标签选择器

p{
    color:red;
    }

什么是标签选择器？
- 根据指定标签名称，在当前界面中找到所有该名称的标签，并设置属性
注意点
- 标签选择器选中的是当前界面所有同名标签，不能单独选中
- 只要是HTML中的标签都可以作为标签选择器

id选择器

#id{
    color:red;
    }

什么是id选择器？
- 根据指定标签的id，在当前界面中找到该id的标签，并设置属性
注意点
- 每个HTML标签都有id属性
- 同一个界面中id是唯一的，不能重复
- 编写id选择器必须要在id前面加上一个#号
- id的名称有一定的规范，只能由字母数字和下划线组成
- id的名称不能够以数字开头
- id的名称不能与HTML标签同名
- 如果仅仅是为了设置样式，我们不会使用id，因为前段开发中id是留给js使用的

类选择器

.class{
    color:red;
    }

什么是类选择器？
- 根据指定标签的类，在当前界面中找到该类的标签，并设置属性
注意点
- 每个HTML标签都有class属性
- 同一个界面中class属性是可以重复
- 编写class选择器必须要在class名称前面加上一个.号
- class的名称有一定的规范，只能由字母数字和下划线组成
- class的名称不能够以数字开头
- class的名称不能与HTML标签同名
- class就是专门给某一类标签设置样式的
- 一个标签可以同时绑定多个class属性
  - <p class="p1 p2 p3">Test paragraph</p>，这样就绑定了三个类属性
类选择器实践，通过对不同类的组合来实现不同的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class选择器</title>
    <style>
        .red{
            color: #FF0000;
        }
        .underline{
            text-decoration: underline;
        }
        .bigsize{
            font-size: 30px;;
        }
    </style>
</head>
<body>
<p class="bigsize red">第一段文字</p>
<p class="underline bigsize">第二段文字</p>
<p class="red underline">第三段文字</p>
</body>
</html>

Brray_Jim

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记——CSS三大基本选择器

CSS三大基本选择器目录标签选择器id选择器类选择器标签选择器p{ color:red; }什么是标签选择器？根据指定标签名称，在当前界面中找到所有该名称的标签，并设置属性注意点标签选择器选中的是当前界面所有同名标签，不能单独选中只要是HTML中的标签都可以作为标签选择器id选择器#id{ color:red; }...
复制链接

扫一扫