如何在多个div类和id中选择span元素？ [英] How to select span element inside multiple div classes and id's?

问题描述

我总是想知道如何选择一个元素深深埋在其他元素有类和id的？

例如：

 < div class = id =footer> 
< div class =十六列>< span>一些文字< / span> 
  

如果我想选择元素，那么我要做的是在CSS中写下面的代码：

  .container #footer .sixteen .columns span {
 font-weight：bold;不幸的是，这个方法似乎没有被浏览器验证或被浏览器识别。 
让我们说，我不想给十六列类或跨度本身提供任何通用样式。我只想对这个非常具体的元素应用非常具体的风格。 
 
 
 
如何选择该span元素？
解决方案
代码：
 < div class =containerid =footer> 
< div class =十六列>< span>一些文字< / span> 
< / div><！ - 我已经选择关闭打开的div元素 - > 
  
您的选择器不能工作，由浏览器。问题是，它不是，如你所说，'有效'（对于你有的HTML结构）。
 
 
 
问题是，在CSS中，空格代表一个祖先 - 后代关系，因此：
  EF 
  
选择一个匹配选择器 F 的元素，它是选择器的后代 code>;您自己的选择器：
  .container #footer .sixteen .columns span 
  
在类'的元素中选择< span>   id =footer的元素中的'sixteen' $ c>本身在'container'类的元素内;提供HTML：
 < element class =container> 
< element id =footer> 
< element class =sixteen> 
< element class =columns> 
< span>< / span> 
< / element> 
< / element> 
< / element> 
  
这与您自己的HTML没有什么相似之处。因为白空间建立了一个祖先 - 后代关系，推论是，没有白空间暗示着相同的元素，这是你的目标，我想。省略白色空格，然后给出以下选择器：
 ＃footer.container .sixteen.columns span {
 / * CSS here * / 
} 
  
这个选择器可能过于复杂假设 id 唯一标识一个元素 1 ），并且可以简单地重写：
  #footer .sixteen.columns span {
 / * CSS here * / 
} 
  pre> 
 
 
或者，如果你愿意并且能够牺牲一些特殊性：
  #footer span {
 / * CSS here * / 
} 
  
 
 
 
 
 
 
 
 
请注意，类名通常在JavaScript中用于表示状态，状态更改或某种交互;因此将 id 与类（＃footer.container ），但如果类不是动态添加或删除，它可能是多余的和不必要的。和网络开发中的所有事情一样，它是值得试验找出什么对你有用;现代浏览器在大多数情况下都足够快，为选择器添加类名不会显着减慢速度，但要注意时间关键的用例，最好删除所有  
  $ b 
参考文献：
 
 
 
 
 
  CSS选择器（和组合器）。
 
 
 
I always wondered how can you select an element that is deeply buried in other elements that have classes and id's ? 

For example : 
<div class="container" id="footer">
        <div class="sixteen columns"><span>some text here</span>
If I want to select  element then what I would do is write in CSS the following :
.container #footer .sixteen .columns span {
            font-weight: bold;
        }
Unfortunately it seems that this method is not valid or recognized by browsers.
Let's say that I don't want to give any general styles to 'sixteen columns' class or span itself. I just want to apply very specific styles to this very specific element. 

How should I select that span element ?
解决方案
Given your code:
<div class="container" id="footer">
    <div class="sixteen columns"><span>some text here</span>
</div><!-- I've chosen to close the opened div element -->
Your selector cannot work, but it is definitely "recognized by browsers." The problem is that it is not, as you say, 'valid' (for the HTML structure that you have).

The problem is that, in CSS, white-space implies an ancestor-descendant relationship, so:
E F
Selects an element, matching selector F, that is a descendant of selector E; your own selector:
.container #footer .sixteen .columns span
selects a <span> element, within an element of class 'columns', within an element of class 'sixteen', within an element of id="footer" itself within an element of class 'container'; giving HTML:
<element class="container">
    <element id="footer">
        <element class="sixteen">
            <element class="columns">
                <span></span>
            </element>
    </element>
</element>
Which bears no resemblance to your own HTML. As white-space establishes an ancestor-descendant relationship, the corollary is that no white-space implies the same element, which is what you were aiming for, I think. Omitting the white-space, then, gives the following selector:
#footer.container .sixteen.columns span {
    /* CSS here */
}
This selector is, probably, overly complex (given that an id uniquely identifies an element1), and could be re-written as simply:
#footer .sixteen.columns span {
    /* CSS here */
}
Or even, if you're willing, and able, to sacrifice some specificity:
#footer span {
    /* CSS here */
}





Note that a class-name is often used in JavaScript to denote a state, state-change or interaction of some kind; so it's not definitively redundant to combine an id with a class (#footer.container), but if the class is not dynamically added or removed, it probably is redundant and unnecessary. As with all things in web-development, it's worth experimenting to find out what works for you; contemporary browsers are fast enough for the most part, that adding a class-name to the selector isn't going to slow things down substantially, but beware of time-critical use-cases, when it's best to remove everything that's not absolutely necessary.
References:


CSS Selectors (and combinators).


                        
这篇关于如何在多个div类和id中选择span元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！