CSS入门--基础选择器学习与掌握

最新推荐文章于 2024-07-19 15:50:46 发布

thorn豆豆

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量157

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_45067479/article/details/109631242

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css基础选择器的学习与掌握

一.

css基础选择器分为：标签选择器，类选择器，id选择器，通配符选择器（css选择器具体分类看我css选择器思维导图）

二：

（1）标签选择器
作用：可以把某一类标签全部选择出来。
有点：快速为页面中同一类型的标签统一样式
缺点：不能设计差异化样式，只能选择全部的当前标签

   p {
            color: blue;
        }

（2）类选择器
可以差异化的选择不同的标签，可以单独选一个或几个标签


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class类选择器</title>
    <style>
        /* 样式点定义，结构类（class）调用，一个或多个，开发最常用 */
        .red {
            color: red;
        }
        .pink {
            color: pink;
        }
        .blue {
            color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">流泪猫</li>
        <li class="red">不屑猫</li>
        <li class="pink">委屈猫</li>
        <li class="blue">本拉豆猫</li>
    </ul>
    <p class="pink">暗中微笑猫</p>
</body>
</html>

（3）id选择器
id属性只能在每个html里面出现一次，用于页面唯一性的元素上，常与JavaScript搭配使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        /* id选择器只能被使用唯一性的元素上，不能多次使用 */
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <p id="pink">流泪猫猫，我只流泪，不说话</p>
</body>

</html>

（4）通配符选择器
*代表通配符选择器，他表示选取页面中的所有元素（标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style>
        /* 通配符选择器会选中页面中的所有标签 */
        * {
            color: pink;
        }
    </style>
</head>
<body>
    <div>
        <span> 我</span>
        <span> 是</span>
        <span> 猫</span>
    </div>
    <p>流泪猫 </p> 
</body>
</html>

thorn豆豆

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS入门--基础选择器学习与掌握

css基础选择器的学习与掌握一.css基础选择器分为：标签选择器，类选择器，id选择器，通配符选择器（css选择器具体分类看我css选择器思维导图）二：（1）标签选择器作用：可以把某一类标签全部选择出来。有点：快速为页面中同一类型的标签统一样式缺点：不能设计差异化样式，只能选择全部的当前标签 p { color: blue; }（2）类选择器可以差异化的选择不同的标签，可以单独选一个或几个标签```html<!DOCTYPE ht
复制链接

扫一扫