I'm seeing this "div#container" syntax being used in CSS and I'm wondering how it works. Anybody has a resource for it?
我在CSS中看到这个“div#container”语法,我想知道它是如何工作的。有人有资源吗?
3 个解决方案
#1
0
As well as being a unique reference as mentioned above, IDs increase specificity (I highly recommend you read this article or one similar http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/, understanding specificity in css will make your life easier).
除了如上所述的独特参考,ID增加了特异性(我强烈建议您阅读本文或类似的http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should -know /,了解css中的特异性会让你的生活更轻松。
Ill try to explain with a short example - take the following:
我试着用一个简短的例子来解释 - 采取以下措施:
div#item { background: blue}
<div id="item" class="item">Hello world</div>
This says make any divs with the ID 'container' blue, but if you then add the following styles after it in your stylesheet
这表示使用ID“容器”为蓝色的任何div,但如果您在样式表中添加以下样式
#item {background: purple}
.item {background: green}
the assumption is that the container would be green because stylesheets are cascading and the class with green background comes last. However this isn't the case, an ID has greater precedence and will override a class even if the class comes later. Additionally the item would not be purple because you have added the div before the id earlier on. Having the div and the id increases the specificity further.
假设容器是绿色的,因为样式表是级联的,而具有绿色背景的类是最后的。但事实并非如此,ID具有更高的优先级,即使该类稍后出现,也会覆盖一个类。此外,该项目不会是紫色的,因为您之前在id之前添加了div。具有div和id进一步增加了特异性。
People often specify items in css like this: div#container to add extra importance to the style or to specifically state that only DIVS with the id container can be blue.
人们经常在css中指定这样的项目:div#container以增加对样式的额外重要性或明确指出只有具有id容器的DIVS可以是蓝色。
I would recommend not doing this it becomes harder to override and the style then be comes unusable if you want to make something else have the background blue. So for example the following would not make the paragraph blue because the style specifically states divs.
我建议不要这样做,它会变得越来越难以覆盖,如果你想让其他东西背景为蓝色,那么这种风格就无法使用。因此,例如以下不会使该段落为蓝色,因为该样式特别指出div。
div#item {background: blue;}
<p id="item">Hello world</p>
If you wanted to override the div#item to be pink instead of blue you might have to do something like the following.
如果你想将div#项覆盖为粉红色而不是蓝色,则可能需要执行以下操作。
div#item.item {background: pink}
This doesn't seem that bad but when you start building complex websites this can make your css really clunky.
这看起来并不那么糟糕但是当你开始构建复杂的网站时,这可能会让你的css真的很笨重。
My advice is to make your css as re-usable as possible e.g. the following can be easily overwritten and reused on any tag.
我的建议是让你的css尽可能重复使用,例如以下内容可以轻松覆盖并在任何标签上重复使用。
.item { background: blue;}
Hope that helps! Seriously read up on css specificity, it will really help you out.
希望有所帮助!认真阅读css特异性,它将真正帮助你。
#2
0
From the CSS standard itself, a chart of selector syntaxes.
从CSS标准本身,选择器语法的图表。
The one you're looking for is near the end:
你正在寻找的那个接近尾声:
E#myid Matches any E element with ID equal to "myid".
In other words, that selector will match <div id="container">.
换句话说,该选择器将匹配
Of course, id values must be unique, so you shouldn't need to specify an element name. You could use *#container or just #container, and many people do. Putting the element name in explicitly might be considered more self-documenting.
当然,id值必须是唯一的,因此您不需要指定元素名称。您可以使用*#容器或只使用#container,很多人都可以。明确地放置元素名称可能被认为更加自我记录。
#3
0
http://www.w3schools.com/css/css_selectors.asp
Try to look at this . This will teach you, how this works.
试着看看这个。这将教你如何运作。
#abc {
text-align: center;
color: blue; }
now anywhere you use #abc text will be aligned center and text color will be blue.
现在你使用的任何地方#abc文本将对齐中心,文本颜色将为蓝色。
You can also customize it as per your needs.
您也可以根据需要自定义它。
#1
0
As well as being a unique reference as mentioned above, IDs increase specificity (I highly recommend you read this article or one similar http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/, understanding specificity in css will make your life easier).
除了如上所述的独特参考,ID增加了特异性(我强烈建议您阅读本文或类似的http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should -know /,了解css中的特异性会让你的生活更轻松。
Ill try to explain with a short example - take the following:
我试着用一个简短的例子来解释 - 采取以下措施:
div#item { background: blue}
<div id="item" class="item">Hello world</div>
This says make any divs with the ID 'container' blue, but if you then add the following styles after it in your stylesheet
这表示使用ID“容器”为蓝色的任何div,但如果您在样式表中添加以下样式
#item {background: purple}
.item {background: green}
the assumption is that the container would be green because stylesheets are cascading and the class with green background comes last. However this isn't the case, an ID has greater precedence and will override a class even if the class comes later. Additionally the item would not be purple because you have added the div before the id earlier on. Having the div and the id increases the specificity further.
假设容器是绿色的,因为样式表是级联的,而具有绿色背景的类是最后的。但事实并非如此,ID具有更高的优先级,即使该类稍后出现,也会覆盖一个类。此外,该项目不会是紫色的,因为您之前在id之前添加了div。具有div和id进一步增加了特异性。
People often specify items in css like this: div#container to add extra importance to the style or to specifically state that only DIVS with the id container can be blue.
人们经常在css中指定这样的项目:div#container以增加对样式的额外重要性或明确指出只有具有id容器的DIVS可以是蓝色。
I would recommend not doing this it becomes harder to override and the style then be comes unusable if you want to make something else have the background blue. So for example the following would not make the paragraph blue because the style specifically states divs.
我建议不要这样做,它会变得越来越难以覆盖,如果你想让其他东西背景为蓝色,那么这种风格就无法使用。因此,例如以下不会使该段落为蓝色,因为该样式特别指出div。
div#item {background: blue;}
<p id="item">Hello world</p>
If you wanted to override the div#item to be pink instead of blue you might have to do something like the following.
如果你想将div#项覆盖为粉红色而不是蓝色,则可能需要执行以下操作。
div#item.item {background: pink}
This doesn't seem that bad but when you start building complex websites this can make your css really clunky.
这看起来并不那么糟糕但是当你开始构建复杂的网站时,这可能会让你的css真的很笨重。
My advice is to make your css as re-usable as possible e.g. the following can be easily overwritten and reused on any tag.
我的建议是让你的css尽可能重复使用,例如以下内容可以轻松覆盖并在任何标签上重复使用。
.item { background: blue;}
Hope that helps! Seriously read up on css specificity, it will really help you out.
希望有所帮助!认真阅读css特异性,它将真正帮助你。
#2
0
From the CSS standard itself, a chart of selector syntaxes.
从CSS标准本身,选择器语法的图表。
The one you're looking for is near the end:
你正在寻找的那个接近尾声:
E#myid Matches any E element with ID equal to "myid".
In other words, that selector will match <div id="container">.
换句话说,该选择器将匹配
Of course, id values must be unique, so you shouldn't need to specify an element name. You could use *#container or just #container, and many people do. Putting the element name in explicitly might be considered more self-documenting.
当然,id值必须是唯一的,因此您不需要指定元素名称。您可以使用*#容器或只使用#container,很多人都可以。明确地放置元素名称可能被认为更加自我记录。
#3
0
http://www.w3schools.com/css/css_selectors.asp
Try to look at this . This will teach you, how this works.
试着看看这个。这将教你如何运作。
#abc {
text-align: center;
color: blue; }
now anywhere you use #abc text will be aligned center and text color will be blue.
现在你使用的任何地方#abc文本将对齐中心,文本颜色将为蓝色。
You can also customize it as per your needs.
您也可以根据需要自定义它。