I ve read this Why selecting by ID is not recommended in CSS?
说明为什么使用类而不是 ID s。 许多 devs 去冷火鸡, 拒绝使用 ID s 来选择样式 。
但我肯定许多经验丰富的德意志人(如果不是大多数经验丰富的德意志人的话)仍会使用身份证明作为文体学钩(同时偏爱阶级)。
有哪些可能的情况可以证明有理由使用IDs而不是类?
从我所发现的情况来看,那些试图只使用类和属性选择者的人(不是所有人,但多数人)把样式表弄得一团糟。他们最后把所有东西都放上一个类,然后有很长的选择字符串试图移动某个元素,这就是身份选择者闪耀的地方。ID被安装到 CSS是有原因的,使用得当是好的。
尽量少用
You may use ids when you are targeting unique items (you don t want to reuse that particular style) like #header,#footer.
Another good reason to use ids may be if you re a front-end developer thattakes care of some basic javascript too. Javascript access to elements via id is a lot faster than by other chained class names, so for performance reasons , you (as a js developer) might want add an id to your widget that allows you to access that element a lot faster.
For example
#widget
比起类似的东西 更快更容易通过js进入
.wrapper .container .sidebar .widget:nth-child(n)
I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....
I have a button that opens a dialog when clicked. The dialog displays a div that was hidden After I close the dialog by clicking the X icon, the dialog can t be opened again.
selectBox.selectCSS { background: url(/Images/replacementSelectBackground.png) top left no-repeat height:auto; } I have an issue in Safari only where the image is not rendering on top ...
How do you target specifically safari in css with styles?
Ive used the following css code to align my form elements: form { position:relative; } form input { position:absolute; left:11em; } However, the textarea element is not aligned correctly with the ...
So I ve got a menu with a hover/selected state and it loads fine in IE6/IE7. However when I scroll down the page and put the element outside of the viewport and then back in I get a broken image! I ...
I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...
I have defined my page footer in the css file as: #footer { position: absolute; height: 50px; text-align: center; background: #66CCCC; bottom: 0px; left: 0px; width: 100%; height: ...