现在的位置: 首页 > 综合 > 正文

The 30 CSS Selectors you Must Memorize(30个应该记住的选择器)

2013年10月23日 ⁄ 综合 ⁄ 共 2992字 ⁄ 字号 评论关闭
The 30 CSS Selectors you Must Memorize

\Rating:

The 30 CSS Selectors you Must Memorize

Tutorial Details
  • Topic: CSS selectors
  • Difficulty: Intermediate
This entry is part 2 of 16 in the CSS3
Mastery
 Session - Show All

«
Previous
Next
»

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial
was first published in November, 2010.

So you learned the base idclass,
and descendant selectors – and then called it a day? If so, you’re
missing out on an enormous level of flexibility. While many of the selectors mentioned in this article are part of the CSS3 spec, and are, consequently, only available in modern browsers, you owe it to yourself to commit these to memory.

点击打开链接


1. *

  1. * {  
  2.  margin: 0;  
  3.  padding: 0;  
  4. }     

Let’s knock the obvious ones out, for the beginners, before we move onto the more advanced selectors.

The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins
and padding. While this is certainly fine for quick tests, I’d advise
you to never use this in production code. It adds too much weight on the browser, and is unnecessary.

The * can also be used with child selectors.

  1. #container * {  
  2.  border1px solid black;  
  3. }     

This will target every single element that is a child of the #container div.
Again, try not to use this technique very much, if ever.

View Demo

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X

  1. #container {  
  2.    width960px;  
  3.    marginauto;  
  4. }     

Prefixing the hash symbol to a selector allows us to target by id.
This is easily the most common usage, however be cautious when using id selectors.

Ask yourself: do I absolutely need to apply an id to this element
in order to target it?

id selectors are rigid and don’t allow for reuse. If possible, first
try to use a tag name, one of the new HTML5 elements, or even a pseudo-class.

View Demo

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X

  1. .error {  
  2.   colorred;  
  3. }     

This is a class selector. The difference between ids
and classes is that, with the latter, you can target multiple elements.
Use classes when you want your styling to apply to a group of elements.
Alternatively, use ids to find a needle-in-a-haystack, and style
only that specific element.

View
Demo

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4. X Y

  1. li a {  
  2.   text-decorationnone;  
  3. }     

The next most comment selector is the descendant selector. When you
need to be more specific with your selectors, you use these. For example, what if, rather than targeting all anchor tags, you only need to target
the anchors which are within an unordered list? This is specifically when you’d use a descendant selector.

Pro-tip – If your selector looks like X
Y Z A B.error
, you’re doing it wrong. Always ask yourself if it’s absolutely necessary to apply all of that weight.

View
Demo

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

5. X

  1. a { colorred; }  
  2. ul { margin-left: 0; }     

What if you want to target all elements on a page, according to their type,
rather than an id orclassname?
Keep it simple, and use a type selector. If you need to target all unordered lists, use ul
{}
.

View
Demo

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

6. X:visited and X:link

抱歉!评论已关闭.