selector_html/css_WEB-ITnose

There are many types of CSS selectors. Every time I see what others have written, it feels like an endorsement. I can’t help it. There are only so many types. I can only list them one by one. What other tricks can I play? So the important thing is to understand why it is used in this way and what are the benefits.

If our web page is just as simple as a list of 3 things that the boss tells us to do, cross it off after completing one item, so we can see at a glance which one has been done and which one has not been done, and the html web page It is a text form organized by structured, nested tags. It is many and long, so it needs selectors to quickly locate it in order to apply the styles we add to it, so it makes sense to understand selectors.

1. Tag selector

In CSS, some tags themselves already have some styles, such as h1, which is usually used as a title. Its font is larger than normal and the default is bold. , and it is a block-level tag with margin values ​​around it. Tag selectors, essentially, redefine the style of a tag. Still h1, because using it as a title is good for search engines, so it is often used, but its own style sometimes (I'm afraid many times) seems very unreasonable with the layout of the web page, so we can completely rewrite its style and change the font size , remove margin, etc. to achieve overall control effect. As long as its style is redefined, h1 will be used directly to display the text content after applying the new style, which is more harmonious.

    h1{font-size:1em;}

2. Class selector

Since it is a class, it affects one or several elements more, in order to reduce the workload and provide precise control , it is a good choice to give the same class name to some elements of the same type. The point is that you can add multiple class names to one class, which saves time. If the three selectors here add different styles, they will all be loaded on this text. Of course, CSS styles are based on the principle of proximity. The later ones overwrite the previous ones, and the ones with higher priority override the ones with lower priority. So if mr also sets font-size, it will override the font-size in the ft selector.

    .ft{font-size:24px;}        .mr{margin:10px;}    .fl{float:left;}    <p class="ft mr fl ">Hello World</p>

Professional front-ends usually use several classes at the same time, one fl means floating to the left side of the page, write a separate style, and add it when needed, so it is more like A tool, split into multiple class names, is more scalable. Note that - or _ can appear in the class name, which is allowed.

3. ID selector

ID gives people a feeling of unique identification, so it often marks a special part of the web page, and more often represents a certain part of the content, such as Banner, sidebar, main content, etc. When dividing a large block, it is often like this. Of course, if you say that I like to use the ID selector, I add ID to all tags. The only result is that no one will bite you -_-#

    #news{        margin-left:10%;        font-family:"Times New Roman"     }     <div id="news">         ........     </div> 

The important thing about ID is that it has high priority, such as the following

    #link{ color:red; }    .link{ color:blue; }    <a id="link" class="link" href="#">To Somewhere</a>

Is it red or blue? You can tell from the demo that it is red because the ID selector has a higher priority. The browser will calculate a weight value based on the ID and class (or combination), and whose style is bigger will be used (theoretically, this is the case, but with Chrome It doesn’t seem certain after trying it), and the calculation of the weight value is a bit troublesome if you delve into it, especially when more than one ID, class, and label are entangled together. There are also articles analyzing how to calculate weights online. Of course, why do we need to embarrass ourselves? At least I (learned from the front-end) sometimes make simple pages and only use class selectors. Only when I use js sometimes do I need to get elements quickly. Add ID, basically do not use ID selector to add style, to avoid trouble.

　4. Group Selector

If you have seen professional front-end css code, there must be something like this at the beginning:

    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li{ margin: 0; padding: 0; }

At first, I didn’t understand why I had such a large number of tags. I thought it was to grasp the style from the whole to the part during design, so I first gave all the tag elements one or two basic, overall styles. Like here, margin and padding are used to make All their labels are reset to 0. Later I discovered that this is not entirely wrong, but more importantly, when many browsers process some tags with their own styles (such as h1~hn), although there are spaces on the left and right, some use margin, and some use margin. Non-uniform use of padding may cause style confusion. In order to make the style display consistent on more browsers, we simply remove their margin and padding here. When a certain tag is to be used, add margin and padding separately. padding. There are a lot of tags here, and the selectors separated by commas are called group selectors, which means that they are all set to a style in parentheses. The group selector is not limited to tags, class and id can also be used: .link, .news, #banner{...}. Group selectors are convenient when setting up a bunch of tags, classes, and IDs with the same style. Regarding the above-mentioned design that sets margin and padding to 0 to improve display consistency, there is a name called CSS Reset, which is a style reset that novices like me don’t usually use.

5. Universal selector

　　群选择器一次设置多个很爽，堆在一起用逗号分隔即可，还有更爽的，就是通用选择器，它就是一个 * ，代表所有选择器（通用嘛），比如下面

    h1, h2, p{font-weight:bold;}    * {font-weight:bold;}

　　第二个通用选择器等同于设置了第一个群选择器的内容，当然能比它代表更多的东西。

　　6. 派生选择器

　　这应该是专业前端最最常用的类型了，也称后代选择器。我们知道html标签是嵌套的，外面的是父元素，里面的是子元素，当然父子关系是相对的，这叫做html的族谱，当然它也有根节点，兄弟节点等，这根二叉树完全一样，所以也有相应的父标签、祖先标签、兄弟标签等等。比如像这样的

    <div id="nav">        <ul class="nav">             <li></li>             <li></li>        </ul>    </div>    

　　ul是div的子标签，li是ul的子标签，id选择器在类选择器nav的标签的父标签里边，所以定位到

    #nav .nav li{...}