首页
技术博客
PHP教程
数据库技术
前端开发
HTML5
Nginx
php论坛
新用户注册
|
会员登录
PHP教程
技术博客
编程问答
PNG素材
编程语言
前端技术
Android
PHP教程
HTML5教程
数据库
Linux技术
Nginx技术
PHP安全
WebSerer
职场攻略
JavaScript
开放平台
业界资讯
大话程序猿
登录
极速注册
取消
热门标签 | HotTags
数组
future
jsp
cookie
range
callback
emoji
c语言
ip
split
bit
less
uri
install
node.js
typescript
uml
heatmap
web
cSharp
instance
metadata
search
httprequest
buffer
regex
schema
controller
hash
format
version
io
join
window
merge
filter
bash
dockerfile
solr
python2
shell
tree
loops
int
bytecode
export
hook
stream
java
subset
copy
php5
request
scala
settings
foreach
byte
web3
hashcode
hashset
main
erlang
bitmap
frameworks
utf-8
runtime
hashtable
integer
process
spring
email
string
triggers
eval
grid
const
include
require
get
当前位置:
开发笔记
>
编程语言
> 正文
夜灵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中支持
html
日志
css
firefox
chrome
safari
webkit
io
input
写下你的评论吧 !
吐个槽吧,看都看了
会员登录
|
用户注册
推荐阅读
format
开发笔记:前端之前端初识
开发笔记:前端之前端初识 ...
[详细]
蜡笔小新 2024-11-16 16:05:59
hash
理解浏览器历史记录(2)hashchange、pushState
阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ...
[详细]
蜡笔小新 2024-11-20 20:05:37
web
深入理解:AJAX学习指南
本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用,旨在为初学者提供全面的学习资料。 ...
[详细]
蜡笔小新 2024-11-20 17:58:54
ip
CSS3 背景图片裁剪与定位技巧
本文详细介绍了如何使用 CSS3 的 background-clip 和 background-origin 属性来裁剪和定位背景图片,以及如何通过 background-size 控制背景图片的尺寸。 ...
[详细]
蜡笔小新 2024-11-16 17:57:57
hash
技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告
技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告 ...
[详细]
蜡笔小新 2024-11-07 14:33:19
web
优化 DOM 以提升 JavaScript 性能
本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ...
[详细]
蜡笔小新 2024-11-21 18:16:19
web
网站访问全流程解析
本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ...
[详细]
蜡笔小新 2024-11-12 18:13:16
web
DVWA学习笔记系列:深入理解CSRF攻击机制
DVWA学习笔记系列:深入理解CSRF攻击机制 ...
[详细]
蜡笔小新 2024-11-11 13:19:51
web
深入解析Ajax的工作机制及其在现代Web开发中的应用
本文深入探讨了Ajax的工作机制及其在现代Web开发中的应用。Ajax作为一种异步通信技术,改变了传统的客户端与服务器直接交互的模式。通过引入Ajax,客户端与服务器之间的通信变得更加高效和灵活。文章详细分析了Ajax的核心原理,包括XMLHttpRequest对象的使用、数据传输格式(如JSON和XML)以及事件处理机制。此外,还介绍了Ajax在提升用户体验、实现动态页面更新等方面的具体应用,并讨论了其在当前Web开发中的重要性和未来发展趋势。 ...
[详细]
蜡笔小新 2024-11-07 14:11:10
web
如何根据浏览器类型动态加载npm包以优化前端性能?
本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ...
[详细]
蜡笔小新 2024-11-06 13:30:57
web
七款高效编辑器与笔记工具推荐:KindEditor自动换行功能解析
本文推荐了七款高效的编辑器与笔记工具,并详细解析了KindEditor的自动换行功能。其中,轻笔记QingBiJi是一款完全免费的记事本软件,用户可以通过其简洁的界面和强大的功能轻松记录和管理日常事务。此外,该软件还支持多平台同步,确保用户在不同设备间无缝切换。 ...
[详细]
蜡笔小新 2024-11-06 11:14:53
uri
阿里云 Aliplayer高级功能介绍(八):安全播放
如何保障视频内容的安全,不被盗链、非法下载和传播,阿里云视频点播已经有一套完善的机 ...
[详细]
蜡笔小新 2024-11-15 18:04:15
web
Cookie学习小结
Cookie学习小结 ...
[详细]
蜡笔小新 2024-11-14 16:26:25
web
HTML 页面实现用户无法选中文字,提供跨浏览器兼容的禁用文本选择功能
为了实现跨浏览器兼容的禁用文本选择功能,可以通过在全局CSS样式中定义一个特定的类来禁止用户选中文本。具体做法是在全局样式表中添加一个名为 `.no-select` 的类,并在需要禁用文本选择的元素上应用该类。这样可以确保在不同浏览器中都能达到一致的效果。此外,还可以结合JavaScript进一步增强用户体验,例如在某些交互场景下动态启用或禁用文本选择功能。 ...
[详细]
蜡笔小新 2024-11-05 10:04:35
format
优化后的标题:hCalendar微格式:深入解析事件与时间、地点相关的活动标记方法
本文深入探讨了 hCalendar 微格式在事件与时间、地点相关活动标记中的应用。作为微格式系列文章的第四篇,前文已分别介绍了 rel 属性用于定义链接关系、XFN 微格式增强链接的人际关系描述以及 hCard 微格式对个人和组织信息的描述。本次将重点解析 hCalendar 如何通过结构化数据标记,提高事件信息的可读性和互操作性。 ...
[详细]
蜡笔小新 2024-11-04 17:57:52
竹叶清2012
这个家伙很懒,什么也没留下!
Tags | 热门标签
数组
future
jsp
cookie
range
callback
emoji
c语言
ip
split
bit
less
uri
install
node.js
typescript
uml
heatmap
web
cSharp
instance
metadata
search
httprequest
buffer
regex
schema
controller
hash
format
RankList | 热门文章
1
Redis事务和pipleline是什么
2
Git报错:refusing to merge unrelated histories
3
php中在输入的数中找出最大值没有解决.希望得到大家的帮助解决方法
4
是否有一个Unix函数的Java库?
5
请教下 proxifier 的问题
6
详解生产者消费者问题 wait notify 附生产者唤醒生产者程序运行不下去的问题
7
java des加密解密包_DES加密解密 Java中运用
8
Spark尚硅谷5 1数据结构:RDD 转换算子
9
http://www.52im.net/thread25811.html
10
Session深度探索
11
免费i.MX8M mini开发板活动又来了!
12
编程之路:计算机基础
13
WIN98字体无法安装解决办法
14
Python全能工程师 2021版
15
小白的mysql学习笔记(十二)——触发器的概念与创建
PHP1.CN | 中国最专业的PHP中文社区 |
DevBox开发工具箱
|
json解析格式化
|
PHP资讯
|
PHP教程
|
数据库技术
|
服务器技术
|
前端开发技术
|
PHP框架
|
开发工具
|
在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |
京公网安备 11010802041100号
|
京ICP备19059560号-4
| PHP1.CN 第一PHP社区 版权所有