CSS选择器的常见用法

老cu

于 2024-03-04 12:32:59 发布

阅读量346

点赞数 4

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_64173948/article/details/136447831

版权

1.什么是CSS选择器

css选择器的主要功能是选中页面指定的元素,选中了元素,就可以设置元素的属性了.这就好比当我们在编辑word文档的时候,想要更改字体颜色或者大小,可以用鼠标选中要更改哪些字.然后在修改.在CSS中也需要选中元素.我们有好几种选择器可以来选则不同的元素.

2.选择器的种类和用途

2.1.标签选择器

我们可以提供代码写一段简单的HTML代码来讲述一下CSS选择器的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div class="font32">我是⼀个div, class为font32</div>
<div class="font32">我是⼀个div, class为font32</div>
<div><a href="#">我是⼀个div</a></div>
<ul>
<li>aaa</li>
<li>bbb</li>
<li><a href="#">ccc</a></li>
</ul>
<ol>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ol>
<button id="submit">提交</button>
</body>
</html>

我们选中 li标签改变一下字体颜色

<style>
        li{
            color:red;
        }
    </style>

2.2.class选择器

class选择器也叫做类选择器,可以把自己想定义的标签都定义成同一种类.我们把两个<div>标签定义好以后,进行更改字体大小

 .font32{
            font-size: 32px;
        }

一个类可以被多个标签使用,一个标签也可以使用多个类

2.3 id选择器

id是唯一的,不能被多个标签使用

 #sumbit{
            color: yellow;
        }

2.4通配符选择器

设置页面所有的标签属性用*表示

 <style>
       *{
        color: rgb(18, 156, 221);
       }
    </style>

全部设为蓝色

2.5复合选择器

当我们想设置一个标签内部的标签的时候,可以提供复合选择器来选取,用空格分开,比如我们想选择ul中的 li 中的a这个标签就可以用 ul li a来选择

 <style>
       ul li a{
        color: red;
       }
    </style>

老cu

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS选择器的常见用法

css选择器的主要功能是选中页面指定的元素,选中了元素,就可以设置元素的属性了.这就好比当我们在编辑word文档的时候,想要更改字体颜色或者大小,可以用鼠标选中要更改哪些字.然后在修改.在CSS中也需要选中元素.我们有好几种选择器可以来选则不同的元素.
复制链接

扫一扫