CSS——基础选择器

最新推荐文章于 2022-10-27 16:45:00 发布

时光·漫步zth

最新推荐文章于 2022-10-27 16:45:00 发布

阅读量138

点赞数

分类专栏：前端 CSS

本文链接：https://blog.csdn.net/qq_41573234/article/details/80367208

版权

前端同时被 2 个专栏收录

36 篇文章 3 订阅

订阅专栏

CSS

9 篇文章 0 订阅

订阅专栏

CSS 选择器的作用是找出某类元素，以便对这类元素设置样式。

CSS 的基础选择器：

标签选择器
类选择器
ID 选择器

1. 标签选择器

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式。

标签选择器（名称：<>内的关键字，选中：所有这一标签里面的内容）

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        /*标签选择器*/
        p {
            color: red;
        }
    </style>
</head>

<body>

    <a href="http://www.baidu.com">百度</a>
    <p>文本内容</p>
    <p>文本内容</p>
    <span>文本内容</span>
</body>

</html>

2. 类选择器

类选择器允许以一种独立于文档元素的方式来指定样式，类选择器可以单独使用，也可以与其他元素结合使用。 类选择器前面有一个“.”。

class选择器（名称：以点开头的自定义名称，选中：所有 class="类名" 的内容，可以重复使用）

【注】只有适当地标注文档后，才能使用类选择器，所以使用该选择器之前通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
类选择器（Class选择器）根据类名来选择,而这个类名是自定义的。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        /*类选择器*/
        .text {
            color: red;
        }
    </style>
</head>

<body>
    <p class="text">文本内容01</p>
    <p>文本内容02</p>
</body>

</html>

3. Id 选择器

ID 选择器（名称：以#开头的自定义名称，选中：所有 id="id名" 的内容，不可重复使用）

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        /*ID选择器*/
        #text {
            color: red;
        }
    </style>
</head>

<body>
    <p id="text">文本内容01</p>
    <p>文本内容02</p>
</body>

</html>

优先级：

默认<标签<class<ID

时光·漫步zth

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——基础选择器

1. 元素选择器最常见的CSS选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置HTML样式，选择器通常是某个HTML元素，比如 b、h1、a，甚至可以是 HTML 本身。 html{color: black; } h1{ color: red;} a{color:yellow: }2. 类选择器类选择器允许以一...
复制链接

扫一扫