夜灵HTML日志第10天：深入探讨浏览器兼容性与高级选择器应用

作者：竹叶清2012 | 来源：互联网 | 2024-11-05 17:52

在第10天的夜灵HTML日志中，我们深入探讨了浏览器兼容性和高级选择器的应用。CSS3引入了许多新属性，但在旧版浏览器中的支持情况并不理想。然而，目前主流浏览器的最新版本已全面支持这些新特性。对于那些不支持CSS3新属性的浏览器，我们提供了多种解决方案，以确保网站在不同环境下的兼容性和用户体验。此外，我们还详细讨论了如何利用高级选择器提升页面布局的灵活性和可维护性。

5、浏览器兼容性
渐变：CSS3 提出的新属性
C3新属性，放在老版浏览器中支持性不好!
目前为止，主流浏览器的主流版本，对C3支持性特别好!
但对于不支持C3新属性的版本浏览器，需要通过增加 "浏览器前缀"实现兼容性

常用浏览器前缀：
1、Firefox : -moz-
2、Chrome & Safari : -webkit-
3、Opera : -o-
4、IE : -ms-
浏览器前缀加在哪？？？
1、如果浏览器不支持属性的话，则将前缀加在属性名称前
animation : C3的新属性
兼容：
-moz-animation:值;
-webkit-animation:值;
-o-animation:值;
-ms-animation:值;
animation:值;
2、如果浏览器不支持属性值的话，则将前缀添加在属性值前
background-image:-moz-linear-gradient();
background-image:-webkit-linear-gradient();
background-image:-o-linear-gradient();
background-image:-ms-linear-gradient();
background-image:linear-gradient(); //通用

eg:
选择器{
border:1px solid red;
width:20px;
-ms-border-radius:5px;
border-radius:5px;
}
**:
元素选择器 1，
通用选择器， *
类选择器 class 10
ID选择器 id 100
群组选择器
分类选择器
伪类选择器 10

内联样式 1000

1、复杂选择器
1、兄弟选择器
兄弟选择器：
具备相同父元素的元素，称之为兄弟元素
兄弟选择器，只能向后找，不能向前找
1、相邻兄弟选择器
相邻：紧紧挨着
语法：选择器1+选择器2

#d2+.c1
ex:
1、div+p
2、#container+.menu
2、通用兄弟选择器
通用：后面所有
语法：选择器1~选择器2
ex:
1、div~p
2、属性选择器
允许通过元素所附带的属性及其值来匹配页面的元素

语法：
基本语法：[attr]
attr:表示任意属性
1、[attr]
作用：匹配页面中附带 attr 属性的元素
ex:
1、[id]
[class]
[name]
[color]
2、elem[attr]
elem : element，表示页面任意元素
作用：匹配页面中附带 attr 属性的 elem 元素
ex:
1、div[id]
3、[attr1][attr2]
作用：匹配同时附带 attr1 属性以及 attr2 属性的元素
ex:
[id][class]
4、[attr=value]
value : 某一具体属性值
ex:想获取页面中所有的文本框
input[type=text]
input[type="text"]
input[type='text']
[class=p1]
[id=d1]

5、[class~=value]
在多类选择器引用中使用
class属性值是一个由空格隔开的值列表，
并且value是该值列表中的一个独立的选择器

[class="important"] 和 [class~=important]
ex：
将页面中所有包含 important 类选择器的元素匹配出来
6、[attr ^= value]
^= : 以 ... 作为开始的

... ...
匹配页面中所有class以 col 作为开始的元素
[class^=col]
7、[attr *= value]
*= : 包含该 ...

匹配页面中所有class值中包含md的元素
[class*=md]
8、[attr $= value]
$= : 以 ... 作为结尾的
eg:

[class$=n]

3、伪类选择器
1、目标伪类
作用：匹配页面中被激活的 html 锚点元素
语法： :target
2、结构伪类
1、:first-child
作用：匹配属于其父元素中的首个子元素

ex:
1、td:first-child
2、#tbl td:first-child
2、:last-child
作用：匹配属于其父元素中的最后一个子元素
3、:nth-child(n)
作用：匹配属于其父元素中的第n个子元素
4、:empty
作用:匹配没有子元素的元素(不能包含文本，空格，回车)

--> div:empty{}
5、:only-child
作用：匹配属于其父元素中的唯一子元素
3、否定伪类
作用：将满足指定选择器的元素排除在外
语法：:not(selector)
div:not(".container") : 获取页面中所有除class 为container 的 div元素

4、伪元素选择器
伪类：匹配到的是 "元素"
伪元素：匹配到的是元素中的某部分 "内容"
1、:first-letter 或 ::first-letter
作用：匹配某元素中的首字符
2、:first-line 或 ::first-line
作用：匹配某元素中的首行
3、::selection
作用：匹配被用户选取的部分
注意：只能改文本颜色和背景颜色

: VS ::
1、在CSS2中，: 即表示伪类选择器，也表示伪元素选择器
2、在CSS3中，: 只代表伪类选择器，::只代表伪元素选择器
推荐使用 : 取代 ::
:first-child : 在 CSS3 以及 CSS2中都支持
::first-child: 只在CSS3中支持

推荐阅读

int
利用CSS3和React实现数字滚动动画组件

在前端开发中，数字滚动动画是一个常见的需求。本文将详细介绍如何使用CSS3和React构建一个数字滚动动画组件，包括组件的代码实现和样式设计。如果您对HTML版本感兴趣，欢迎留言获取。 ... [详细]

蜡笔小新 2024-12-13 13:48:05
int
CSS选择器与XPath在Selenium中的元素定位对比

本文详细比较了CSS选择器和XPath在Selenium中通过页面结构定位元素的优劣，并提供了具体的代码示例，帮助读者理解两者在不同场景下的适用性。 ... [详细]

蜡笔小新 2024-12-21 08:56:18
ip
深入理解动画队列

动画队列的设计目的是为了确保一系列任务能够按照预定顺序执行，每个任务只有在其前一个任务完成后才开始。这些任务既可以是同步的，也可以是异步的。本文将探讨jQuery动画系统中的队列机制，并介绍如何使用队列来优化动画效果。 ... [详细]

蜡笔小新 2024-12-07 10:26:02
jsp
利用Selenium与ChromeDriver实现豆瓣网页全屏截图

本文介绍了一种使用Selenium和ChromeDriver结合Python代码，轻松实现对豆瓣网站进行完整页面截图的方法。该方法不仅简单易行，而且解决了新版Selenium不再支持PhantomJS的问题。 ... [详细]

蜡笔小新 2024-12-22 15:17:55
jsp
深入解析动态代理模式：23种设计模式之三

在设计模式中，动态代理模式是应用最为广泛的一种代理模式。它允许我们在运行时动态创建代理对象，并在调用方法时进行增强处理。本文将详细介绍动态代理的实现机制及其应用场景。 ... [详细]

蜡笔小新 2024-12-21 15:46:52
jsp
无需重启MySQL服务即可生效my.cnf配置文件修改

通常情况下，修改my.cnf配置文件后需要重启MySQL服务才能使新参数生效。然而，通过特定命令可以在不重启服务的情况下实现配置的即时更新。本文将详细介绍如何在线调整MySQL配置，并验证其有效性。 ... [详细]

蜡笔小新 2024-12-21 14:26:22
main
并发编程 12—— 任务取消与关闭之 shutdownNow 的局限性

Java并发编程实践目录并发编程01——ThreadLocal并发编程02——ConcurrentHashMap并发编程03——阻塞队列和生产者-消费者模式并发编程04——闭锁Co ... [详细]

蜡笔小新 2024-12-21 12:39:07
jsp
Python自动化测试入门：Selenium环境搭建

本文详细介绍如何在Python环境中安装和配置Selenium，包括开发工具PyCharm的安装、Python环境的设置以及Selenium包的安装方法。此外，还提供了编写和运行第一个自动化测试脚本的步骤。 ... [详细]

蜡笔小新 2024-12-21 10:48:56
jsp
贪心与优先队列：最小化加法代价问题

本题要求在一组数中反复取出两个数相加，并将结果放回数组中，最终求出最小的总加法代价。这是一个经典的哈夫曼编码问题，利用贪心算法可以有效地解决。 ... [详细]

蜡笔小新 2024-12-20 23:20:38
config
Spring Boot 中静态资源映射详解

本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理，包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文，您将了解如何高效地管理和引用静态资源。 ... [详细]

蜡笔小新 2024-12-20 20:02:31
jsp
C++对象模型研究：运行时行为分析

本文探讨了C++编程中理解代码执行期间复杂度的挑战，特别是编译器在程序运行时生成额外指令以确保对象构造、内存管理、类型转换及临时对象创建的安全性。 ... [详细]

蜡笔小新 2024-12-20 18:47:33
main
Logback使用小结

1一定要使用slf4j的jar包，不要使用apachecommons的jar。否则滚动生成文件不生效，不滚动的时候却生效~~importorg.slf ... [详细]

蜡笔小新 2024-12-19 20:40:37
ip
Selenium与Python结合实现网页滚动条的自动化控制

本文介绍了如何利用Selenium和Python通过执行JavaScript代码来控制网页中的滚动条，包括垂直和水平滚动条的控制，以及特定元素的聚焦技术。 ... [详细]

蜡笔小新 2024-12-14 14:25:02
jsp
解决Firefox中HTML5 Canvas drawImage NS_ERROR_NOT_AVAILABLE错误

在使用Firefox浏览器打开本地HTML文件时，尝试调用Canvas的drawImage方法可能会遇到NS_ERROR_NOT_AVAILABLE错误。本文探讨了这一问题的原因及解决方案。 ... [详细]

蜡笔小新 2024-12-13 22:02:02
int
Scroll Event Fails to Retrieve Mouse Coordinates

Exploring the issue where the onScroll event does not correctly capture clientX and clientY values across different browsers. ... [详细]

蜡笔小新 2024-12-10 10:44:30

竹叶清2012

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章