CSS基础学习篇——选择器

学习文档连接:CSS层叠样式表

1.全局选择器:*

* {margin: 0;padding: 0;font-size: 18px;
}

2.类(clss)选择器,以 . 开头

.container {display: flex;justify-content: space-around;align-items: center;width: 1200px;margin: 20px auto 0;
}

3.ID选择器,以#开头,页面中只能出现一次,唯一性

#box_3 {color: orange;
}

4.元素/标签选择器,使用标签名

h1 {font-size: 28px;color: palevioletred;
}

html代码:

<div class="container"><div class="box box_1"><h1>CSS-选择器</h1></div><div class="box box_2"><a href="https://www.baidu.com/">点击跳转百度</a></div><div class="box box_3" id="box_3">box_3(带有id属性)</div><div class="box box_4"><a>a标签-无跳转</a></div></div>

效果图:
在这里插入图片描述
5.属性选择器:[ ]
attr属性名,value值,i不区分大小写([attr i])

/*标签属性选择器,可匹配多个,attr属性名,value值,i不区分大小写([attr i])
[attr]:匹配attr属性
[attr=value]:匹配attr属性值为valu(仅有value一个的属性值)
[attr~=value]:匹配attr属性值包含有value的
[attr|=value]:匹配attr属性值包含有value或value开头后面拼接连字符-的
[attr^=value]:匹配attr属性值有以value开头的
[attr$=value]:匹配attr属性值有以value结尾的
[attr*=value]:匹配attr属性值中有value的
*/
div[class~="box_4"] {background-color: bisque;
}
div[class|="div"] {background-color: gold;width: 200px;height: 200px;text-align: center;line-height: 200px;border-radius: 10px;font-weight: bolder;
}
div[class^="div"] {border: 2px solid red;
}
a[href='https://www.baidu.com/']
{color: seagreen;
}

html代码:

<div class="container"><div class="box box_1"><h1>CSS-选择器</h1></div><div class="box box_2"><a href="https://www.baidu.com/">box box_2</a></div><div class="box box_3" id="box_3">box box_3</div><div class="box box_4"><a>box box_4</a></div><div class="box box_4"><a>box box_4</a></div><div class="div-5">div-5</div><div class="div-6 div_1">div-6</div><div class="div123 div_22">div-7</div></div>

效果图:
在这里插入图片描述
6.伪类选择器:使用:开头。处于某种状态下。

/*a标签伪类的顺序:link/visited/hover/active*/
/* focus/blur*/
a:link {color: rgb(67, 169, 252);
}
a:visited {color: #999;
}
a:hover {color: red;
}
a:active {text-decoration: underline;
}

7.伪元素选择器:使用::开头,伪元素,不是真实的元素

.box_3::first-line {font-weight: bold;color: #999;
}
/*before\after要与content属性一起使用*/
.div_4::before{content: 'before';
}
.div_4::after{content: 'after';
}

代码:

<div class="container"><div class="box box_2"><a href="https://www.baidu.com/">百度一下</a></div><div class="box box_3" id="box_3">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div><div class="box box_4"><div class="div_4">伪元素</div></div></div>

效果图:
在这里插入图片描述
8.关系选择器
8.1后代选择器:使用单个空格连接
8.2子代选择器:使用>符号连接
8.3相邻(兄弟)选择器:使用+符号连接,匹配紧跟后面的兄弟元素
8.4通用兄弟选择器:使用~符号连接,匹配符合的同级的兄弟元素

.container .box {width: 400px;height: 200px;text-align: center;border-radius: 10px;border: 1px solid sandybrown;
}
.box_1 > div {color: red;
}
.box_2 + div {font-weight: bolder;font-size: 22px;
}
.box_3 ~ p {text-decoration: underline;
}

页面代码:

<div class="container"><h1>关系选择器h1</h1><div class="box box_1"><div class="div_1">关系选择器1</div></div><div class="box box_2"><div class="div_2">关系选择器2</div></div><div class="box box_3"><div class="div_3">关系选择器3</div></div><p>关系选择器P</p></div>

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

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

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

相关文章

Marin说PCB之电源的Surface Current Density知多少?

小编我是一位资深的国漫迷&#xff0c;像什么仙逆&#xff0c;斗破&#xff0c;斗罗&#xff0c;完美世界&#xff0c;遮天&#xff0c;凡人修仙传&#xff0c;少年歌行等&#xff0c;为了可以看这些视频小编我不惜花费了攒了很多年的私房钱去开了这个三个平台的会员啊&#xf…

CSS中display和visibility的区别

在 CSS 中&#xff0c;display 和 visibility 是两个用于控制元素显示和布局的属性&#xff0c;但它们的作用和效果是不同的。以下是它们的主要区别&#xff1a; 1.display 定义&#xff1a;display 属性用于控制元素的显示类型和布局行为。 常见值&#xff1a; none&#…

计算机毕业设计——ssm-基于SSM框架的校园爱心公益平台的设计与实现-演示录像2021

作者&#xff1a;程序媛9688开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等。 &#x1f31f;文末获取源码数据库&#x1f31f;感兴趣的可以先收藏起来&#xff0c;还有大家在毕设选题&#xff08;免费咨询指导选题&#xff09;&#xff0…

Oracle视频基础1.3.3练习

1.3.3 检查数据库启动情况 ps -ef | grep oracle启动数据库 sqlplus /nolog conn / as sysdba修改 fast_start_mttr_target 参数为初始值-50&#xff0c;缺省 scope 和 sid&#xff0c;查看修改结果 show parameter fast; alter system set parameter 250; show parameter fa…

CSS flex布局- 最后一个元素占满剩余可用高度转载

效果图 技术要点 height父元素必须有一个设定的高度flex-grow: 1 flex 盒子模型内的该元素将会占据父容器中剩余的空间F12检查最后一行的元素&#xff0c;高度就已经改变了&#xff1b;

LlamaIndex框架学习-提示词的几种使用模式

定义自定义提示词 定义自定义提示词就像创建格式字符串一样简单。 from llama_index.core import PromptTemplatetemplate ("We have provided context information below. \n""---------------------\n""{context_str}""\n------------…

基于vue框架的的驾校预约管理系统设计d5tq3(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,驾校教练,车辆信息,报名信息,学员信息,考试预约,教学课程,教练评价,考试成绩,练车预约,报修申请,维修信息,课程类型,车辆类型 开题报告内容 基于Vue框架的驾校预约管理系统设计开题报告 一、项目背景与意义 随着驾驶培训行业的快…

shell脚本编写注意细节 ==、=等的区别

文章目录 和的使用主要区别小结 Shell脚本要注意的细节1. 变量引用和空格处理2. [[ ... ]] vs [ ... ]3. 使用-n和-z来检测变量是否为空4. 整数运算和浮点运算5. 避免使用反引号执行命令6. for循环中的命令替换7. 使用trap来清理临时文件8. 避免使用硬编码路径9. 使用-eq、-lt、…

Docker Swarm简介

注意事项 Swarm 模式是用于管理 Docker 守护进程集群的一项高级特性。如果你打算将 Swarm 用作生产运行时环境&#xff0c;那就使用 Swarm 模式。如果你不打算使用 Swarm 进行部署&#xff0c;可改用 Docker Compose。如果正在为 Kubernetes 部署进行开发&#xff0c;可以考虑使…

【1】基础概念

文章目录 一、特点二、基础语法注意三、官方编程指南四、go 语言标准库 API 一、特点 golang 一个 go 文件都要归属到一个包&#xff0c;需要进行申明。天然的并发&#xff1a;golang 从语言层面支持大并发。每个 go 文件都必须要归属到一个包中。执行 go 文件&#xff1a;go …

接口测试及常用接口测试工具(postman/jmeter)详解

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 首先&#xff0c;什么是接口呢&#xff1f; 接口一般来说有两种&#xff0c;一种是程序内部的接口&#xff0c;一种是系统对外的接口。 系统对外的接口&#…

CVE-2024-51567 CyberPanel upgrademysqlstatus 远程命令执行

该漏洞源于upgrademysqlstatus接口未做身份验证和参数过滤&#xff0c;未授权的攻击者可以通过此接口执行任意命令获取服务器权限&#xff0c;从而造成数据泄露、服务器被接管等严重的后果。 影响版本 CyberPanel v2.3.5CyberPanel v2.3.6 目前官方已有可更新版本&#xff0…

Kaggle “Reducing Commercial Aviation Fatalities” 比赛 生理数据分析

1、背景 Kaggle在2018 年 12 月 20 日举办“Reducing Commercial Aviation Fatalities” 比赛&#xff0c;通过收集飞行员的生理数据&#xff0c;判断飞行员何时会遇到麻烦吗&#xff1f;该比赛主要分析飞行员的问题&#xff0c;因为航班多、时间不固定&#xff0c;飞行员会出…

【flink】之新版本kafka到kafka

前言&#xff1a; 通过sinkTo()的优点&#xff1a;更简洁、类型安全&#xff0c;适用于使用 Flink 提供的预定义 sink 或简单的自定义 sink 准备&#xff1a; 引入Flink 1.12版本即可 <dependency><groupId>org.apache.flink</groupId><artifactId>fl…

如何配置,npm install 是从本地安装依赖

在 Node.js 中&#xff0c;要使npm install从本地安装依赖&#xff0c;可以按照以下步骤进行配置&#xff1a; 一、准备本地依赖包 确保你有本地的依赖包。这个依赖包可以是一个包含package.json文件的文件夹&#xff0c;或者是一个已经打包好的.tgz文件。 二、使用相对路径…

无套路领取《AI应用开发专栏》

最近有些时间没有更新技术文章了&#xff0c;都在忙着写《AI应用开发入门》专栏&#xff0c;专栏已整理放到了github上&#xff0c;有兴趣的小伙伴可以移步github阅读&#xff0c;地址见文末。 1、为什么写这个文档 之前陆续写了一些零散的AI相关的技术文章&#xff0c;也有不…

uni-app使用movable-area 实现数据的拖拽排序功能

文档地址 template部分 <movable-area :style"getAreaStyle"><movable-view class"table-row" v-for"v,i in move.list":key"v.id":y"v.y"change"handle_moving"direction"vertical"touchst…

Webserver(1.8)操作函数

目录 文件属性操作函数access函数chmod函数chown函数truncate函数 目录操作函数mkdir函数rmdir函数rename函数chdir函数*getcwd函数 目录遍历函数*opendir函数*readdir函数closedir函数 dup、dup2函数dupdup2 fcntl函数 文件属性操作函数 access函数 判断某个文件是否有某个权…

基础IO -- 标准错误输出stderr

目录 1&#xff09;为什么要有 fd 为 2 的 stderr 2&#xff09;使2和1重定向到一个文件中 这里我们谈一下以前只是了解过的stderr 通过两段代码&#xff0c;显然&#xff0c;我们可以知道两个FILE*都是指向显示器的 对于重定向&#xff0c;只有stdout才会将打印的数据重定向…

基于Multisim的四位抢答器设计与仿真

四位选手进行抢答比赛&#xff0c;用基本门电路及集成逻辑器件构成四人抢答器。选手编号分别为1&#xff0c;2&#xff0c;3&#xff0c;4号&#xff0c;用S1&#xff0c;S2&#xff0c;S3&#xff0c;S4四个按钮作为抢答按钮&#xff0c;S0按钮为总清零按钮。当四人中任何一个…