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…

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;

基于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;可以考虑使…

接口测试及常用接口测试工具(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;飞行员会出…

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

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

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按钮为总清零按钮。当四人中任何一个…

Python毕业设计选题:基于Django+Vue的物资配送管理系统的设计与实现

开发语言&#xff1a;Python框架&#xff1a;djangoPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 管理员登录界面 管理员功能界面 申领者管理 后勤处管理 物资信息管理 入库信息管理 …

网安秋招面试

《Java代码审计》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484219&idx1&sn73564e316a4c9794019f15dd6b3ba9f6&chksmc0e47a67f793f371e9f6a4fbc06e7929cb1480b7320fae34c32563307df3a28aca49d1a4addd&scene21#wechat_redirect 《Web安全》h…

springboot092安康旅游网站的设计与实现(论文+源码)_kaic

毕业设计&#xff08;论文&#xff09; 基于JSP的安康旅游网站的设计与实现 姓  名 学  号 院  系 专  业 指导老师 2021 年 月 教务处制 目 录 目 录 摘 要 Abstract 第一章 绪论 1.1 研究现状 1.2 设…

字符串逆序(c语言)

错误代码 #include<stdio.h>//字符串逆序 void reverse(char arr[], int n) {int j 0;//采用中间值法//访问数组中第一个元素和最后一个元素//交换他们的值&#xff0c;从而完成了字符串逆序//所以这个需要临时变量for (j 0; j < n / 2; j){char temp arr[j];arr[…

Fakelocation 步道乐跑(Root真机篇)

前言:需要 Fakelocation&#xff0c;真机Root,步道乐跑&#xff0c;Dia&#xff0c;MT管理器系统需求 Fakelocation | MT管理器 | Dia | 环境模块 任务一 真机Root&#xff08;德尔塔&#xff0c;过momo&#xff0c;刷环境模块&#xff09; 任务二 前往Dia查看包名&#xff08…

【实战篇】requests库 - 有道云翻译爬虫 【附:代理IP的使用】

目录 〇、引言一、目标二、请求参数分析三、响应分析四、编写爬虫脚本【隧道代理的使用】 〇、引言 无论是学习工作、旅游出行、跨境电商、日常交流以及一些专业领域都离不开翻译工具的支持。本文就带大家通过爬虫的方式开发一款属于自己的翻译工具~ 一、目标 如下的翻译接口…

MyBatis 源码分析 - SQL执行过程(三)之 ResultSetHandler

MyBatis的SQL执行过程 在前面一系列的文档中&#xff0c;我已经分析了 MyBatis 的基础支持层以及整个的初始化过程&#xff0c;此时 MyBatis 已经处于就绪状态了&#xff0c;等待使用者发号施令了 那么接下来我们来看看它执行SQL的整个过程&#xff0c;该过程比较复杂&#xff…