CSS学习03之基本选择器

最新推荐文章于 2024-05-18 03:07:39 发布

小黑神zxs

最新推荐文章于 2024-05-18 03:07:39 发布

阅读量349

点赞数 1

分类专栏： CSS3详解文章标签： css html 前端 idea css选择器

本文链接：https://blog.csdn.net/zxs1002/article/details/122866923

版权

CSS3详解专栏收录该内容

18 篇文章 0 订阅

订阅专栏

回顾

有三种插入样式表的方法：

外部 CSS

<!--外部样式link,还有一种@import url=""-->
<link rel="stylesheet" href="css/style.css">

内部 CSS

<!--内部样式-->
    <style>
        h2{
            color: green;
        }
    </style>

行内 CSS

<!--行内样式：在标签元素中，编写一个style属性，填写样式即可-->
<p style="text-align: center; color: red">xxxx</p>

基本选择器

什么是选择器

在 CSS 中，选择器是选取需设置样式的元素的模式。

作用

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

种类

我们将css选择器简单分为四类：

基本选择器
层次选择器
伪类选择器
属性选择器

而我们这一章就是来了解这第一种也是比较常见，重要的选择器：基本选择器！
基本选择器又分为三种方式：

标签选择器
id选择器
类选择器

示例

为了方便我直接使用了内部样式！
话不多说上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <!--标签选择器,选择一类标签-->
    <style>
        h1{
            color: red;
            background: green;
            border-radius: 5em;
            padding: 1em;
        }
        p{
            color: blue;
            background: red;
            border-radius: 50px;
            position: absolute;
        }
    </style>
    <!--类选择器，选择所有class属性一致的标签，可以跨标签-->
    <style>
        .zxs{
            color: red;
        }
        .zxs2{
            color: blue;
        }
    </style>
    <!--id选择器
    id必须保证全局唯一,最好不要数字开头
    #id名称{}
    -->
    <style>
        #zxs520{
            color: hotpink;
        }
        #zxs52{
            color: deeppink;
        }
    </style>
</head>
<body>
<h1>学习Java</h1>
<h2 class="zxs">学习Java</h2>
<h2 class="zxs2">学习Java</h2>
<h3 id="zxs520">标题3</h3>
<h4 id="zxs52">标题4</h4>
<p>听狂神讲解的</p>
</body>
</html>

测试效果

在这里插入图片描述

小结

优先级：不遵循就近原则，固定的
id选择器>class选择器>标签选择器
id必须保证全局唯一,最好不要数字开头

作者有话说

博客创作不易，希望看到这里的读者动动你的小手点个赞，如果喜欢的小伙伴可以一键三连，作者大大在这里给大家谢谢了。

小黑神zxs

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习03之基本选择器

回顾有三种插入样式表的方法：外部 CSS<link rel="stylesheet" href="css/style.css">内部 CSS <style> h2{ color: green; } </style>行内 CSS<!--行内样式：在标签元
复制链接

扫一扫