30 types of CSS selectors you must remember_html/css_WEB-ITnose

You may have read about the `id`, `class` and `descendant` selectors, and are using them all, then you are making the mistake of selecting with a greater level of flexibility. Most of the selectors mentioned in this article are under the CSS3 standard, so they can only take effect in the latest version of the corresponding browser. You should keep these in your smart mind.
1. *

Css code

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

Before we look at more advanced selectors, we should know about this well-known clearing selection device. The asterisk will select every element on the page. Many developers use it to clear `margin` and `padding`. Of course you can use this when practicing, but I don't recommend using it in a production environment. It adds a lot of unnecessary stuff to the browser.
`*` can also be used to select all child elements of an element.

Css code

1. #container * {
2. border: 1px solid black;
3. }

It will select all elements under `#container`. Of course, I still don't recommend you to use it, if possible.

DEMO
Compatibility

IE6

Firefox

Chrome

Safari

Opera

2. #X

Css code

1. #container {
2. width: 960px;
3. margin: auto;
4. }

Use `# in the selector `You can use id to locate an element. Everyone usually uses it this way, and you still have to be very careful when using it.
You need to ask yourself: Do I have to assign an id to this element to locate it?

The `id` selector is very strict and you cannot reuse it. If possible, try using tag names first, new elements in HTML5, or pseudo-classes.
DEMO
Compatibility

IE6

Firefox

Chrome

Safari

Opera

3. . > color: red;

}

This is a `class` selector. It differs from the `id` selector in that it can target multiple elements. You can use `class` when you want to style multiple elements. When you want to modify a specific element, use `id` to locate it.
1. DEMO
Compatibility
IE6

Firefox

Chrome

Safari

Opera

4.

text-decoration: none;

}

The next commonly used one is the `descendant` selector. You can use this if you want to be more specific about locating elements. For example, what if you don't need to target all `a` elements, but only the `a` tag under the `li` tag? At this time you need to use the `descendant` selector.
Pro tip: If your selector looks like `X Y Z A B.error`, you are doing it wrong. Always remind yourself whether you really need to modify so many elements. DEMO

Compatibility

IE6

Firefox
Chrome
Safari
Opera

5. }

ul { margin-left: 0; }

If you want to locate all tags on the page, not by `id` or ' class', this is simple, use the type selector directly.

DEMO

Compatibility

IE6

Firefox

Chrome

Safari Opera

6. X:visited and X:link

Css代码 

1. a:link {color:red;}  
2. a:visited {color: purple;}  

我们使用`:link`这个伪类来定位所有还没有被访问过的链接。 
另外，我们也使用`:visited`来定位所有已经被访问过的链接。 
DEMO 
兼容性 

IE7+

Firefox

Chrome

Safari

Opera

7. X+Y 

Css代码 

1. ul + p {  
2.    color: red;  
3. }  

这个叫相邻选择器。它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有`ul`标签后面的第一段，并将它们的颜色都设置为红色。 
DEMO 
兼容性 

IE7+

Firefox

Chrome

Safari

Opera

8. X>Y 

Css代码 

1. div#container > ul {  
2.   border: 1px solid black;  
3. }  

`X Y`和`X > Y`的差别就是后面这个指挥选择它的直接子元素。看下面的例子： 

Css代码 

1.   
2.    
     
3.       
4.  List Item  
5.         
     
6.            
7.  Child 
  
8.           
9.       
  
10.       
11.  List Item 
  
12.       
13.  List Item 
  
14.       
15.  List Item 
  
16.