• 有问题请联系QQ:2374146085
  • 有问题请联系QQ:2374146085

css基础选择器

1年前 (2021-07-28) 1085次浏览 已收录 0个评论

选择器

选择器就是根据不同需求把不同的标签选出来,就是选择标签用的。

选择器分为基础选择器和复合选择器

  • 基础选择器是由单个选择器组成的
  • 基础选择器又包括:标签选择器、类选择器】id选择器和通配符选择器

标签选择器

定义:用于html标签名称作为选择器,按标签名分类,为页面中某一类标签指定统一的css样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css入门</title>
    <style>
        /* 给谁改样式{样式}
        标签名{改什么样式} */
        d{
            color:red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <d>
        红色
    </d>
</body>
</html>

缺点:不能差异化样式,只能选择全部的当前标签。

结果演示

类选择器(重点)

定义:差异化选择器,单独选择一个或某几个标签,然后需要用class属性来调用class。

语法

.类名{
        属性1:属性值1;
        }
<标签 class='类名'>红色</标签>
类名不能使用p div等标签名

小实验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例</title>
    <style>
        .colr{
            width: 100px;
            height: 100px;
            background-color:red;
        }
        .colg{
            width: 100px;
            height: 100px;
            background-color:green;
        }
    </style>
</head>
<body>
    <!-- div就是一个盒子,里面可以装任何内容 -->
    <div class="colr">红色</div>
    <div class="colg">绿色</div>
    <div class="colr">红色</div>
</body>
</html>
结果演示

多类名

给一个标签指定多个类名,从而达到更多的选择目的,这些类名都可以选出这个标签。相同样式的标签元素放到一个类里面,提高代码复用性

格式

<div class="col ziti">测试</div>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多类名</title>
    <style>
        .col{
            color: red;
        }
        .font{
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="col font">测试</div>
</body>
</html>
结果演示

id选择器

定义:id选择器可以为标有特定id的html元素指定特定的样式;css中通过#来定义id选择器,html中通过id属性来调用id选择器。

id选择器:样式#定义,结构id调用只能调用一次,不能被别人调用,并且id选择器一般用于页面唯一性的元素上,经常和js搭配使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器 </title>
    <style>
        #col{
            color: red;
        }
    </style>
</head>
<body>
    <div id="col">能调用</div>
    <div id="col">不能再调用了</div>
</body>
</html>
结果演示

通配符选择器

定义:使用”*”定义,表示选取页面中所有标签,然后全部给他们改样式。

通配符选择器不需要html调用,自动给所有元素使用该样式

渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:css基础选择器
喜欢 (1)

您必须 登录 才能发表评论!