CSS高级特性

news2024/12/25 12:23:35

1.CSS复合选择器

CSS复合选择器:复合选择器是由两个或多个基础选择器通过不同的方式组合而成的
1.1 标签指定式选择器:又称交集选择器,由两个选择器构成,其中第一个选择器为标记选择器,第二个为class选择器或id选择器。两个选择器之间不能有空格。

<style type="text/css">
h3.special{
    color:red;
}
</style>

1.2 后代选择器:后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。

<style type="text/css">
        .div1 p{
            color:red;
        }
    </style>

1.3并集选择器:并集选择器是各个选择其通过逗号连接而成的,任何形式的选择器(包括标记选择器、class类选择器、id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,都可以利用并集选择器为他们定义相同的CSS样式。

p,h1,#mytitle,.one/*定义了一个并集选择器,带有p,h1,id="mytitle",class="one"的标签都内容会显示红色*/{
    color:red;
}

2.CSS层叠性和继承性

2.1 层叠性 所谓层叠性是指多种CSS样式的叠加。 原则:

1、样式冲突,遵循的原则是就近原则,即CSS的书写位置。

2、样式不冲突,不会层叠

2.2 继承性 所谓继承性是指书写css样式表时,子标记会继承父标记的某些样式。并不是所有的css属性都可以继承。

不具有继承性的:边框属性,外边距属性,内边距属性,背景属性,定位属性,布局属性,元素宽高属性。 1.首先说一个数权重的概念,以做判断

当一个选择器我们看到时就应该有一个数权重(权重在实战上没有后一位满多少进一位之说)。

(id数,class数,标签数)

当遇到冲突时落列出这样一组数

然后进行比较先比较id,id比其余大就不用往下比较了
在这里插入图片描述

3.CSS优先级

拥有!important,最有最高的优先级
标签。伪类或伪对象,优先级分数为1
类、属性选择,优先级分数为10 4.id选择,优先级分数为100 5.style属性,优先级分数为1000 6.其他选择符,如统配符,优先级分数为0
作业代码

作业展示在这里插入图片描述

在这里插入图片描述

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

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

相关文章

【Spring core学习一】简单认识Spring是什么?

目录 1、为什么要学习Spring&#xff1f; 2、Spring是什么&#xff1f; 1、IoC是什么&#xff1f; 2、进一步通过代码演示理解IoC 3、怎么理解容器&#xff1f; 4、知道DI与IoC的区别&#xff1f; 1、为什么要学习Spring&#xff1f; 我们常说的Spring 指的是 Spring Fra…

地平线旭日x3派40pin引脚控制,点亮小灯,控制舵机

地平线旭日x3派40pin引脚控制&#xff0c;点亮小灯&#xff0c;控制舵机 引脚对照表点亮RGB小灯安装旭日X3派WiringPi使用WiringPi点亮RGB小灯使用软件PWM功能 官方用户手册中只有python控制教程&#xff0c;没有c语言控制教程。且官方的教程中并没有软件pwm功能。本教程在开发…

Linux——动静态库的制作和使用(实操+代码+原理介绍)

动静态库的制作和使用 1️⃣.动静态库介绍&#x1f3c0;静态库⚽️动态库&#x1f3c8;区别&#x1f3d0;使用动态库的优点包括&#xff1a;&#x1f3c9; 使用静态库的优点包括&#xff1a; 2️⃣静态库的制作&#x1f34a;Q:库文件能不能有main()函数&#xff1f;&#x1f34…

imazing是什么软件?2023年imazing官网中文版下载

最近很小伙们&#xff0c;咨询兔八哥&#xff0c;imazing是什么软件&#xff1f;&#xff0c;今天兔八哥爱分享整理一下imazing到底是什么软件&#xff1f;好用吗&#xff1f; imazing是一款iOS设备管理软件,借助 iMazing 的独有 iOS 备份技术&#xff08;无线、隐私和自动&am…

地震正演基础知识

文章目录 地震正演1. 地震正演基础知识1.1 地震波1.2 波动方程1.3 有限差分方法1.4 边界条件1.5 记录数据 2. 公式2.1 泰勒级数回顾2.2 二维声波方程&#xff08;连续的偏微分方程&#xff09;2.2.1 二维声波方程&#xff08;连续的偏微分方程&#xff09;2.2.2 离散化二维声波…

【C++】vector模拟实现

&#x1f307;个人主页&#xff1a;平凡的小苏 &#x1f4da;学习格言&#xff1a;命运给你一个低的起点&#xff0c;是想看你精彩的翻盘&#xff0c;而不是让你自甘堕落&#xff0c;脚下的路虽然难走&#xff0c;但我还能走&#xff0c;比起向阳而生&#xff0c;我更想尝试逆风…

Netty 为什么有如此高的性能?

文章首发地址 Netty高性能的三个主题 I/O传输模型&#xff1a;用什么样的通道将数据发送给对方&#xff0c;是BIO、NIO还是AIO&#xff0c;I/O传输模型在很大程度上决定了框架的性能。数据协议&#xff1a;采用什么样的通信协议&#xff0c;是HTTP还是内部私有协议。协议的选…

1767_Perl中的全词匹配

全部学习汇总&#xff1a; GreyZhang/perl_basic: some perl basic learning notes. (github.com) 当我在上一家公司工作的时候遇到过一个问题&#xff0c;为了解决软件接口的冲突我们需要把一个软件工程中的所有变量全都修改加一个前缀。我觉得用Perl处理是一个很好的注意&…

数据库作业3

1.查询student表的所有记录 2.查询student表的第2条到4条记录 3.从student表查询所有学生的学号&#xff08;id&#xff09;、姓名&#xff08;name&#xff09;和院系&#xff08;department&#xff09;的信息 4.从student表中查询计算机系和英语系的学生的信息 5.从student表…

pytest 通过conftest.py获取测试所有执行case断言失败的结果

conftest.py import pytest from datetime import datetimedef pytest_exception_interact(node, call, report):if report.failed:with open("error.log", "a", encoding"utf-8") as f:test_case f"测试文件&#xff1a;{node.nodeid} |…

备战CAIP——PTA甲级刷题

目录 引入2023年 真题1001 AB Format (20 分) 小数字相加再格式化输出1002 AB for Polynomials (25 分) 多项式相加1003 Emergency 救援最短路径和最大救援部队 引入 2023睿抗 RoboCom机器人开发者大赛CAIP编程设计赛道编程技能赛 考察知识点 https://mp.weixin.qq.com/s/lXp5…

靶机渗透之SICKOS: 1.1(解法2)

SICKOS: 1.1 靶机渗透测试是否存在shellshock构造payload获取bash权限切换shell构造pythonpayload&#xff0c;放置到py定时任务中开始监听py文件 靶机渗透 sudo nikto -h 192.168.133.139 -useproxy http://192.168.133.139:3128 - Nikto v2.5.0 ---------------------------…

Python应用实例(一)外星人入侵(八)

外星人入侵&#xff08;八&#xff09; 1.添加Play按钮1.1 创建Button类1.2 在屏幕上绘制按钮1.3 开始游戏1.4 重置游戏1.5 将play按钮切换到非活动状态1.6 隐藏鼠标光标 我们添加一个Play按钮&#xff0c;用于根据需要启动游戏以及在游戏结束后重启游戏&#xff0c;还会修改这…

FreeRTOS实时操作系统(十五)Tickless低功耗模式

系列文章 FreeRTOS实时操作系统&#xff08;一&#xff09;RTOS的基本概念 FreeRTOS实时操作系统&#xff08;二&#xff09;任务创建与任务删除&#xff08;HAL库&#xff09; FreeRTOS实时操作系统&#xff08;三&#xff09;任务挂起与恢复 FreeRTOS实时操作系统&#x…

线程栈溢出异常,程序崩溃在汇编代码test dword ptr [eax],eax上的问题排查

目录 1、问题描述 2、使用Windbg静态分析dump文件 3、将Windbg附加到进程上进行动态调试 4、使用Visual Studio进行Debug调试 4.1、使用if条件断点和汇编代码单步调试 4.2、分析消息响应函数入口处为什么会产生崩溃 4.3、解决办法 5、线程栈溢出的相关细节点说明 6、引…

JS-24 async异步函数、 await关键字;异步函数的执行流程;进程和线程;浏览器的事件循环;宏任务和微任务;Promise面试题

目录 1_异步函数1.1_async1.2_异步函数的执行流程2_await关键字 2_浏览器进程、线程2.1_进程和线程2.2_操作系统的工作方式2.3_浏览器中的JavaScript线程2.4_浏览器的事件循环2.3_宏任务和微任务2.4_Promise面试题题一题二 1_异步函数 1.1_async async是asynchronous单词的缩…

大模型基础:理论与技术的演进概述

大模型基础&#xff1a;理论与技术的演进概述 人工智能发展历程 人工智能发展历程可以概括为以下几个主要阶段: 起源阶段(1956-1980年代)&#xff0c;这一时期被称为人工智能的“黄金时代”, 达特茅斯会议首次提出人工智能概念, 开发出传统人工智能系统, 如ELIZA、深蓝等。知…

【InsCode Stable Diffusion 美图活动一期】生成着玩

此为内容创作模板&#xff0c;请按照格式补充内容&#xff0c;在发布之前请将不必要的内容删除 一、 Stable Diffusion 模型在线使用地址&#xff1a; https://inscode.csdn.net/inscode/Stable-Diffusion 二、模型相关版本和参数配置&#xff1a; 三、图片生成提示词与反向…

C++ | 多态

目录 前言 一、多态的概念 二、多态的定义与使用 1、多态的构成条件 2、虚函数 3、虚函数的重写&#xff08;覆盖&#xff09; 4、虚函数重写的两个例外 &#xff08;1&#xff09;协变 &#xff08;2&#xff09;析构函数的重写 5、子类的指针或者引用调用 6、C11的…

unity对象池系统

当游戏场景中出现大量的可重复利用的物体时&#xff0c;通过Destory来销毁再创建会触发不必要的GC回收机制&#xff0c;浪费性能&#xff0c;我们可以利用unity自带的对象池系统&#xff0c;从而节约性能来得到同样的效果。 为了使用这个对象池系统&#xff0c;我写了一个瞬间产…