Selector, jquery Selector

Selector, jquery Selector

There are many types of CSS selectors. Every time you read what others write, there is no way. There are so many types. You can only list them one by one. What else can you do? Therefore, it is important to know why it is necessary to use it and where the benefits are.

If our webpage is as simple as a list of three things that the boss has told us to do, we can tell at a glance which one has done and which one has not done, html Web pages are structured and nested labels organized in the form of text. They are many and long. Therefore, you need a selector to quickly locate them and apply the styles we add to them, so it makes sense to understand the selector.

1. Tag Selector

In CSS, some labels have some styles. For example, h1 is usually used as the title. Its font is larger than the general one. The default is bold and it is a block-level label, there is a margin value around. The tag selector is essentially a new style for a tag. Or h1, because using it as the title is conducive to the search engine, so it is often used, but its built-in style sometimes (I am afraid it is too long) and the web page layout is very unreasonable, therefore, we can completely rewrite its style, change the font size, and remove margin to achieve the overall control effect. As long as the style is redefined, h1 is used to display the text content after the new style is applied, which is more harmonious.

    h1{font-size:1em;}

2. class selector

Since it is a class, it has more impact on one or more elements. To reduce the workload and precise control, give the same class name to some elements of the same type, is a good choice, the focus is that you can add multiple class names in a class, more time-saving. For example, different styles are added to each of the three selectors and will be loaded to this text. Of course, CSS styles follow the proximity principle. The latter covers the previous ones, and the higher the priority, the lower the priority. So if mr also sets font-size, it will overwrite 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>

A professional front-end usually uses several classes at the same time. One fl indicates that the front ends float to the left of the page and write a style separately. It is added when needed, so it is more like a tool, split into multiple class names, which is more scalable. Note that the class name can contain "-" or "_", which is allowed.

3. ID Selector

ID gives a unique identifier, so it is often used to mark a special part on a webpage, more is to indicate a part of the content, such as banners, bar (sidebar) and main content (main). For example, when dividing a large block, it is often like the following. If you say that I like to use the ID selector, I add ID to all the labels, the only result is that no one will ever bite you -_-#

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

ID has a high priority, for example

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

Is it red or blue? The demo will know 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, who is the most popular style (in theory, but it seems that it is not necessarily true if Chrome is used), it is a bit troublesome to calculate the weight value, especially when more than one ID, class, and tag are entangled. There are also articles on how to calculate weights. Of course, we should be embarrassed about ourselves. At least I (learn from the front-end) sometimes make simple pages and only use class selectors, you can add an id only when using JavaScript to quickly obtain the element. You do not need to add an ID selector to add a style.

4. Group Selector

If you have read the css code of the professional front-end, 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 even understand why I got a lot of labels. I thought it was a grasp of the style from the whole to the part during design. So I first gave one or two basic and overall styles to all the tag elements, here, margin and padding are used to classify all their labels as 0. Later, I found that this cannot be all wrong, but more importantly, many browsers process some labels with built-in styles (such as h1 ~ Hn), although the left and right are blank, some use margin and some use padding, which may lead to style disorder. To make the style display consistent in more browsers, so here we simply remove their margin and padding. When you want to use a tag, add the margin and padding separately. There are a lot of labels separated by commas (,), called group selectors, which indicate that they are all set to a style in parentheses. The Group selector is not limited to labels. The class and id can also be as follows:. link,. news, # banner {...}. The Group selector is convenient when setting a lot of labels, classes, and IDs with the same style. About the large pile above that sets margin and padding to 0, and improves the display consistency design, there is a name called CSS Reset, style Reset, which is even less common than this white.

5. General Selector

The Group selector can be set to multiple very nice ones at a time. The Group selector can be separated by commas (,). What's better is the general selector, which is a * representing all the selectors (common ), for example

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

The second generic selector is equivalent to setting the content of the first group selector. Of course, it can represent more things than it.

6. Derivative Selector

This should be the most common type of professional front-end, also known as the descendant selector. We know that html tags are nested. The external elements are parent elements and child elements. Of course, the parent-child relationship is relative. This is called the family tree of html. Of course, it also has a root node, this binary tree has the same parent label, ancestor label, and sibling label. For example

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

Ul is the sub-tag of div, li is the sub-tag of ul, and id selector is in the parent tag of the class selector nav, so the selector of the <li> tag can be written as follows:

    #nav .nav li{...}

Note that there is a space in the middle. A space indicates a sub-tag, or a selector located in the sub-tag, that is, a parent-child relationship. The child-child relationship also works, in short, it is a derivative relationship. For the derived selector, if one space is not separated, it is completely different. For example, if div # nav ul {...} is written here {...} (div is next to # nav): <div id = "nav"> <ul>, which is used to set the style for the div tag whose id is nav and its sub-tag is ul, is a restricted and link. If it is div # nav ul {...}, it is the sub-tag whose id is nav and its sub-tag is li. Spaces are important!

Look at the code of the professional front-end. The derived selector accounts for 8%, and the style is relatively uniform. We try to use the class when deriving. Of course, there will be some tag selectors at the end, but the style is really good, instead of a class selector for a while, there will be an ID selector, a tag selector, and an ID selector. This looks messy and smooth at all, what Professionals write is a harmonious aesthetic.

Except for the ID selector for a while and the class selector for a while, there is a big reason: it is very likely that the style you designed is not applied to the specified place at all, although it is expected that it will be used in your designated place. For example

    <div id="id_wrap" class="cl_wrap">        <p id="id_seg" class="cl_seg">            Hello World        </p>    </div>    1  div p {...}    2  #id_wrap #id_seg{...}    3  .cl_wrap .cl_seg{...}    4  .cl_wrap #id_seg{...}    5  div #id_seg{...}    6  div .cl_seg{...}    6  .cl_wrap p{...}    7  #id_wrap p{...}
    8  div.cl_wrap p{...}
    9  #id_wrap p.cl_seg{...}    ...    ...

These nine styles can be applied to the Hello World (for separate writing), and can be further combined. If you write all these styles, which one will actually be loaded to the text content? Here is a question about the weight value. As mentioned above, for the weight value, the ID selector is the largest (in the selector). I have read a book that says: the tag selector has one point, class selector: 10 points, ID selector: 100 points, and built-in style: 1000 points. The built-in style is similar to <div> /*! Important indicates that this attribute will never be overwritten */. seg {font-style: bold! Import ;}

Some articles have computed and analyzed this weight value, and I am still lazy to escape it... therefore, the class selector of the professional front-end is correct. As long as the positioning is accurate enough, the class selector follows the Unified Specifications, and an ID selector is not added to the temporary channel, there is basically no error.

Another advantage of using a derived selector is to save the workload. On a webpage with a well-organized layout, the style of the div in the block is always as uniform as possible. From the parent element to the child element, there are always many attributes identical, and the css style can be inherited, for example, when the font of the parent element is 16 PX, if the font-size is not set for the child element, the font size of the child element is also 16 PX, of course, not all styles can be inherited (with a special list), such as line-height row spacing, which is reasonable. If the row spacing of the parent element 16px is 16 PX, if the font of the child element is 54px and the row spacing is still 16 PX, it may make the font lines in the child element very compact or even overlap, because the font size increases a lot of row spacing, try to see the effect. Because the style can be inherited, the derived selector is easier to use.

7. Sub-Selector

According to the parent and child of the tag structure in html, the form is A> B. The angle brackets indicate the parent-child relationship. Note that B must be A direct sub-tag of, it may be Sun Tzu, Zeng sun, and Zeng Sun. I believe you know the Parent-Child structure in programming that a is the child node of B, not that a is the immediate descendant of B, so div> p {...} it indicates all (direct or indirect) Sub-tags in the div tag, and the same is true for div p.

8. compatriot Selector

For tags that share a parent element, they are siblings ?) The relationship is called a compatriot in css, and the neighboring compatriot is placed closely on the position. Therefore, css has a structure called a neighboring compatriot selector, such

    <div>         
H1 and p are neighboring siblings. h1 + p indicates that the tag p is selected next to h1 and has a parent element with h1.
9. Common compatriot Selector
It is an extension of the compatriot selector. h1 + p can only act on the p element that has a sibling relationship and is next to h1, so h1 ~ P indicates that all p labels after h1 are selected with a sibling relationship.
<Div> 
10. pseudo class
There are many pseudo-class selectors. Sometimes we do not match a single element, but a certain State, a special structure (a simple sibling selector cannot express it), or an instant of an action, for example, when the mouse slides over a link, the odd sequence in the unordered list is displayed. In this case, css gives a name: pseudo class.
The most common capture action is a link. a: link, a: visited, a: hover, And a: active indicate that they have been accessed before they are accessed, and they have slipped out of date, there is no space between a and. The settings of these four pseudo classes are ordered and listed here. If the hover is placed before the link (as shown below), the link will still be green when the mouse slides, because their weights are the same, according to the proximity principle, the style behind will overwrite the front side (style conflict), and the style that slides over the application will be a: link, so we need to follow the order, A book introduces a method of recordingLOVE,HATe. In some selector, hover is not only a link patent, such as p: hover. It changes the style when sliding a paragraph. Of course, it is only some browsers and some later versions. You can check the specific situation. The front of pseudo-class writing is not always a label. <a id = "lnk"> it can be # lnk: hover. css is the same in many places. It is hard to understand it.
    a:hover{color:red;}    a:link{color:green;}
: Focus captures the response when the focus is obtained, for example, the background color of the text box.
Match the target: target. If a url contains the # aaa tag in html, it matches the tag with the id aaa, which is used as the anchor in the page, as shown below, click to jump to the anchor on the page and you will find that its style has been changed (I don't know if the br is enough)
Div: target {background-color: red ;} <p> <a href = "# goto"> jump to goto </a> </p> <br/> <br/> <br/> <br/> <br/> <div> <p name =" goto "id =" goto "> anchor goto </p> </div>
Capture the root node: root. The html page is the html node.
Capture special subnodes, such as first-child, last-child, first-of-type, and last-of-type. It can be seen that it is the first subnode or the first subtype. It is worth noting that p: first-child and p: first-child are completely different (the latter two have spaces). The first one can easily think that, it refers to the first sub-node of the p tag, but in fact the second is the correct method, and p: first-child refers to p as the first sub-tag of other tags, it matches like this.
<Div> <p> match </p> <span> <p> match </p> </span> </div>
Similarly, p: first-of-type indicates that, as a child element of other elements, the first element that appears in the matching tag is p, that is, first, p is the child element of other elements. Second, it matches the first p tag in the child element. It doesn't matter if there are other types of child tags in front, as long as it is not p, even if it has the same p-brother label behind it, it does not match because it is not the first one.
If this is a bit troublesome, you have to ask, is it its sub-element? Is it the first x tag under it? Yes, for example
<Div> 
P: first-of-type (with spaces) refers to the first child element under the p tag. Because no type is specified, as long as it is the first child type under the p tag, it will match, which is equivalent to p: first-child. If it is p span: first-of-type, it refers to the first sub-tag with the span type under the p tag.
Matches only one child element: only-child, such as p: only-child (no space). Matches p as a child element, and its parent element only has this child element.
Take nth-child as an example to match sub-elements according to a certain rule. It can be seen from the literal meaning that it is the nth sub-element, and the form is very flexible. For example, there is an unordered list column.
    <ul class="nav">         <li>A</li>         <li>B</li>         <li>C</li>         <li>D</li>         <li>E</li>    </ul>
First, directly give a value ,. nav li: nth-child (2) indicates that li is a sub-tag with the class name nav and matches 2nd such tags. Here li is a sub-tag of ul, the second one is B.
Second, match the parity, such. nav li: nth-child (odd), indicating that the odd number items in the matching list are listed. The odd in the brackets is a parameter, indicating that the odd number series is searched (the word also indicates this ), A is 1st columns (counted from 1), C is 3rd columns, including 5th columns of E, and even numbers are matched ,. nav li: nth-child (even ).
Third, use expressions, such. nav li: nth-child (2n + 3). css not only knows that the n value of the first list is 1, but also 2. When the 2n + 3 is calculated, take the natural number from 0, so 2n + 3 corresponds to 3rd, 5th, 7th... this expression with n is more flexible.
OK, similar to: nth-child, and: nth-of-type (n),: nth-last-child (n) (the last few ),: nth-last-of-type (n) (the last few types) and so on.
The pseudo class also matches a certain State, such as which text boxes are unavailable (the disable attribute is set) and whether a single sheet of data is selected.
    .txt:checked    .txt:enabled    .txt:disabled
11. pseudo elements
Matches a special position of an element. It is named as a pseudo element. For example, if 'before' matches the Start position of the p tag text content, 'after' matches the end location, and 'content' specifies that Start is added to the text, end ~ is added at the End ~. First-letter matches the first letter, and first-line matches the first line.
    p:before{content:'Start";}    p:after{content:"End~"}
    p:first-letter{color:red;}
    p:first-line{color:green;}
12. Attribute Element
Attribute elements are very commonly used, especially in js. Attribute selectors are of course related to the attributes of tags. They are matched based on some attributes of these tags.
First, for example, A [attr], matches the tag with the attr attribute, as follows, matches the tag with the target attribute, so 2nd <a>
     a[target]{color:green;}     <a href="http://www.css.org/">to css</a>     <a href="www.example.com" target="_blank">to example</a>
Second, A [attr = value] matches the element with the attr attribute and the attribute value is value, so the matching in the above example can be written as follows, a [target = _ blank] {...}, enclose _ blank with quotation marks.
Third, A [attr ~ = Letter], matches the element with the attr tag and the attribute value of the tag contains the letter word, such
    p[class~=news]{color:red;}    <p class="wrap news"></p>
Fourth, A [attr | = value] matches attributes with attr, and the attribute value starts with value or value-. the most suitable one is to specify the element language attribute, on the html page, you can tell the browser which language is used and which has the lang attribute, as shown below, which matches the first one.
P [lang | = en] {color: red ;} <p lang = "en-us"> I am CSS </p> <p lang = "zh-cn"> stacked style sheets </p>
Fifth, use the wildcard *, A [attr * = value], as long as the tag carries the attr attribute and the attribute value contains the string value, it is matched.
In the last two types, the start and end of the property value are A [attr ^ = value]: '].
Finally, attribute selectors can be used in a mix. For example, when jQuery is used to select an element object in a form
<Div> <input type = "radio" name = "type" value = "big"/> big <br/> <input type = "radio" name = "type" value = "medium" checked/> medium <br/> <input type = "radio" name = "type" value = "small"/> small <br/> </div> <! -- Introduce the jQuery file --> <script type = "text/javascript"> alert ($ ("[type = radio] [name = type] [checked]"). val (); </script>
[Type = radio] [name = type] [checked] indicates the simultaneous use of multiple attributes, in this example, to print the value of an element with the type attribute radio, name attribute type, and checked attribute (selected), you need to introduce the jQuery file. I don't seem to have to worry about writing this. I suddenly forgot.
Some of these belong to css2, some belong to css3, and are not necessarily applicable to various browsers. I even know that this is the case. I didn't classify them. Forgive me for being an idiot.