CSS——复合选择器、CSS特性、背景属性、显示模式-程序员宅基地
技术标签： css HTML5+css3
1、复合选择器
复合选择器：由两个或多个基础选择器，通过不同的方式组合而成。
作用：更准确、更高效的选择目标元素（标签）
1.1 后代选择器
后代选择器：选中某元素的后代元素
选择器写法：父选择器 子选择器 {CSS属性}，父子选择器之间用空格隔开。
1.2 子代选择器
子代选择器：选中某元素的子代元素（最近的子级）。
选择器写法：父选择器 > 子选择器 {CSS属性}，父子选择器之间用 > 隔开。
1.3 并集选择器
并集选择器：选中多组标签设置相同的样式。
选择器写法：选择器1，选择器2，…，选择器N {CSS属性}，选择器之间用 , 隔开
1.4 交集选择器-了解
交集选择器：选中同时满足多个条件的元素。
选择器写法：选择器1选择器2 {CSS属性}，选择器之间连写，没有任何符合
注意：如果交集选择器中有标签选择器，标签选择器必须写在最前面。
1.5 伪类选择器
伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式
鼠标悬停状态：选择器 :hover {CSS属性}
任何标签都可以设置鼠标悬停的状态。
1.6 伪类-超链接（拓展）
超链接一共有四个状态
提示：如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。
2、CSS特性
CSS特性：继承性、层叠性、优先级
2.1 继承性
继承性：子级默认继承父级的文字控制属性
如果标签自己有样式则生效自己的样式，不继承
2.2 层叠性
特点：
- 相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
- 不同的属性会叠加：不同的CSS属性都生效
2.3 优先级
优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
规则：选择器优先级高的样式生效
公式：通配符选择器 < 标签选择器 < id选择器 < 行内样式 < !important（选中标签的范围越大，优先级越低）
!important提取功能，提高权重/优先级到 最高 ，慎用
2.3.1 优先级-叠加计算规则
叠加计算：如果是复合选择器，则需要权重叠加计算
公式：（每一级之间不存在进位）
（行内样式，id选择器个数，类选择器个数，标签选择器个数）
规则：
- 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
- !important权重最高
- 继承权重最低
3、Emment写法
Emment写法：代码的简写方式，输入缩写 VS code会自动生成对应的代码
HTML：
CSS：大多数简写方式为属性单词的首字母
4、背景属性
4.1 背景图
网页中，使用背景图实现装饰性的图片效果。
属性名：background-image（bgi）
属性值：url（背景图URL）
默认效果是平铺的
4.2 背景图平铺方式
属性名：background-repeat（bgr）
属性值：
4.3 背景图位置
属性名：background-position（bgp）
属性值：水平方向位置 垂直方向位置
关键字：
坐标（数字+px，正负都可以）
- 水平：正数向右；负数向左
- 垂直：正数向下；负数向上
提示：
- 关键字取值方式写法，可以颠倒取值顺序
- 可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中。
4.4 背景图缩放
作用：设置背景图大小
属性名：background-size（bgz）
常用属性值：
- 关键字
- cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
- contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
- 百分比：根据盒子尺寸计算图片大小
- 数字+单位（例如：px）
4.5 背景图固定
作用：背景不会随着元素的内容滚动
属性名：background-attachment（bga）
属性值：fixed
4.6 背景复合属性
属性名：background（bg）
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定 （空格隔开各个属性值，不区分顺序）
5、显示模式
显示模式：标签（元素）的显示方式
作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。
块级元素：
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
行内元素：
- 一行可以显示多个
- 设置宽高属性不生效
- 宽高尺寸由内容撑开
行内块元素：
- 一行可以显示多个
- 设置宽高属性生效
- 宽高尺寸也可以由内容撑开
5.1 转换显示模式
属性名：display
属性值：
综合案例一：热词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 默认效果 */
a {
display: block;
width: 200px;
height: 80px;
background-color: #3064bb;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 80px;
font-size: 18px;
}
/* 鼠标悬停的效果 */
a:hover {
background-color: #608dd9;
}
</style>
</head>
<body>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Vue</a>
<a href="#">React</a>
</body>
</html>综合案例二-banner效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.banner {
height: 500px;
background-color: #f3f3f4;
background-image: url(../photo/bk.png);
background-repeat: no-repeat;
background-position: left bottom;
/* 文字控制属性，继承给子级 */
text-align: right;
color:#333;
}
.banner h2 {
font-size: 36px;
font-weight: 400px;
line-height: 100px;
}
.banner p {
font-size: 20px;
}
.banner a {
width: 125px;
height: 40px;
background-color: #f06b1f;
display: inline-block;
/* 转块级无法右对齐，因为块元素独占一行 */
/* display: block; */
text-align: center;
line-height: 40px;
color:#fff;
text-decoration: none;
font-size: 20px;
}
</style>
</head>
<body>
<div class="banner">
<h2>让创造产生价值</h2>
<p>我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户</p>
<a href="#">我要报名</a>
</div>
</body>
</html>智能推荐
从零开始完成一个跟踪识别系统(一)机械制图_怎么从0开始做一个物体识别-程序员宅基地
文章浏览阅读662次，点赞2次，收藏5次。由于时间和地域的关系，在家实属无聊想着做个“小东西”为了学习与锻炼，至于从0,0到什么程度呢，肯定不是从如何制造材料、如何制造舵机、亦或如何组合门电路开始，任何创作都是思想的模型，首先在头脑里要有这个东西的样子，所以就从机械制图开始吧，由于本人之前完全没有接触过机械制图，所以路过的大佬勿喷。如有建议，请评论，感激不尽。简介项目名称:物体识别跟踪系统项目简介：通过上位机识别物体并锁定跟踪，发送物体坐标给下位机，云台根据位置坐标转动。平台：树莓派3b、stm32f407vet6、舵机、ks2a17、_怎么从0开始做一个物体识别
入门了解使用huggingface实现ALBERT模型相关参数_huggingface albert-程序员宅基地
文章浏览阅读894次，点赞22次，收藏15次。在这篇博客中，我们将深入探讨使用库来实现和应用ALBERT模型时的关键参数和配置。库是由Hugging Face提供的，支持包括ALBERT在内的多种预训练语言模型，使得自然语言处理（NLP）任务的实现变得更加便捷和高效。我们将重点讨论以及的使用，这些组件是使用ALBERT模型时的核心。_huggingface albert
python发微信朋友圈_python实现微信每日一句自动发送给喜欢的人-程序员宅基地
文章浏览阅读1.1k次。本文实例为大家分享了python实现微信每日一句自动发送的具体代码，供大家参考，具体内容如下参考了一篇博客：教你使用python实现微信每天给女朋友说晚安代码：# -*- coding: utf-8 -*-'''这是一个用来测试微信自动发送消息的demo恩，主要就是用到了一个微信库--wxpy安装很简单 pip install wxpy下面就开始吧主要就两个函数1、getNews();用以获取信息..._用python每天发朋友圈
PCONV：移动设备上的DNN权重剪枝中的稀疏性-程序员宅基地
文章浏览阅读844次。基于深度神经网络（DNN）的模型压缩技术已被广泛认为是在各种平台上实现加速的有效方法，而DNN权重剪枝是一种简单有效的模型压缩方法。目前有两种主流的剪枝方法代表了剪枝的两个极端：非结构化、细粒度的剪枝可以实现高稀疏性和准确性，但对硬件不友好；结构化、粗粒度的剪枝利用了硬件高效的结构，但当压缩率高时，精度会下降。在本文中，我们介绍了PCONV，它包括一个新的稀疏性维度，即粗粒度结构中的细粒度修剪模式。_pconv
Android电话本数据查询总结-程序员宅基地
文章浏览阅读1.7k次。该文总结下工作当中维护的联系人模块中的数据查询流程。该流程在很多系统APP上都类似，了解这个过程还是很有必要的。在Android应用框架中一般都会划分为三层：数据层、数据访问层和业务层。数据层基本都是用sqlite来存储数据，数据访问层是借用四大组件中的内容提供器来实现，业务层就是各个应用，比如电话本。三层结构如下图所示：这里将详细总结下电话本对数据库的查询流程。1、创建数据库_电话本数据
CodeBlocks下载与安装教程_code blocks-程序员宅基地
文章浏览阅读10w+次，点赞271次，收藏633次。一、下载教程1.在浏览器上搜索CodeBlocks官网或者直接输入网址http://www.codeblocks.org/ 进入CodeBlocks官网。2.进入下载页面Downloads,一般都会选择第一个Download the binary release(二进制版本）3.进入之后，就会出来很多版本，我们要选择一个合适的版本，一般都会下载自带编译器的版本，这里到后面安装的..._code blocks
随便推点
IMX6ULL系统移植篇-系统烧写原理说明_正点原子 imx6ull nand 烧录-程序员宅基地
文章浏览阅读535次。镜像烧写说明_正点原子 imx6ull nand 烧录
Gradle配置阿里云Maven镜像仓库地址_gradle 配置阿里镜像-程序员宅基地
文章浏览阅读1.8k次。搭建maven本地仓库参考博客_gradle 配置阿里镜像
SSRF服务器端请求伪造-程序员宅基地
文章浏览阅读1.7k次，点赞2次，收藏3次。SSRF服务器端请求伪造SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造恶意数据，形成由服务端发起请求的一个安全漏洞。一般情况下，SSRF攻击的目标是从外网无法访问的内部系统，正是因为它是由服务端发起的，所以它能够请求到与它相连而与外网隔离的内部系统 SSRF 形成的原因大都是由于服务端提供了从其他服务器应用获取数据的功能且没有对目标地址做过滤与限制，比如从指定URL地址获取网页文本内容，加载指定地址的图片，下载等等SSRF常见场景_ssrf服务器端请求伪造
java/jsp/ssm电影院在线售票系统【2024年毕设】-程序员宅基地
文章浏览阅读72次。springboot基于微信小程序的汽车租赁系统的设计与实现。开发软件：eclipse/myeclipse/idea。springboot基于微信小程序的hpv疫苗预约系统。springboot基于协同过滤算法的音乐推荐系统。springboot毕设课题的选择和申报管理系统。springboot基于微信小程序的校园跑腿平台。springboot基于Java的图书购物商城。ssm基于vue的高校宿舍报修系统的设计与实现。ssm微信小程序的外卖点餐系统的设计与实现。jsp信阳学院学生体能达标系统的设计与实现。
【问题】Could not autowire. No beans of … type found-程序员宅基地
文章浏览阅读96次。怎么处理？除了把他隐藏 还有啥方法？转载于:https://www.cnblogs.com/CESC4/p/7358995.html_can not autowire no beans of decoder
Python3 迭代器与生成器_python3迭代器-程序员宅基地
文章浏览阅读153次。迭代是Python最强大的功能之一，是访问集合元素的一种方式。_python3迭代器