首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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


推荐阅读
author-avatar
竹叶清2012
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有