css中的选择器

举报
馆主阿牛 发表于 2022/03/22 01:27:39 2022/03/22
【摘要】 css选择器是css中非常重要的一部分,包括我们通过css设置标签的样式以及js中对于某个标签样式的动态修改css选择器都是不可或缺的,今天我就来总结一下吧!

📋 个人简介

  • 💖 作者简介:大家好,我是阿牛😜
  • 💬格言:迄今所有人生都大写着失败,但不妨碍我继续向前!🔥

请添加图片描述

🍉前言

css选择器是css中非常重要的一部分,包括我们通过css设置标签的样式以及js中对于某个标签样式的动态修改css选择器都是不可或缺的,今天我就来总结一下吧!

🍓基础选择器

基础选择器又包括:标签选择器、类选择器、 id 选择器和通配符选择器。

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

🍒标签选择器

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

  • 作用
    标签选择器可以把某一类标签全部选择出来,比如所有的<div>标签和所有的<span>标签。
  • 优点
    能快速为页面中同类型的标签统一设置样式。
  • 缺点
    不能设计差异化样式,只能选择全部的当前标签。
 <style>
        /* 语法
        标签名{
            属性1:属性值1;
            属性2:属性值2;
            属性3:属性值3;
            ...
        } */
        div{
            height:20px;
            background-color: blue;
        }
        
    </style>
</head>
<body>
    <div></div>
</body>

🍒类选择器

如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。
类选择器在 HTML 中以 class 属性表示,在 CSS 中,类选择器以一个点"."号显示。
注意

  • 类选择器使用"."(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。
  • 可以理解为给这个标签起了一个名字来表示。
  • 长名称或词组可以使用中横线 来为选择器命名。
  • 不要使用纯数字、中文等命名,尽量使用英文字母来表示。

1、单类名

  <style>
       /*         
        语法
        类名{
        属性1:属性值1;
        ...
        } */
        .an{
            height:20px;
            background-color: skyblue;
        }
        
    </style>
</head>
<body>
    <div class="an"></div>
</body>

2、多类名

  • 在标签 class 属性中写多个类名。
  • 多个类名中间必须用空格分开。
  • 简单理解:就是给某个标签添加了多个类,或这个标签有多个名字。
   <style>
       /*         
        语法
        类名{
        属性1:属性值1;
        ...
        } */
        .an{
            height:20px;
            background-color: skyblue;
        }
        .as{
            font-size: 14px;
        }
        
    </style>
</head>
<body>
    <div class="an as">阿牛</div>
</body>

🍒id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性(全局唯一)来设置 id 选择器, CSS 中 id 选择器以“#”来定义。

<style>
      /* 语法
     #id名{
        属性1:属性值1;
        ...
      } */
      #nav{
          height:20px;
          background-color:red
      }  
    </style>
</head>
<body>
    <div id="nav"></div>
</body>

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

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

🍒通配符选择器

在 CSS 中,通配符选择器使用"*”定义,它表示选取页面中所有元素(标签)。

  • 通配符选择器不需要调用,自动就给所有的元素使用样式
  • 特殊情况才使用,例如:清除所有的元素标签的内外边距。
<style>
      /* 语法
       *{
        属性1:属性值1;
        ...
      } */
      *{
         margin: 0;
         padding: 0;
      }  
    </style>

🍓复合选择器

在 CSS 中,可以根据选择器的类型把选择器为基础选择器和复合选择器,复合选择器是建立基础选择器之上,对基本选择器进行组合形成的。

  • 复合选择器可以更准确、更高效的选择目标元素(标签)。
  • 复合选择器是由两个或多个基础先择器,通过不同的方式组合而成的。
  • 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。
选择器 作用 特征 使用情况 隔开符号及用法
后代选择器 用来选择后代元素 可以是子孙后代 较多 符号是空格 .nav a
子代选择器 选择最近一级元素 只选亲儿子 较少 符号是大于 .nav>p
并集选择器 选择某些相同样式的元素 可以用于集体 声明 较多 符号是逗号 .nav,.header
链接伪类选择器 选择不同状态的链接 跟链接相关 较多 重点记住 a{} 和 a:hover 实际开发的写法
:focus 选择器 选择获得光标的表单 跟表单相关 较少 input : focus 记住这个写法

🍒后代选择器

后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。

    <style>
      /* 语法
       元素1 元素2{
        属性名:属性值;
        ...
      } */
      /* 上述语法表示选择元素1里面的所有元素2(后代元素)。 */
      .nav p{     /*  p 是儿子  */
          height:20px;
          width: 200px;
      }
      .nav a{     /*  a 是孙子  */
          color:red;
      }
    </style>
</head>
<body>
    <div class="nav">
        <p><a href="#"></a>松子</p>
    </div>
</body>

🍒子(代)选择器

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

     <style>
        /* 语法:
           元素1>元素2{
               属性名:属性值;
               ...
           } */
        /* 上述语法表示选择元素1里面的所有直接后代(子元素)元素2。 */
        
        .nav>p{     /*  p 是儿子  */
            height: 20px;
            width: 200px;
            background-color: orange;
        }
      
      </style>
  </head>
  <body>
      <div class="nav">
          <p><a href="#"></a></p>
          <p></p>
      </div>
  </body>
  • 元素1和元素2中间用大于号隔开。
  • 元素1是父级,元素2是子级,最终选择的是元素2。
  • 元素2必须是亲儿子,其孙子、重孙之类都不归他管,你也可以叫他亲儿子选择器。

🍒并集选择器

并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明,并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。

    <style>
      /* 语法:
              元素1,元素2{
              属性名:属性值;
              ...
              }
        上述语法表示选择元素1和元素2。 */
      .nav,
       p{ 
          height:20px;    
          width: 200px;
      }
    </style>
</head>
<body>
    <div id="nav"> </div>
    <p></p>
</body>

🍒链接伪类选择器

 a : link /★选择所有未被访问的链接★/
 a : visited /★选择所有已被访问的链接★/
 a : hover /选择鼠标指针位于其上的链接*川
 a : active /★选择活动链接(鼠标按下未弹起的链接)*/

注意:在开发中我们常用a{}和a:hover来对a标签进行样式设置。

    <style>
        a{
            font-size: 20px;
            text-decoration: none;
        }
        a:hover{
            color:orange;
        }     
    </style>
</head>
<body>
    <a href="#">百度</a>
</body>

鼠标未移动到百度两字上时
在这里插入图片描述
鼠标移动到百度两字上时
在这里插入图片描述

🍒:focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,一般情况< input >类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。

    <style>
        input:focus{
            background-color: orange;
        }
    </style>
</head>
<body>
    <input type="text">
</body>

鼠标点击输入框背景色变橙色
在这里插入图片描述

🍒其它

复合选择器除了这些,还有不常用的兄弟选择器和相邻选择器。

名称 语法 作用 用法
兄弟选择器 A~B 选中 B ,如果它在 A 后且与 A 同级 h2~ p
相邻选择器 A+B 选中 B ,如果它紧跟在 A 后面且与 A 同级 h2+p

兄弟选择器

    <style>
        /* 兄弟选择器,这里的两个p标签和div标签是兄弟 */
        div~p{
            height: 20px;
            background-color: pink;
        }
       
    </style>
</head>
<body>
   <div></div>
   <p></p>
   <p></p>
</body>

在这里插入图片描述
相邻选择器

    <style>
        /* 相邻选择器,第一个p标签是div标签相邻兄弟 */
        div+p{
            height: 20px;
            background-color: red;
        }
    </style>
</head>
<body>
   <div></div>
   <p></p>
   <p></p>
</body>

在这里插入图片描述

🍉结语

今天的css选择器总结到这里!喜欢就支持一下哦!!!

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。