CSS选择器的常见用法

news2024/11/14 0:18:27

文章目录

  • CSS是什么
  • CSS的引入方式
    • 内部样式表
    • 行内样式表
    • 外部样式
  • 选择器
    • 基础选择器
    • 类选择器
    • id选择器
    • 通配符选择器
  • 复合选择器
    • 后代选择器

CSS是什么

CSS就是(Cascading Style Sheets)就是层叠样式表,CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离,说人话就是给页面化妆,美化页面。

CSS的引入方式

CSS的基本语法规则:
1、选择器决定针对谁i进行修改
2、声明决定修改啥
3、声明的属性是键值对。分开每个键值对,:分开每个键和值。

内部样式表

在html中镶嵌<style></style>标签,在这里面编写css代码,这种方式我们成为内部样式表。
在这里插入图片描述

行内样式表

在这里插入图片描述
通过style属性,来指定某个标签的样式,这种方式称为行内样式表。

外部样式

还可以在外部创建一个.css文件,在html文件中使用link标签引入css。
在这里插入图片描述

选择器

在进行页面设计的时候是很精细的操作,需要指定某个页面元素进行样式修改,选择器的作用就是选中页面中指定的标签元素,选中之后才能进行修改。

基础选择器

特点:可以快速的选择某一类的标签进行样式修改,但是同一标签不能差异化选择。
在这里插入图片描述
如上图,每一个div标签元素和p标签元素的样式都一样。

类选择器

特点 :
差异化表示不同的标签,可以让多个标签都使用同一个标签。

语法:
1、在style标签中设置类名时使用.类名
2、在给标签起名时使用class = 类名此时类名不用带.
3、一个类可以被多个标签使用,一个标签也可以是使用多个类。
4、不要使用纯数字,或者中文,以及标签名来命名类名
5、如果类名较长,可以使用-分割。

在这里插入图片描述
我们看他们的修改样式的代码中有相同的代码,我们就可以给重复的地方提取出来:
在这里插入图片描述

id选择器

大致的用法与类选择器相同,类选择器在style中设置类名时使用.类名而id选择器使用#类名,同样标签在设置类名时class = 类名 不需要加#

区别:与类选择器最大的区别就是,id是唯一的,不能被多个标签使用。

在这里插入图片描述

通配符选择器

使用*的定义,选取所有的标签,对所有标签进行样式修改,他不需要别页面结构所调用。
在这里插入图片描述

选择器作用特点
标签选择器能选出同一类标签不能差异化选择
类选择器能选出一个或多个标签根据需求选择, 最灵活, 最常用.
id 选择器能选出一个标签同一个 id 在一个 HTML 中只能出现一次
通配符选择器选择所有标签特殊情况下使用

复合选择器

后代选择器

又叫包含选择器,选择某个父元素中的某个子元素
元素1 元素 2 { 样式声明 }
在这里插入图片描述
当然后面元素也不一定是非得是儿子,而可以是孙子。

也可以和任意基础选择器进行组合,例如:类选择器,id选择器等。
在这里插入图片描述
更多的选择器和一些语法结构可以查阅帮助文档。

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

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

相关文章

从项目到技能,软件测试面试高频题总结 (附答案),收割10个offer...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 软件测试面试题简历…

农村供水调度系统在河北某地的建设案例

项目背景 农村饮水安全事关广大农村居民的切身利益&#xff0c;是脱贫攻坚、乡村振兴的基础条件。该县为加快推进农村人饮安全运行管理工作&#xff0c;建立健全运管服务体系&#xff0c;改善当前农村人饮安全运营现状&#xff0c;积极实施城乡供水一体化工程&#xff0c;进一步…

八、使用代码对道路结果进行后处理及iou优化步骤详解

老师又给我画了大饼 没办法 只能按照他们的想法做个尝试 上一篇的方法还没进行下去 就被叫停 又更新了一个新的想法 这里记录一下 我的尝试过程 一、图片膨胀 首先使用代码对道路进行膨胀 这里的代码 import cv2 import numpy as np img cv2.imread(gt_dirname, 0) ke…

李白、高适、杜甫,情义深深,抵不过乱世游离

李白&#xff0c;字太白&#xff0c;是唐朝浪漫主义诗人&#xff0c;被后人誉为“诗仙”&#xff0c;杜甫&#xff0c;字子美&#xff0c;唐代现实主义诗人&#xff0c;李白和杜甫合称为“李杜”。高适&#xff0c;字达夫&#xff0c;唐代诗人。李白&#xff0c;杜甫&#xff0…

JVM学习随笔03——Java堆中new一个对象的步骤

目录 一、进行类加载 二、堆中分配内存 1、怎么输出GC日志&#xff1a; 2、内存分配的两种方式&#xff1a; 3、内存分配过程中并发控制的两种方式&#xff1a; 三、内存空间初始化 四、对象头初始化&#xff08;对象头包含哪些信息&#xff1f;&#xff09; 五、执行构…

【C++】-const对象及成员函数之类和对象中篇完结(中)

&#x1f496;作者&#xff1a;小树苗渴望变成参天大树 ❤️‍&#x1fa79;作者宣言&#xff1a;认真写好每一篇博客 &#x1f4a8;作者gitee:gitee &#x1f49e;作者专栏&#xff1a;C语言,数据结构初阶,Linux,C 文章目录 前言一、案例的引入二、const对象和成员函数三、取地…

有效库存管理策略:避免滞销和短缺的利器!

在现代企业管理中&#xff0c;采购计划和库存管理是非常重要的环节。一方面&#xff0c;采购计划可以让企业根据市场需求和自身情况&#xff0c;科学合理地安排采购时间、采购量和采购方式&#xff0c;从而有效地控制成本&#xff0c;并确保生产和销售的顺畅&#xff1b;另一方…

bigdata-file-viewer--大数据文件查看工具

bigdata-file-viewer--大数据文件查看工具 bigdata-file-viewer是什么常用功能安装 bigdata-file-viewer是什么 一个跨平台&#xff08;Windows&#xff0c;MAC&#xff0c;Linux&#xff09;桌面应用程序&#xff0c;用于查看常见的大数据二进制格式&#xff0c;例如Parquet&…

【C++ 学习 ③】- 类的六大默认成员函数

目录 一、 构造函数 1.1 - 概念 1.2 - 特性 二、析构函数 2.1 - 概念 2.2 - 特性 2.3 - 用栈实现队列 三、拷贝构造函数 四、运算符重载 4.1 - 双目运算符 4.2 - 单目运算符 4.3 - 赋值运算符重载 五、const 成员函数 六、取地址 和 const 取地址运算符重载 参考…

如何写软件测试简历项目经验,靠这个面试都要赶场

一、前言&#xff1a;浅谈面试 面试是我们进入一个公司的门槛&#xff0c;通过了面试才能进入公司&#xff0c;你的面试结果和你的薪资是息息相关的。那如何才能顺利的通过面试&#xff0c;得到公司的认可呢?面试软件测试要注意哪些问题呢?下面和笔者一起来看看吧。这里分享一…

如何计算旋转框的IOU

一、先将两个框转换为角点形式 一般我们得到的是中心点&#xff0c;宽高&#xff0c;和旋转角度。通过矢量旋转公式得到角点形式。 二、判断四个角点是否在对方的框里&#xff0c;并保存在里面的角点 A的角点向B的相邻的两条边投影(任意的B的两条边)&#xff0c;使用向量点积得…

微信开发者工具实现代码加固

一&#xff1a;下载安装node.js node.js下载地址&#xff1a;下载 | Node.js 二&#xff1a;微信开发者工具安装代码加固拓展 1&#xff1a;开发者工具选择设置-》拓展设置 2:安装代码加固拓展 三&#xff1a;使用代码加固拓展实现核心密码加密 1&#xff1a;安装devtool-cod…

makefile 变量赋值方式

文章目录 前言一、变量的定义和使用二、变量的赋值方式1&#xff0c;简单赋值 &#xff08; : &#xff09;2&#xff0c;递归赋值 &#xff08; &#xff09;3&#xff0c;条件赋值 &#xff08; ? &#xff09;4&#xff0c;追加赋值 &#xff08; &#xff09; 三、预定义…

Django框架003:orm与MySQL数据库的连接及踩坑记录

大家好&#xff0c;我是csdn的博主&#xff1a;lqj_本人 这是我的个人博客主页&#xff1a; lqj_本人的博客_CSDN博客-微信小程序,前端,python领域博主lqj_本人擅长微信小程序,前端,python,等方面的知识https://blog.csdn.net/lbcyllqj?spm1011.2415.3001.5343哔哩哔哩欢迎关注…

FFCNet:基于傅立叶变换的频率学习和复杂卷积网络用于结肠疾病分类

文章目录 FFCNet: Fourier Transform-Based Frequency Learning and Complex Convolutional Network for Colon Disease Classification摘要方法Patch Shuffling Module (PSM)Frequency-Domain Complex NetworkComplex ConvolutionComplex ReLUComplex BN 实验结果 FFCNet: Fou…

1— .Net MVC之控制器

在上下文中使用的控制器 问题 答案 什么是控制器&#xff1f; 控制器包含用于接收请求、更新应用程序状态或模型以及选择将发送给客户端的响应的逻辑 控制器有什么用&#xff1f; 控制器是MVC项目的核心&#xff0c;并包含Web应用程序的逻辑 如何使用控制器&#xff1f; …

第五讲:设计库的管理和使用

第五讲&#xff1a;设计库的管理和使用 概述&#xff1a; 课程内容简介&#xff1a; 1、 下载Design kit 2、 安装 Design kit 3、 Design kit的使用 4、 如何进行优化设计 Design Kit – 由元件厂商所提供设计元件库&#xff0c; PDK – Process Design Kit &#xff08;IC的…

智能改写工具免费-智能改写工具

中文改写软件 您好&#xff0c;中文改写软件是使用人工智能技术改写中文文本的工具。它可以自动识别并改写文本中的某些词语、短语或句子&#xff0c;以使它们在语意上更为准确、清晰或通顺。 中文改写软件的工作原理基于自然语言处理技术。它使用预先训练好的模型&#xff0…

Windows Server 2016安装Mysql 5.6

&#x1f388; 作者&#xff1a;互联网-小啊宇 &#x1f388; 简介&#xff1a; CSDN 运维领域创作者、阿里云专家博主。目前从事 Kubernetes运维相关工作&#xff0c;擅长Linux系统运维、开源监控软件维护、Kubernetes容器技术、CI/CD持续集成、自动化运维、开源软件部署维护…

软考——软件工程,面向对象,数据流图,数据库设计,UML建模,数据结构及算法应用,面向对象程序设计

软件工程 开发模型 瀑布模型 其他模型 增量模型和螺旋模型 V模型 瀑布模型是结构化模型&#xff0c;喷泉模型是面向对象模型 构件组装模型&#xff08;CBSD&#xff09; 统一过程 敏捷开发方法 信息系统开发方法 需求 结构化设计 基本原则 内聚与耦合 软件测试 测试原则与类…