CSS选择器

最新推荐文章于 2024-07-25 11:26:35 发布

xiao45683968

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量33

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/xiao45683968/article/details/130954333

版权

一、CSS选择器包括：

1.通配符选择器

通配符选择器主要就是用来设置通用一些样式

比如说，清理默认样式、清除ul li 的小圆点或者A标签下划线。

*{

}

* {
margin: 0;
padding: 0;
}
2.标签选择器

标签选择器主要就是通过标签来选中元素。

选中元素之后就可以对元素进行操作。

比如说：

span 添加一个颜色
span {
    color:red   属性：属性值
}

 <style>
        /* 清除浏览器自带的一个间距 */
        * {
            margin: 0;
            padding: 0;
        }

        p {

            /* 宽度 */

            /* 高度 */
            background-color: aqua;
            /* 背景颜色 */

        }
    </style>
</head>

<body>
    <span>如果有一天你真的可以可有钱？你会怎么花</span><br>
    <span>
        是先出去看看，还是攒钱最重要
    </span>
    <p>1.我的建议先攒钱 再去处去看看</p>
    <p>2. 没钱也要转</p>
    <p>3. 攒钱不花。买车买房</p>
    <p>but 格局很重要，你可以认识。</p>
    <p>能够进入公司上班工作， 可以认识很多志同道合。</p>
    <p>不要去做没有意义的工作 ，接受老板的PUA 画饼</p>
    <p>画饼 也是一门学问，是一门艺术</p>
</body>

3.class选择器

class选择器

class选择器也是前端最常用用的选择器

特征:可以设置多个样式多个class fibt foont。

语法
<style>
.fonter{

}
</style>

<p class="fonter"></p>
html页面需要在标签元素添加属性class = "class名称"

在css中通过.class名称进行引入

  <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header {
            color: #fff;
            background-color: #333;
        }

        .sizes {
            font-size: 26px;
        }
    </style>
<body>
     <p class="header sizes">

        难在坚持、贵在坚持、成在坚持。
        方向很重要-----选择很重要 做出自己适合的选择
    </p>
</body>

4.ID选择器

写页面一般会用到class选择器

交互获取用户数据或者绑定事件一般会用id.

ID是唯一的。同时也是权重最高的元素

语法
查找元素
#id名称进行操作

<p id="id名称"></p>

<style>
        #introduction {
            text-shadow: 2px 2px 2px blue;
            text-align: center;
            font-size: 20px;
        }
    </style>

<body>
    <p id="introduction">
        来一句话宣传自己的母校 -----招生简介
        环境优美，还有从澳大利亚空运过来的黑天鹅。
    </p>
</body>