夜灵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中支持

推荐阅读

request
利用Requests库深入解析POST请求的发送方法与实践技巧

在前一篇文章中，我们介绍了如何使用Requests库发送GET请求。本文将深入探讨如何通过Requests库发送POST请求，包括参数格式、请求封装等关键技巧，并通过“历史上的今天”API实例进行详细说明。 ... [详细]

蜡笔小新 2024-10-27 15:02:24
request
网页图像抓取技术学习心得：从零开始掌握爬虫技巧

在今天的实践中，我深入学习了网页图像抓取技术，通过编写爬虫程序批量获取网站上的图片资源。具体来说，我选择了一个包含大量高质量图片的网站作为练习对象，并成功实现了将这些图片批量下载到本地存储。这一过程不仅提升了我对爬虫技术的理解，还增强了我的编程能力。 ... [详细]

蜡笔小新 2024-11-03 19:35:28
object
HTML5 Web存储技术详解：从基础到应用全面解析

HTML5 Web存储技术是许多开发者青睐本地应用程序的重要原因之一，因为它能够实现在客户端本地存储数据。HTML5通过引入Web Storage API，使得Web应用程序能够在浏览器中高效地存储数据，从而提升了应用的性能和用户体验。相较于传统的Cookie机制，Web Storage不仅提供了更大的存储容量，还简化了数据管理和访问的方式。本文将从基础概念、关键技术到实际应用，全面解析HTML5 Web存储技术，帮助读者深入了解其工作原理和应用场景。 ... [详细]

蜡笔小新 2024-10-26 20:33:04
object
SQLite数据库CRUD操作实例分析与应用

本文通过分析和实例演示了SQLite数据库中的CRUD（创建、读取、更新和删除）操作，详细介绍了如何在Java环境中使用Person实体类进行数据库操作。文章首先阐述了SQLite数据库的基本概念及其在移动应用开发中的重要性，然后通过具体的代码示例，逐步展示了如何实现对Person实体类的增删改查功能。此外，还讨论了常见错误及其解决方法，为开发者提供了实用的参考和指导。 ... [详细]

蜡笔小新 2024-11-05 16:56:48
object
HTML 页面实现用户无法选中文字，提供跨浏览器兼容的禁用文本选择功能

为了实现跨浏览器兼容的禁用文本选择功能，可以通过在全局CSS样式中定义一个特定的类来禁止用户选中文本。具体做法是在全局样式表中添加一个名为 `.no-select` 的类，并在需要禁用文本选择的元素上应用该类。这样可以确保在不同浏览器中都能达到一致的效果。此外，还可以结合JavaScript进一步增强用户体验，例如在某些交互场景下动态启用或禁用文本选择功能。 ... [详细]

蜡笔小新 2024-11-05 10:04:35
rsa
利用树莓派畅享落网电台音乐体验

最近重新拾起了闲置已久的树莓派，这台小巧的开发板已经沉寂了半年多。上个月闲暇时间较多，我决定将其重新启用。恰逢落网电台进行了改版，回忆起之前在树莓派论坛上看到有人用它来播放豆瓣音乐，便萌生了同样的想法。通过一番调试，终于实现了在树莓派上流畅播放落网电台音乐的功能，带来了全新的音乐享受体验。 ... [详细]

蜡笔小新 2024-11-05 09:20:37
io
开发笔记：深入解析Android自定义控件——Button的72种变形技巧

开发笔记：深入解析Android自定义控件——Button的72种变形技巧 ... [详细]

蜡笔小新 2024-11-03 17:42:23
request
可转债数据智能抓取与分析平台优化

本项目旨在优化可转债数据的智能抓取与分析平台。通过爬取集思录上的可转债信息（排除已发布赎回的债券），并结合安道全教授提出的三条安全线投资策略，新增了建仓线、加仓线和重仓线，以提供更精准的投资建议。 ... [详细]

蜡笔小新 2024-10-30 17:40:17
input
利用 Python 实现 Facebook 账号登录功能

利用 Python 实现 Facebook 账号登录功能 ... [详细]

蜡笔小新 2024-10-30 08:47:56
object
【Python爬虫实操】不创作小说，专精网站内容迁移，超高效！（含源代码）

本文详细介绍了如何利用Python爬虫技术实现高效网站内容迁移，涵盖前端、后端及Android相关知识点。通过具体实例和源代码，展示了如何精准抓取并迁移网站内容，适合对Python爬虫实战感兴趣的开发者参考。 ... [详细]

蜡笔小新 2024-10-28 20:00:28
default
使用 Vue 集成 iScroll 实现移动端表格横向滚动与固定列功能

使用 Vue 集成 iScroll 实现移动端表格横向滚动与固定列功能 ... [详细]

蜡笔小新 2024-10-26 12:04:20
request
爬虫技术初探：requests库基础教程第二部分

（1）搜狗搜索人物实战 importrequestsurlhttps:www.sogou.comweb?query李荣浩 #首先我们需要观察在搜狗输入李 ... [详细]

蜡笔小新 2024-10-23 10:44:42
io
前端开发必备知识点汇总与深入解析

Markdown语法说明：http:www.appinn.commarkdown1、前端碎片知识总结篇1.1关于浏览器IE的内核是Trident、Mozilla的内核 ... [详细]

蜡笔小新 2024-10-22 01:30:06
io
Firefox必备的24款web开发插件[转]

开发工具WebDeveloper1.1.8https:addons.mozilla.orgen-USfirefoxaddon60以工具栏的形式对网页的(X)HTML、脚本、多媒体、 ... [详细]

蜡笔小新 2024-10-21 22:03:56
object
利用Java开发百度图片爬虫，实现高效下载功能

为了满足大量图像素材的需求以支持机器学习项目，本文介绍了一种基于Java语言开发的百度图片爬虫工具，该工具能够高效地抓取并下载百度图片中的资源。文章首先展示了爬虫运行的效果图，并详细阐述了其工作原理和技术实现路径，重点解析了如何通过分析百度图片的网页结构来实现精准抓取。此外，还讨论了在实际应用中可能遇到的问题及解决方案。 ... [详细]

蜡笔小新 2024-10-24 18:25:50

竹叶清2012

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

Tags | 热门标签

RankList | 热门文章