【CSS—前端快速入门】CSS 选择器

devtools/2025/3/4 22:47:41/

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


CSS


1. CSS介绍


1.1 什么是CSS?


CSS(Cascading Style Sheet),层叠样式表,用于控制页面的样式;

CSS 能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果;能够做到页面的样式和
结构分离;

在这里插入图片描述


1.2 基本语法规范


选择器 +{一条/N条声明}

  • 选择器决定针对谁修改(找谁)
  • 声明决定修改啥(干啥)
  • 声明的属性是键值对
  • 使用:区分键值对,使用:区分键和值.
<style>css">p{/*设置字体颜色 */color: red;/*设置字体大小 */font-size: 30px;
}
</style><p>hello</p>

注意:

  • CSS 要写到 style标签中 (后面还会介绍其他写法)
  • style 标签可以放到页面任意位置,一般放到 head 标签内.
  • CSS 使用 /**/作为注释 (使用 ctrl +/快速切换).

在这里插入图片描述

保存代码,查看页面:在这里插入图片描述

在这里插入图片描述


1.3 引入方式


行内样式

在这里插入图片描述


内部样式

在这里插入图片描述


在这里插入图片描述


外部样式

在这里插入图片描述

我们再创建一个新文件,用于写入选择器,然后在原文件的 head 内通过上述语法引入新文件的信息:
在这里插入图片描述


在这里插入图片描述

写好后,保存两个文件,重新打开页面:

在这里插入图片描述


值得一提,选择器的生效优先级遵从就近原则


1.4 规范


样式大小写

  • 虽然 CSS 不区分大小写,我们开发时统一使用小写字母

空格规范

  • 冒号后面带空格
  • 选择器{ 之间也有一个空格.

2. CSS选择器


在这里插入图片描述


标签选择器


/*选择所有的a标签,设置颜色为红色/a{color: red;
}/*选择所有的div标签,设置颜色为绿色*/div {color: green;
}

在这里插入图片描述
保存代码,打开页面:

在这里插入图片描述


要修改 div3 的颜色,我们可以设置 a { } 选择器,来选择所有 a 标签,并设置颜色:

在这里插入图片描述


在这里插入图片描述


类选择器


class 选择器的概念和规范使用如下:

  • 可以为每一个标签都添加 class 属性
  • class 的值不要求唯一
  • 在使用class 选择器时,需要在 class 选择器前加一个 . ,如 .class 名{ }

在这里插入图片描述

保存代码,打开页面:

在这里插入图片描述


ID 选择器


ID 的概念和规范使用如下:

  • 一个页面中的 ID 值原则性上要求是唯一

  • 可以为每个标签都设置 ID

  • 可以为 ID 赋任何值,哪怕是标签名( div , span , title…)

  • 在使用 ID 选择器时,需要在 ID 选择器前加一个 # ,如 # id 名{ },避免 ID 是标签名的时候,编译器误以为使用的是标签选择器


在这里插入图片描述

保存代码后,打开页面:

在这里插入图片描述


通配符选择器


通配符的概念和通配符选择器的使用如下:

  • 通配符:*,表示选择所有,如SQL 中的 select*

  • 通配符选择器的使用: *{ },表示选择当前页面的所有元素;

  • 通配符选择器的优先级较前面几种选择器,优先级是比较低的;

在这里插入图片描述

保存代码,打开页面:

在这里插入图片描述


复合选择器


复合选择器,是由多个单选择器组成的多选择器,又分为并集交集的形式:

  • 并集形式,选择器用 , 隔开;

  • 交集形式,选择器用空格隔开;

  • 如果要精细选择某个部分,就可以为这个部分的标签添加特征属性,如 ID , class 等等,再使用交集;


并集

在这里插入图片描述

保存代码,打开页面:

在这里插入图片描述


并集

补充一个常用的标签:

<body><!-- 无序列表标签 --><ul><li></li></ul><!-- 有序列表标签 --><ol><li></li></ol></body>

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

如果要只想让有序列表的超链接字体改为红色,我们就可以使用复合选择器的交集形式:

在这里插入图片描述


在这里插入图片描述

在这里插入图片描述


http://www.ppmy.cn/devtools/164578.html

相关文章

【弹框组件封装】展示、打印、下载XX表(Base64格式图片)

目录 打印、下载弹框组件组件使用弹框展示 打印、下载弹框组件 /components/PrintDialog.vue <!-- 打印、下载弹框 --> <template><el-dialog:title"title"top"3vh"append-to-body:visible.sync"dialogVisible":close-on-click…

基于web端的ftp程序

搭建一个web页面访问的FTP服务器 github官网地址 vsftpd 程序搭建跳转地址 vsftpd 搭建完成之后&#xff0c;开始搭建 ftp-web 下载运行该项目需要 Node.js v4 才能运行。# node 版本为 v16.20.2 node -v v16.20.2git clone https://github.com/liuqi6908/ftp-web-client.gi…

SpringBoot系列之Spring AI+DeekSeek创建AI应用

使用 Spring AI 与 DeepSeek 创建智能 AI 应用 随着人工智能技术的飞速发展&#xff0c;AI 已经成为现代软件应用中不可或缺的一部分。从智能对话系统到内容生成工具&#xff0c;AI 的应用场景日益丰富。Spring AI 是 Spring 官方推出的用于简化 AI 集成的框架&#xff0c;而 …

java 项目中设计模式 之单例模式

本文是自己学习单例模式的记录&#xff0c;方便以后使用的时候查看&#xff0c;并不专业哈 一、单例模式 1、特点&#xff1a; 单例模式是最简单的一种模式&#xff0c;具有单例模式只能有一个实例&#xff0c;并且必须为其他对象提供一个访问点。单例模式分为懒汉模式和饥饿…

C语言总结目录

一、数据类型【文章链接】 二、标识符【文章链接】​​​​​​​ #编译GCC 三、程序结构语句 四、输入输出函数 五、数组 六、指针 七、数组指针&&指针数组 八、排序算法 九、结构体 十、链表 十一、宏定义 十二、文件读写 十三、静态库&&动态库…

计算机毕设JAVA——某高校宿舍管理系统(基于SpringBoot+Vue前后端分离的项目)

文章目录 概要项目演示图片系统架构技术运行环境系统功能简介 概要 网络上许多计算机毕设项目开发前端界面设计复杂、不美观&#xff0c;而且功能结构十分单一&#xff0c;存在很多雷同的项目&#xff1a;不同的项目基本上就是套用固定模板&#xff0c;换个颜色、改个文字&…

25年前端如何走的更稳

2025年&#xff0c;随着deepseek引起的AI大模型技术的深度革命&#xff0c;带来了很多机会和挑战&#xff0c;前端程序员作为互联网里一个普通但必不可少的岗位&#xff0c;在当前形势下&#xff0c;需要主动变革才能走的更稳。本文简单介绍三个方向&#xff0c;Web3前端、全栈…

本地部署 DeepSeek-R1大模型详细教程(桌面客户端美观UI)

大家好&#xff01;今天我来分享一篇超级详细的教程&#xff0c;教你如何在本地部署 DeepSeek-R1 大模型&#xff0c;让你的电脑也能成为一个强大的 AI 工作站&#xff01;这篇文章会从零开始&#xff0c;手把手带你完成所有步骤&#xff0c;适合小白操作。废话不多说&#xff…