前端--css知识点 css选择器(1)

最新推荐文章于 2024-07-19 14:40:55 发布

扑通游历记

最新推荐文章于 2024-07-19 14:40:55 发布

阅读量257

点赞数 1

文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_63813622/article/details/127232488

版权

选择器是用于指定css样式的html标签

所有的样式都包含在<style>标签里面(style在head标签里面)

<head>
   <style>
     h4 {
           color:blue;
        }
   </style>
</head>

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

分类：基础选择器和复合选择器

定义：由单个选择器组成的

包括:标签选择器、类选择器、id选择器、通配符选择器

（1）标签选择器

定义：标签选择器（元素选择器）是指html标签名称作为选择器，按标签名称分类

优点：直接为页面中同类型的标签设置统一样式

缺点：只能选择全部的当前标签

代码块如下：

           p  {
            color: blue;
            font-size: 12px;
           }
           div {
               color: pink;
           }

（2）类选择器

定义：可以单独选择一个或者几个标签

用法：用class属性调用class类用小数点在类名前面定义

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

    .red {
            color: red;
          }
   <div class="red">我也想变成红色</div>

多类名选择器

使用方法：在标签class中写多个类名，多个类名必须用空格隔开

 .red {
            color: red;
           }  
.font35 {
            font-size: 35px;
           }
 <div class="red font35" >多类名</div>

（3）id选择器

定义：id选择器必须调用标有特定的id的html元素指定样式

html用id属性设置id选择器，css中用“#”定义选择器

口诀：样式通过#定义结构id调用只能调用一次别人不可使用

  #pink {
                color: pink;
             }
<div>我是ID选择器类名前用#，利用时用#调用</div>

(4)通配符选择器

定义：在css中，用“*”来表示页面所有元素

特点：不用调用

 * {
            /* 通配符可以选择修改整个页面的样式 */
        }

关注