当前位置:首页 » 《休闲阅读》 » 正文

小白也能做的选择(上)_靠技术吃饭的博客

15 人参与  2022年02月04日 12:34  分类 : 《休闲阅读》  评论

点击全文阅读


CSS选择器的分类 之 基础选择器

  • 前言
    • 标签选择器(元素选择器)
    • 类选择器
      • 多类名
    • id 选择器
    • 通配符选择器


前言

基础选择器是由单个选择器组成。


标签选择器(元素选择器)

书写格式(示例):

标签名 {
	属性: 属性值;
       }

说明:

用 HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式

作用:

标签选择器可以把某一类标签全部选择出来,比如所有的<div>和<span>标签

优点:

  能快速为页面中同类型的标签统一设置样式

缺点:

不能设计差异化样式,只能选择全部的当前标签

类选择器


书写格式(示例):

.类名{
        属性: 属性值;
	......
     }

<div class="类名">什么是快乐星球!</div>

多类名

多类名的使用方式:

  <style>
        .red {
            color: red;
        }
        .font35 {
            font-size: 35px;
        }
  </style>

<div class="red font35">什么是快乐星球</div>

注意:

(1) 在标签中class属性中写多个类名

(2) 多个类名中间必须用空格分开

(3) 这个标签就可以分别具有这些类名的样式


多类名的使用场景:

<div class="pink font20">什么是快乐星球</div>

<div class="pink ">什么是快乐星球</div>

<div class="font15">什么是快乐星球</div>

<div class="pink font15">什么是快乐星球</div>

注意:

(1) 可以把一些标签元素相同的样式(共同的部分)放到一个类里面

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

(3) 从而节省CSS代码,统一修改也非常方便



id 选择器

书写格式(示例):

#id{
	属性:属性值;
	......
}

<div id="id名">什么是快乐星球!</div>

id选择器的口诀:

样式 # 定义
结构 id 调用
只能调用一次
别人切勿使用

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

(1)类选择器(class)相当于的名字,一个人可以有多个名字,同一个名字也可以被多个人使用

(2)id 选择器相当于人的身份证号码,全中国是唯一的,不得重复

(3)id 选择器和类选择器最大的不同在于使用次数上

(4)类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 JavaScript 搭配使用


通配符选择器

书写格式(示例):

 *{
     属性:属性值;
     ......

应用举例(清除所有的元素标签的内外边距):

 *{
      margin: 0;
      padding: 0;
   }

注意:

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

(2)特殊情况才使用

点击全文阅读


本文链接:http://zhangshiyu.com/post/34264.html

选择器  标签  属性  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1