使用css3选择器,兼容多浏览器-阿里云开发者社区

开发者社区> 技术小胖子> 正文

使用css3选择器,兼容多浏览器

简介:
+关注继续查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
<title>例子:使用CSS3选择器,兼容ie6/7 ,firefox,opera,safari</title> 
<style type="text/css"> 
/*div[id^="focus"]表示id属性值以focus-开头的那些div*/ 
div[id^="focus-"]{ background-color:#696;} 
</style> 
<!--[if IE 6]>    
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("div[id^='focus-']").css('background-color','#696'); 
}); 
</script> 
<![endif]--> 
</head> 

<body> 
  <div id="focus-div1">这个会高亮背景</div> 
  <div id="div2">普通div</div> 
  <div id="div3">普通div</div> 
  <div id="div4">普通div</div> 
  <div id="focus-div5">这个会高亮背景</div> 
</body> 
</html>
 
 
这里使用了ie条件注释单独对ie6做了处理。
 
 
注:大家可以实验下其他用法
div[name='hello']属性值等于某个值的情况;
div[id$='3']以某个字串结束的元素;
div[id*='div']包含字串的;
div[name]表示含有name属性的那些div;




 本文转自 xcf007 51CTO博客,原文链接:http://blog.51cto.com/xcf007/143528,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
css知多少(6)——选择器的优先级
原文:css知多少(6)——选择器的优先级 1. 引言   上一节《css知多少(5)——选择器》最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明。      上图中,css中的两个选择器都是针对的,而且两个设置的颜色不一样,这里的到底听从谁的命令?   上面还是比较简单的,下面在来一个复杂的:      上图中的该显示成什么颜色呢? 2. 特指度   要解决以上问题,我们需要引入一个概念——特指度(specificity)。
803 0
WPF 使用 Edge 浏览器
原文:WPF 使用 Edge 浏览器 本文告诉大家如何使用 Windows Community Toolkit 的新控件,在 WPF 使用 Edge 浏览器 首先需要通过 VisualStudio 创建 WPF 项目。
1037 0
css知多少(4)——解读浏览器默认样式
原文:css知多少(4)——解读浏览器默认样式   上一节《css知多少(3)——样式来源与层叠规则》介绍了样式的五种来源,咱们再通过一张图回顾一下。      对于上面的三层,咱们大概都比较熟悉了。
793 0
【CSS】使用CSS控制文字过多自动省略号
使用CSS可以设置一下样式: u,small{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -...
1006 0
css知多少(5)——选择器
原文:css知多少(5)——选择器 1. 引言   从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器。   CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得不通过选择器。
878 0
CSS样式中选择器失效问题
对于怎么排查样式失效:    1. 学会使用小程序开发者工具提供的小程序调试工具和Chrome调试工具来排查原因(这会很大程度上减少排查问题的    时间);    2. 首先需要确认标签有可能使用什么来作为样式选择器,最常用的是标签、class、id,确认是否设置了相应的属性;    3.
726 0
常见的浏览器兼容性问题总结
1. 不同浏览器的标签默认外补丁margin和内补丁padding不同 发生概率:100% 解决方案:使用CSS通配符*,设置内外补丁为0 *{ margin: 0; padding: 0;} 2.
1551 0
21119
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载