Start from front-end development: CSS Selector

I used to accept many blog posts on the Internet. I always thought that the three most important problems in css learning are box model, positioning, and floating. These three pieces of content determine the css layout capability. However, through the analysis in the previous article, to decouple xhtml from css, we should try not to rely on css (or simply add unnecessary classes and IDs to reserve interfaces for css ), before using css layout, there is actually a more urgent task in front of us-how to accurately apply css rules to target elements. As a result, the position of the css selection operator has been improved unprecedentedly under this premise. Therefore, before learning the box model, floating, and positioning, it is necessary to review the selection operator.

Web designers who have a little experience with css will soon learn three css choices:

Element selector (for example, body, a, and li)
ID selector (for example: # head, # body, # foot)
Class selector (for example,. red,. item,. content)
After that, I began to learn some advanced choices:

Descendant selector (for example, # head. menu, # foot # copyright)
Pseudo-class selector (for example, a: hover, a: link)
And the comprehensive selector formed by the combination of these selector characters. In fact, css also supports some richer choices. But the above are the main types of options that can be widely supported by browsers. Other choices are often used in css to differentiate and process different browsers, or in jQuery frameworks. This document is not mentioned. If you are interested, you can check it online, such as the attribute selector (input [type = 'Password'], input [type = 'Radio ']). and direct descendant selector (body> div, # head> ul.

In fact, with the five main selector listed above, the combination of them can meet the requirements of most of the time, which means that elements in the same structure, if there is a little difference between parent and ancestor elements, we can directly access them without using id or class. For example:

Copy to ClipboardReference: [www.bkjia.com] <ul>
<Li> <a href = "#"> menu 1 </a>
<Ul>
<Li> <a href = "#"> menu 1-1 </a> </li>
<Li> <a href = "#"> menu 1-2 </a> </li>
<Li> <a href = "#"> menu 1-3 </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> menu 2 </a>
<Ul>
<Li> <a href = "#"> menu 2-1 </a> </li>
<Li> <a href = "#"> menu 2-2 </a> </li>
<Li> <a href = "#"> menu 2-3 </a> </li>
</Ul>
</Li>
</Ul>

This structure is the drop-down menu structure I used in "pure css drop-down menu from Microsoft. In that example, no class or id is used, but we use the elements with different priorities + background selector, precise positioning of ul, li, and a at different levels in the structure. The following code:

Copy to ClipboardReference: [www.bkjia.com] ul {}
Li {}
Ul {}
Ul li {}
Li {}
Ul li {}
Ul li: hover ul {}

So, in actual development, Why do many web designers still have to do with the ID and class (I want to declare that I have never completely abandoned id and class, in my opinion, they should be as few as possible and determined by the document structure rather than css )? I think there are three reasons:

1. The structure of the xhtml document is unreasonable. elements cannot reflect the hierarchical structure of the document. All parts are div. The Hx series tags and list tags with different meanings such as ul, ol, and dl are not effectively used, and tags such as p, quote, And pre are not. Xhtml provides us with rich tag elements, but if we only use div, it would be better to use table layout. At least his table is also the embodiment of the document structure to a certain extent, while the structure of the document is completely invisible for the fully nested div.

Second, the css selector is not good at understanding enough. It is not good at distinguishing similar but actually different elements by using different combinations of selector at the structure level of the document. For example, in the above drop-down menu structure, some people have to use "menu" and "submenu" to distinguish.

Third, the priority of css selector is unclear. Css supports inheritance and overwriting. Which rule will be applied if both rules have style rules for the same element and the style rules are repeated? If these problems are unclear, we cannot make full use of priority to implement rule coverage. Therefore, the id or class must be added to each element to apply the style. I will not go into details about the priority of css selector in many articles on the Internet.

Therefore, if you feel that you cannot leave the class or the id, there are only two problems-the xhtml structure is unreasonable or the css is insufficient. After my previous article was published, a friend commented that I had not performed front-end development. Without class and id, css and javascript cannot be separated. In fact, as long as they have been studying css and javascript For a long time, they should all know that when the structure is different, they can use the css selector to precisely locate an element; when the structure is identical, javascript and DOM can also be used to precisely locate an element.

Take the drop-down menu list above as an example. First, use ul a to apply the style to the link of the parent menu, and then use ul a to precisely locate the link to the secondary menu and apply the new style, overwrite the definition of ul. So what if we want to precisely locate the second element of the second level menu? Because the selector of css3 is not widely supported yet, and the structure is not different, it is difficult not to use javascript. But it is very easy to use javascript. For example, in jQuery, we can use $ ("ul: nth (2) li: nth (2 )") or $ ("ul "). eq (1 ). find ("li "). eq (1) can obtain the second menu element of the second sub-menu.

Css and javascript can precisely find any element in the webpage, so the webpage naturally does not need to identify each element by itself. Without the burden of this layer, We can naturally discard all worries when designing the structure of the webpage document. So, what is the need for the IDs and classes unrelated to the structure in xhtml?

Remove unnecessary representation elements and attributes (font, center, align, and height), and remove unnecessary style and behavior attributes such as id, class, onclick, and onmouseover, the source code size of our web page is getting smaller and smaller. When we capture a page, the rest of the elements are links and content. can search engines dislike such websites?

Without worries and recognition of the direction of effort, let's talk about the css box model next time.