CSS 选择器的常见用法

  这里CSS选择器主要分为以下这几种:1. 标签选择器 2. class选择器 3. id选择器 4. 复合选择器 5. 通配符选择器 CSS 选择器的主要功能就是选中⻚⾯指定的标签元素. 选中了元素, 才可以设置元素的属性.

1.标签选择器

<style>
    p{
        color: red;
    }
</style>
<body>
    <p>
        标签选择器
    </p>
</body>

  这里面表示,所有的P标签 设置为红色。

2.class选择器

<style>
    .one{
        color: red;
    }
</style>
<body>
    <div class="one">
        类选择器
    </div>
</body>

这里表示选择class为one的元素,颜色改为红色。这里注意上面的需要.类名。

3.id选择器

<style>
    #one{
        color: red;
    }
</style>
<body>
    <div id="one">
        id选择器
    </div>
</body>

 注意点:

  1.所有的标签上都有id属性
  2.id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的
  3.一个标签上只能有一个id属性值
  4.一个id选择器只能选中一个标签

 这里表示id为one的元素,颜色改为红色。(id选择器的时候需要#id)

 4. 通配符选择器

<style>
    *{
        color: red;
    }
</style>
<body>
    <div>
        通配符选择器
    </div>
</body>

  这里表示设置页面所有为红色。

5. 复合选择器

ul li a{
     coler : blue;
}

  这里表示ul标签下的 li 标签下的a 标签 ,设置为红色。

1. 以上三个标签选择器ul li a 中的任意,都可以替换成类选择器,或者id选择器,可以是任意选择器的组合,也可以是任意数量选择器的组合。

 2. 不一定相邻的标签。

 3. 如果需要选择多种标签,可以使用,分割。逗号前后可以是以上任意选择器,也可以是选择器的组合。

  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值