css能不能做到改变首个class="A"的div的样式_html/css_WEB-ITnose
<div class="main"> <div class="title"> xxx </div> <div class="A">我想要改变这里的样式（即首个class="A"的div）</div> <div class="A"></div> </div>
不用jquery，能不能做到？
回复讨论(解决方案)
你再给他设置一个class，就像这样
<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;}
.main .A:first-child{
background-color:yellow;
}
搞定！！
楼上正解：
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
正解个毛线，请问你们有测过吗，你都说了:first-child 是取其父元素的首个子元素，你确定他那样子可以？你确定他找得到？
@风中的少年 ，你确定你写对了？@转角遇到我得爱
.main:first-child .A{background-color:yellow;}也不对，我还是坚持我最初的方法
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';
正解个毛线，请问你们有测过吗，你都说了:first-child 是取其父元素的首个子元素，你确定他那样子可以？你确定他找得到？
@风中的少年 ，你确定你写对了？@转角遇到我得爱
哥们你能不能去测测呀
所以你改变一下方式就好了，让其成为父类的首个子元素。变通。。。。。。。
<!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;}</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> :first-child
:nth-child(1)
:first-of-type
:nth-of-type(1)
都是行不通的,
10楼写得很麻烦, 和下面效果差不多
div.A:nth-of-type(1)
但都是行不通的
<!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>
:first-child
:nth-child(1)
:first-of-type
:nth-of-type(1)
都是行不通的,
10楼写得很麻烦, 和下面效果差不多
div.A:nth-of-type(1)
但都是行不通的
[/code]
你用的是什么浏览器？
http://test.ddcat.net/test/brotherSelector.html
你用的是什么浏览器？
http://test.ddcat.net/test/brotherSelector.html
对楼主要求的理解是整个页面只能让唯一第一个 class="A" 的 div 的样式生效, 任何其他地方也生效则不符要求.
我没有找到仅用 CSS 达到要求的办法
你的方式均会让 "否定10楼" 也变成红色, 测试浏览器: chrome 44.0, firefox 39.0.3, safari 5.1.7, ie8
样式优先级问题？
1、首先优先级
内联样式表 > 内部样式表 > 外部样式表 > 浏览器缺省样式表
2、 在优先级相同时 考虑css权重值
大概就是 行内 > id > class 比较多 可以百度下慢慢研究
3、再然后就是考虑远近了
浏览器从左向右 从上到下的执行一个网页 后面的会覆盖前面的
分给我把
妈呀 有必要考虑那么深么 用内联可好
都是神啊，给第一个一个id不就可以了！！！！
都是神啊，给第一个一个id不就可以了！！！！
他就不给弄个 id, 难道去咬么??
无语
如果整个页面仅有这个一个class=A需要处理，给其一个唯一ID或 特殊 class 即可
-----------------------------------------------------
如果非要折腾，使用css选择：
如果你的 首个 class=A 始终处于 .main 的 第二个元素（ 或已知固定位置），且浏览器支持 nth-child，这个问题相对简单：
关键就是 首个 class=A 的位置是已知的，改变 nth-child(2) 即可；
1、所有.main 的第二个元素（即首个 class=A）改变样式
.main>:nth-child(2){color:#fff; background:#B32B2D;}
2、仅页面第一个.main 的第二个元素（即首个 class=A）改变样式
.main:nth-child(1)>:nth-child(2){color:#fff; background:#B32B2D;}
妈呀 有必要考虑那么深么 用内联可好
都是神啊，给第一个一个id不就可以了！！！！
居然忘了来看了，主要这个
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
