【web前端开发】CSS最常用的11种选择器

news2024/10/1 1:23:46

文章目录

  • 1.CSS介绍
  • 2.CSS的语言规则
  • 3.CSS的引入方式
  • 4.选择器
    • 标签选择器
    • 类选择器
    • id选择器
    • 通配符选择器
    • 复合选择器
      • 后代选择器
      • 子代选择器
    • 并集选择器
    • 交集选择器
    • 伪类选择器
      • hover伪类选择器
      • active伪类选择器
    • 结构伪类选择器
  • 结语

1.CSS介绍

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

CSS的作用:给HTML里面的标签设置样式
简单点来说就是让HTML的页面变得更加好看

2.CSS的语言规则

  • CSS是写在 style 标签里面的,而style标签一般写在head标签里面,title标签的下面

3.CSS的引入方式

CSS共有三种引入方式,分别是内嵌式,外联式和行内式

内嵌式: CSS写在style标签中
注意:style标签可以写在页面的任意位置,但一般都会在head标签里面

外联式: CSS写在单独的.css文件里面
要通过link标签在网页中导入

行内式: CSS写在标签的style属性中
一般搭配js来使用

4.选择器

标签选择器

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

语法:

标签名 {
      CSS属性名: 属性值
      CSS属性名: 属性值
      ...
    }

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>这是一个段落</p>
  <p>这是一个段落</p>
  <div>这是一个段落</div>
</body>
</html>

效果:
在这里插入图片描述

作用: 通过标签名,找到页面中所有这类标签,并设置样式

注意:

  • 标签选择器选择的是一类标签,而不是单独一个
  • 标签选择器无论嵌套关系有多深,都能找到对应的标签

类选择器

标签选择器是选择这一类标签并设置样式,而类选择是可以给单独的一个标签设置样式

语法:

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

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .one {
      color: red;
    }
    .two {
      font-size: 30px;
    }
  </style>
</head>
<body>
  <p class="one">这是一个段落</p> 
  <p class="one two">这是一个段落</p>
  <p>这是一个段落</p>
</body>
</html>

效果:
在这里插入图片描述

注意点:

  • 所有的标签都有class这个属性,class属性的属性值就是类名
  • 类名不能以数字或中横线 - 作为开头
  • 一个标签可以有多个类名,类名之间要用空格隔开
    - 类名可以重复,一个类选择器可以同时选中多个标签

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

语法:

#id属性值 {
	CSS属性名: 属性值
    CSS属性名: 属性值
    ...
}

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #nav {
      color: blue;
    }
  </style>
</head>
<body>
  <p id="nav">这是一个段落</p>
  <p>这是一个段落</p>
</body>
</html>

效果:
在这里插入图片描述

注意:

  • 所有的标签都有id这个属性
  • id是唯一的,不能重复!
  • id选择器只能被调用一次
  • id选择器通常搭配js来使用

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

  • 类选择器可以被多个标签调用
  • id选择器只能被调用一次

通配符选择器

找到文中所有的标签,并设置样式

语法:

* {
  CSS属性名: 属性值
  CSS属性名: 属性值
  ...
}

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      color: blue;
    }
  </style>
</head>
<body>
  <p>CSS</p>
  <span>CSS</span>
  <div>CSS</div>
  <h1>CSS</h1>
</body>
</html>

效果:
在这里插入图片描述
因为通配符选择器会改变所有标签的样式,在实际开发使用中用的很少

复合选择器

复合选择器中有 后代选择器和子代选择器

后代选择器

作用:根据HTML标签的嵌套关系,选择父元素"后代中"所有满足条件的标签

语法:

选择器1 选择器2{
    CSS属性名: 属性值
    CSS属性名: 属性值
    ...
}

效果:在选择器1中找到标签的后代(儿子,孙子,重孙子...)中,找到满足选择器2的标签,并设置样式

  • 选择器和选择器之间用空格隔开
  • 只要是后代(儿子,孙子,重孙子...)就会被选中

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div p{
          color: #f00;
        }
    </style>
</head>
<body>
<div>
    <p>这是一个段落</p>
    <span>
        <p>这也是一个段落</p>
    </span>
    <h4>这是一个小标题</h4>
</div>
</body>
</html>

效果:
在这里插入图片描述

子代选择器

作用:根据HTML标签的嵌套关系,选择父元素"子代中"所有满足条件的标签

语法:

选择器1>选择器2{
    CSS属性名: 属性值
    CSS属性名: 属性值
    ...
}

效果:在选择器1中找到标签的子代中,找到满足选择器2的标签,并设置样式

  • 这里的子代是只有儿子
  • 选择器与选择器之间用 > 隔开

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div > p{
            color: blue;
        }
    </style>
</head>
<body>
<div>
    <p>这是一个段落</p>
    <span>
        <p>这也是一个段落</p>
    </span>
</div>
</body>
</html>

效果:
在这里插入图片描述

并集选择器

作用:同时选择多组标签,并设置样式

语法:

选择器1,选择器2,...{
    CSS属性名: 属性值
    CSS属性名: 属性值
    ...
}

效果:找到选择器1和选择器2所选中的标签,并设置样式

  • 选择器和选择器中间用 , 隔开
  • 选择器可以有多个

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            font-size: 50px;
        }
        div,
        .one,
        span{
            color: blue;
        }
    </style>
</head>
<body>
    <div>这是一个div</div>
    <p class="one">这是一个段落</p>
    <span>这是一个span标签</span>
</body>
</html>

效果:
在这里插入图片描述

交集选择器

作用:找到 HTML中同时满足选择器的标签

语法:

选择器1选择器2...{
	CSS属性名: 属性值
    CSS属性名: 属性值
    ...
}

效果:找到 包含上述选择器的标签,并设置样式

  • 选择器可以有多个

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            color: blue;
        }
        .two {
            font-style: italic;
        }
        p.one.two{
            font-size: 30px;
        }     
    </style>
</head>
<body>
    <div class="one">这是一个div</div>
    <p class="one two">这是一个p标签</p>
    <span>这是一个span标签</span>
</body>
</html>

效果:
在这里插入图片描述

伪类选择器

伪类是 W3C 制定的一套选择器的特殊状态，通过伪类您可以设置元素的动态状态

hover伪类选择器

作用:将鼠标悬停在元素上,并设置样式

语法:

选择器:hover {
	CSS属性名: 属性值
    CSS属性名: 属性值
    ...
}

效果:鼠标悬停在设置的元素时,会出现样式

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      a:hover{
        color: red;
      }
    </style>
</head>
<body>
<a href="#">这是一个超链接</a>
<br>
<a href="#">这也是一个超链接</a>
</body>
</html>

效果:
我这里鼠标其实是悬浮在第二个标签上的,但是截图的时候不显示的鼠标了
在这里插入图片描述

  • 任何一个元素都可以悬停,都可以设置样式

active伪类选择器

作用:将鼠标点击元素时,并设置样式

语法:

选择器:avtive {
	CSS属性名: 属性值
    CSS属性名: 属性值
    ...
}

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      p:active{
          color: skyblue;
      }
    </style>
</head>
<body>
<p>这是一个段落</p>
<p>这是一个段落</p>
</body>
</html>

在这里插入图片描述

结构伪类选择器

作用:根据HTML的结构关系查找元素

选择器描述
E:first-child{ }找到父元素中第一个子元素E
E:last-child{}找到父元素中最后一个子元素E
E:first-child(n){ }找到父元素第n个子元素E
E:last-child(n){}找到父元素中倒数第n个子元素E

注:E是元素的英文单词element 的首字母 E ，就是元素/标签的意思

结语

选择器在前端开发中还是很常用的
实践为主,理论为辅 建议大家可以自己去尝试着使用一下

感谢你的观看!希望这篇文章能帮到你!
web前端开发专栏在不断更新中,欢迎订阅!
“愿与君共勉,携手共进!”
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/398223.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

分布式架构-流量治理-服务容错

分布式架构-流量治理-服务容错

系列目录 分布式架构-流量治理-服务容错 分布式架构-流量治理-流量控制 引子 容错性设计(Design for Failure)是微服务的一个核心原则。随着拆分出的服务越来越多&#xff0c;随之而来会面临以下两个问题的困扰&#xff1a; 由于某一个服务的崩溃&#xff0c;导致所有用到这个服…
阅读更多...
MyBatis的基本使用

MyBatis的基本使用

MyBatis 为啥MyBatis会使用xml 在一个程序中&#xff0c;若需要操作数据表&#xff0c;那么 SQL 语句有两种存放方式&#xff1a;1. 放到 Java 类里面&#xff08;这个就存在大量的字符串拼接&#xff0c;还有占位符需要处理-----JDBC&#xff09;&#xff1b;2&#xff1a;放…
阅读更多...
TypeScript深度剖析: TypeScript 装饰器的理解？应用场景？

TypeScript深度剖析: TypeScript 装饰器的理解？应用场景？

面试官&#xff1a;说说你对 TypeScript 装饰器的理解&#xff1f;应用场景&#xff1f; 一、是什么 装饰器是一种特殊类型的声明&#xff0c;它能够被附加到类声明&#xff0c;方法&#xff0c; 访问符&#xff0c;属性或参数上 是一种在不改变原类和使用继承的情况下&#…
阅读更多...
程序员中的女性力量——做不被定义的自己

程序员中的女性力量——做不被定义的自己

她是office lady&#xff0c;亦是程序媛&#xff0c;程序员界的靓丽色彩&#xff0c;不可或缺。 “只有那些疯狂到以为自己能够改变世界的人——才能真正改变世界。” 女性该如何定义自己&#xff1f;程序媛怎么发挥自己最大的价值。 争取自己做选择&#xff0c;经济和思想都独…
阅读更多...
Spring基础与创建

Spring基础与创建

目录 前言 Spring基础与核心概念 Spring是什么 1、什么是容器 2、什么是IoC 3、理解SpringIoC 4、DI&#xff08;依赖注入&#xff09; Spring的创建和使用 1、创建Spring项目 1.1、创建一个普通Maven项目 1.2、添加Spring框架支持 1.3、添加启动类和main方法 2、…
阅读更多...
【c++】：STL模板中string的使用

【c++】：STL模板中string的使用

文章目录 STL简介一.认识string二.string中基本功能的使用总结STL简介 STL(standard template libaray-标准模板库)&#xff1a;是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架。STL的版本 原始版本 Alexand…
阅读更多...
15_MySQL存储过程与存储函数

15_MySQL存储过程与存储函数

MySQL从5.0版本开始支持存储过程和函数。存储过程和函数能够将复杂的SQL逻辑封装在一起&#xff0c;应用程序无须关注存储过程和函数内部复杂的SQL逻辑&#xff0c;而只需要简单地调用存储过程和函数即可。1. 存储过程概述1.1 理解含义&#xff1a;存储过程的英文是 Stored Pro…
阅读更多...
JDK8新特性宝典

JDK8新特性宝典

JDK8新特性 ​ Java 是第一大编程语言和开发平台。它有助于企业降低成本、缩短开发周期、推动创新以及改善应用服务。如今全球有数百万开发人员运行着超过 51 亿个 Java 虚拟机&#xff0c;Java 仍是企业和开发人员的首选开发平台 课程内容的介绍 了解Java发展史Lambda表达式…
阅读更多...
[深入理解SSD系列 闪存2.1.5] NAND FLASH基本读操作及原理_NAND FLASH Read Operation源码实现

[深入理解SSD系列 闪存2.1.5] NAND FLASH基本读操作及原理_NAND FLASH Read Operation源码实现

前言 上面是我使用的NAND FLASH的硬件原理图，面对这些引脚，很难明白他们是什么含义, 下面先来个热身： 问1. 原理图上NAND FLASH只有数据线，怎么传输地址？ 答1．在DATA0～DATA7上既传输数据，又传输地址 当ALE为高电平时传输的是地址， 问2. 从NAND FLASH芯片手册可知，要…
阅读更多...
Apache DolphinScheduler GitHub Star 突破 10000！

Apache DolphinScheduler GitHub Star 突破 10000！

点击蓝字 关注我们今天&#xff0c;Apache DolphinScheduler GitHub Star 突破 10000&#xff0c;项目迎来一个重要里程碑。这表明 Apache DolphinScheduler 已经在全球的开发者和用户中获得了广泛的认可和使用。DolphinScheduler 旨在解决公司日常运营中的大数据处理工作流调度…
阅读更多...
Redis之持久化操作

Redis之持久化操作

目录 一、简介 二、RDB 1、自动触发 2、手动触发 3、RDB 的优点和缺点 三、AOF 1、AOF的工作流程 2、AOF的配置 3、AOF的优点和缺点 4、俩种持久化的方式如何选择&#xff1f; 一、简介 1、什么是持久化&#xff1f; 持久化是指将内存中的数据同步到磁盘中&#xf…
阅读更多...
策略模式详解

策略模式详解

文章目录策略模式&#xff08;行为模式&#xff09;1. 策略模式介绍2. 好处3. 场景案例4. 案例源码1. 代码结构2. 榜单服务接收消息入口3. 基础任务类4. 定义策略模式转发的规范5. 代理的第一层6. 代理的第二层抽象父类&#xff1a;定义视频聊榜单代理规范7. 代理的第二层实现子…
阅读更多...
elasticsearch自定义企业词典

elasticsearch自定义企业词典

我们中文分词用的是ik&#xff0c;但是ik只是对基本的中文词进行了分词&#xff0c;而对于企业或者人名没有进行分词。比如&#xff0c;我搜索中国平安&#xff0c;那么ik只能分成中国、平安如果这样&#xff0c;这肯定是不行滴&#xff01;接下来&#xff0c;俺就教你&#xf…
阅读更多...
历史上被发现的第一个真正的Bug - Grace Hopper

历史上被发现的第一个真正的Bug - Grace Hopper

写在前面&#xff1a;博主是一只经过实战开发历练后投身培训事业的“小山猪”&#xff0c;昵称取自动画片《狮子王》中的“彭彭”&#xff0c;总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域&#xff0c;如今终有小成…
阅读更多...
【bug】antd全局的主题色样式被覆盖,被修改为`antd`默认的主题色

【bug】antd全局的主题色样式被覆盖,被修改为`antd`默认的主题色

背景&#xff1a; 项目本身修改了主题色,配置如下: // umi配置文件 export default {theme: {primary-color: #2F54EB, // 全局主色}, };需要对图片上传组件做封装,并在项目中统一引用,如下 import { TdsUpload } from tdsComponents;环境信息 node tiandstiandsdeMacBook…
阅读更多...
【JavaEE】前后端分离实现博客系统（页面构建）

【JavaEE】前后端分离实现博客系统（页面构建）

文章目录1 效果展示1.1 博客登录页面1.2 博客列表页面1.3 博客详情页面1.4 博客编辑页面2 页面具体实现2.1 博客列表页的实现2.2 博客详情页的实现2.3 博客登录页面的实现2.4 博客编辑页面的实现写在最后1 效果展示 1.1 博客登录页面 用于实现用户的登录功能&#xff0c;并展…
阅读更多...
2023年3月西安/杭州/深圳/东莞NPDP产品经理认证考试报名

2023年3月西安/杭州/深圳/东莞NPDP产品经理认证考试报名

产品经理国际资格认证NPDP是国际公认的唯一的新产品开发专业认证&#xff0c;集理论、方法与实践为一体的全方位的知识体系&#xff0c;为公司组织层级进行规划、决策、执行提供良好的方法体系支撑。 【认证机构】 产品开发与管理协会&#xff08;PDMA&#xff09;成立于1979年…
阅读更多...
什么是量子计算？

什么是量子计算？

什么是量子计算&#xff1f; 量子计算机仍处于起步阶段&#xff0c;正在影响已经在经典计算机上运行的新一代模拟&#xff0c;现在使用 NVIDIA cuQuantum SDK 进行加速。 在史蒂夫乔布斯 (Steve Jobs) 推出可以放入口袋的计算机之前 27 年&#xff0c;物理学家保罗贝尼奥夫 (P…
阅读更多...
[MySQL核心]2.select单表查询常见操作

[MySQL核心]2.select单表查询常见操作

MySQL核心--select单表查询常见操作select单表查询常见操作关于通配符*的使用结合MySQL运算符去重distinct空值查询union合并查询带in子查询(重点)limit分页查询排序order by分组group by笔试实践问题&#xff08;新浪&#xff09;select单表查询常见操作 关于通配符*的使用 项…
阅读更多...
记录实现操作系统互斥锁的一次思考

记录实现操作系统互斥锁的一次思考

今天实现操作系统互斥锁的时候遇到一个有趣的问题。 场景 有两个进程分别名为 taskA&#xff0c;taskB&#xff0c;采取时间片轮转的方式交替运行——也即维护了一个 ready_queue&#xff0c;根据时钟中断来 FIFO 地调度任务。它们的任务是无限循环调用 sys_print() 来打印自…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023