61,110
社区成员
发帖
与我相关
我的任务
分享
<div class="main">
<div class="title">
xxx
</div>
<div class="A">我想要改变这里的样式(即首个class="A"的div)</div>
<div class="A"></div>
</div>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
.main .A {color:#F00;}
.main .A ~ .A {color:#000;}
</style>
</head>
<body>
<div class="main">
<div class="title">
xxx
</div>
<div class="A">我想要改变这里的样式(即首个class="A"的div)</div>
<div class="A">222222222</div>
<div class="A">222222222</div>
<div class="A">222222222</div>
<div class="A">222222222</div>
<div class="A">222222222</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jslet - Template</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<style>
.test .A:first-child{
background-color:yellow;
}
</style>
</head>
<body>
<div class="main">
<div class="title">
xxx
</div>
<div class="test">
<div class="A">我想要改变这里的样式(即首个class="A"的div)</div>
<div class="A">sad</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
.main .A {color:#F00;}
.main .A ~ .A {color:#000;}
div.A:nth-of-type(1){background: green;}
</style>
</head>
<body>
<div class="main">
<div class="title">
xxx
</div>
<div class="A">我想要改变这里的样式(即首个class="A"的div)</div>
<div class="A">222222222</div>
<div class="A">222222222</div>
<div class="A">222222222</div>
<div class="A">222222222</div>
<div class="A">222222222</div>
</div>
<div class="main">
<div class="A">否定10楼</div>
<div class="A">222222222</div>
<div class="A">222222222</div>
<div class="A">222222222</div>
<div class="A">222222222</div>
<div class="A">222222222</div>
</div>
<div>
<div class="A">否定:nth-of-type(1)</div>
</div>
</body>
</html>
<div class="main">
<div class="title">
xxx
</div>
<div class="A div1">我想要改变这里的样式(即首个class="A"的div)</div>
<div class="A"></div>
</div>
然后这样子写
.A.div1{color:red;}
function getByClass(cls){
if(!document.getElementsByClassName){
return document.getElementsByClassName(cls);
} else {
var all = document.getElementsByTagName('*'),
reg = new RegExp('(^|\\s)' + cls + '(\\s|$)'),
arr = [];
for (var i = 0; i < all.length; i++) {
if(reg.test(all[i].className)){
arr.push(all[i]);
}
};
return arr;
}
}
getByClass('A')[0].style.color = 'red';
.main:first-child .A{
background-color:yellow;
}
这样子才对