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

推荐阅读

string
技术分享：从动态网站提取站点密钥的解决方案

本文探讨了如何从动态网站中提取站点密钥，特别是针对验证码（reCAPTCHA）的处理方法。通过结合Selenium和requests库，提供了详细的代码示例和优化建议。 ... [详细]

蜡笔小新 2024-12-28 04:11:47
java
CSS选择器与XPath在Selenium中的元素定位对比

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

蜡笔小新 2024-12-21 08:56:18
filter
Python爬虫实战：豆瓣电影Top250数据抓取

本文详细介绍了如何使用Python编写爬虫程序，从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制，再到多页数据抓取的全过程，并提供了完整的代码示例。 ... [详细]

蜡笔小新 2024-12-27 16:55:07
java
自己用过的一些比较有用的css3新属性【HTML】

web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久，虽然大多数的css3属性在很多流行的浏览器中不支持，但我个人觉得还是要尽量开 ... [详细]

蜡笔小新 2024-12-24 19:26:54
char
HTML5与JavaScript实现本地文件读取、写入及路径获取

本文探讨了如何利用HTML5和JavaScript在浏览器中进行本地文件的读取和写入操作，并介绍了获取本地文件路径的方法。HTML5提供了一系列API，使得这些操作变得更加简便和安全。 ... [详细]

蜡笔小新 2024-12-20 18:36:06
char
一个登陆界面

预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]

蜡笔小新 2024-12-20 09:57:07
java
分页插件3指定到某一页

前言--页数多了以后需要指定到某一页（只做了功能，样式没有细调）html ... [详细]

蜡笔小新 2024-12-27 15:19:01
java
使用WebBrowser控件实现点击输入框显示图片验证码的方法

本文探讨了如何通过WebBrowser控件在用户点击输入框时自动显示图片验证码。该过程可能涉及JavaScript事件的触发与响应。 ... [详细]

蜡笔小新 2024-12-17 18:28:07
java
Selenium Java Session Management

本文介绍如何确保浏览器驱动与浏览器版本兼容，并详细说明在成功调用浏览器后如何创建和管理Session。同时，提供了一些常用的Selenium定位元素的方法。 ... [详细]

蜡笔小新 2024-12-15 09:51:01
char
导航栏样式练习：项目实例解析

本文详细介绍了如何创建一个具有动态效果的导航栏，包括HTML、CSS和JavaScript代码的实现，并附有详细的说明和效果图。 ... [详细]

蜡笔小新 2024-12-27 19:42:28
main
新浪笔试题

1:有如下一段程序：packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]

蜡笔小新 2024-12-27 19:32:17
main
深入理解Tornado模板系统

本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块，支持嵌入Python代码片段，帮助开发者快速构建动态网页。 ... [详细]

蜡笔小新 2024-12-27 19:22:16
java
深入理解Cookie与Session会话管理

本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息，以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制，解释其原理及应用场景。 ... [详细]

蜡笔小新 2024-12-27 18:20:43
java
JavaScript中属性节点的类型及应用

本文深入探讨了JavaScript中属性节点的不同类型及其在实际开发中的应用，帮助开发者更好地理解和处理HTML元素的属性。通过具体的案例和代码示例，我们将详细解析如何操作这些属性节点。 ... [详细]

蜡笔小新 2024-12-27 10:14:47
java
JavaScript中style、currentStyle、getComputedStyle及getBoundingClientRect的使用与区别

本文详细探讨了JavaScript中四种获取CSS样式的不同方法：style、currentStyle、getComputedStyle和getBoundingClientRect。每种方法的适用场景及其兼容性问题，并提供了解决方案。 ... [详细]

蜡笔小新 2024-12-18 19:27:53

竹叶清2012

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

Tags | 热门标签

RankList | 热门文章