CSS基础选择器

胖就别吃

已于 2022-11-03 10:06:27 修改

阅读量78

点赞数

文章标签： css 前端 html

于 2022-11-01 21:22:56 首次发布

本文链接：https://blog.csdn.net/qq_50647672/article/details/127603248

版权

CSS选择器的作用

选择标签用的

找到所有h1标签，选择器（选对人）
设置这些标签的样式，比如颜色红色（做对事）

css基础选择器

1.标签选择器

用HTML标签名称作为选择器，按标签名称分类

标签名 {

属性1：属性值1；

属性2：属性值2；

属性3：属性值3；

}

2.类选择器（重点）

差异化选择不同的标签，单独选择一个或几个标签

.类名 {

        属性1：属性值1

        属性1：属性值2

         }

注意：

类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）；
可以理解为给这个标签起了一个名字；
长名称可以使用中横线来为选择器命名；
不要使用纯数字，中文等命名，尽量使用英文字母来表示；
命名要有意义。

记忆口诀：

样式点定义结构类（class）调用一个或多个开发最常用

类选择器-多类名

多类名使用方式

<div class="red font35">金明洙</div>

在标签class属性中写多个类名；

多个类名中间必须使用空格分开；

这些标签就可以分别具有这些类名的样式。

多类名开发使用场景

相同样式放到一个类里面

这些标签都可以调用这个公共类，然后再调用自己独有的类

节省CSS代码，统一修改方便

3.id选择器

HTML元素以id属性来设置id选择器，CSS中id选择器以#来定义

#pink {

color: pink;

}

<div id="pink">dori</div>

id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用

id选择器和类选择器的区别：

类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用；
id选择器好比人的身份证号码，全中国是唯一的，不得重复；
id选择器和类选择器最大的不同在于使用次数上；
类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素，经常和JavaScri搭配使用。

3.通配符选择器

* {

属性1：属性值1

}

通配符选择器不需要调用，自动就给所有的元素使用样式

 <style>
        * {
            color: red;
        }
        /* *这里把 html body div span li 等等的标签都改成了红色 */
    </style>
</head>
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>

基础选择器的总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color: red;}
类选择器	可以选出1个或多个标签	可以根据需求选择	非常多	.nav { color: red;}
id选择器	一次只能选择一个标签	ID属性只能在每个HTML文档中出现一次	一般和js搭配	#nav {color :red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	*{color :red}