To use css to achieve one-to-one, one-to-many or many-to-one control of elements in HTML pages, CSS selectors are needed.
(I) What is a selector?
Each css style definition consists of two parts, the form is as follows: [code] selector {style} [/code] The part before {} is the "selector".
The "selector" specifies the object of the "style" in {}, that is, which elements of the web page the "style" is applied to.
(Ii) Five CSS selectors
⑴Tag selector (element selector)
⑵ID selector (uniqueness, one reference)
⑶ class selector (single class selector, multi-class selector)
⑷Attribute selector (simple attribute selection, specific attribute selection, partial attribute selection, specific attribute selection)
⑸ Derived selector (descendant selector), child selector (child selector), adjacent sibling selector (Adjacent sibling selector)
(Iii) Element selector (label selector)
A complete HTML page is composed of many different tags. Tag selector: Refers to using HTML tag names as selectors, categorizing by tag name, and assigning a unified CSS style to a certain type of tag on the page.
If you set the HTML style, the selector will usually be an HTML element, such as p, h1, em, a, or even html itself.
E.g:
html {background-color: black;}
p {font-size: 30px; backgroud-color: gray;}
h2 {background-color: red;}
The above css code will add a black background to the entire document; set the font size of all p elements to 30 pixels and add a gray background; add a red background to all h2 elements in the document.
㈣ID selector
⑴ID selector allows to specify style in a way independent of document elements.
⑵ID selector can specify specific styles for HTML elements marked with specific IDs. The element is selected based on the element ID, which is unique, which means that the same id can only appear once in the same document page.
The id selector is defined by "#".
For example: in css, the following two id selectors, the first one can define the color of the element as red, and the second one can define the color of the element as yellow:
#red{color：red；}
#yellow{color：yellow；}
In the HTML code below, the p element with the id attribute of red is displayed in red, and the p element with the id attribute of green is displayed in green.
<p id="red">这个段落是红色。</p>
<p id="yellow">这个段落是黄色。</p>
㈤Class selector
The class selector uses the class name to select the element. The premise is to define a class attribute for the element in HTML, class="类名"and then use "." to identify it, followed by the class name. **
(1) Single class selector
Class selectors allow styles to be specified in a way that is independent of document elements. The selector can be used alone or in combination with other elements.
① Modify HTML code
Before using the class selector, you need to modify the specific document markup so that the class selector can work properly. In order to associate the style of the class selector with the element, the class must be specified as an appropriate value.
Please see the following HTML code:
<h1 class="important">
This heading is very important
</h1>
<p class="impportant">
This paragraph is very important.
</p>
In the above code, the classes of two elements are specified as important: the first heading (h1 element), and the second paragraph (p element).
② Grammar
We use the following syntax to apply styles to these categorized elements, that is, there is a dot (.) before the class name, and then combined with a wildcard selector:
.important {color:red;}
If you only want to select all elements with the same class name, you can ignore the wildcard selector in the class selector, which has no bad effect:
.important {color:red;}
③Combined element selector
Class selectors can be used in conjunction with element selectors.
♧For example, just make paragraphs appear as red text:
p.important {color:red;}
The selector will now match all p elements whose class attribute contains important, but will not match any other types of elements, regardless of whether they have this class attribute.
The selector p.important is interpreted as: "all paragraphs whose class attribute value is important". Because the h1 element is not a paragraph, the selector of this rule does not match it, so the h1 element will not become red text.
♧For example: to specify different styles for the h1 element, you can use the selector
h1.important：
p.important {color:red;}
h1.important {color:blue;}
⑵Multi-type selector
In HTML, a class value may contain a list of words, separated by spaces.
For example, if you want to mark a particular element as important and warning at the same time, you can write:
<p class="important warning">
This paragraph is very important warning.
</p>
Note: The order of these two words does not matter, and it can be written as warning important.
Assume that all elements whose class is important are bold, and all elements whose class is warning are italicized, and all elements whose class contains both important and warning have a silver background.
You can write:
.important {font-weight:bold;}
.warning{font-style:italic;}
.important .warning{background:silver;}
By linking two class selectors together, only elements that contain these class names can be selected at the same time (the order of class names is not limited).
If a multi-class selector contains a class name that is not in the class name list, the match will fail.
㈥Attribute selector
The attribute selector can select elements based on their attributes and attribute values.
⑴Simple attribute selection
If you want to select an element with a certain attribute, regardless of the attribute value, you can use a simple attribute selector.
Example 1: To change all the elements containing the title (title) to red, you can write:
[title] {color:red;}
Example 2: Only apply styles to anchors (a elements) with href attributes:
a[herf] {color:red;}
Example 3: To select based on multiple attributes, just link the attribute selectors together.
In order to set the text of HTML hyperlinks that have both href and title attributes to red, you can write:
a[herf] [title] {color:red;}
Example 4: Apply styles to all images with alt attributes to highlight these valid images:
img[alt] {border:5px solid red;}
⑵Select according to specific attribute value
Example 1: To change the hyperlink to a specified document on the Web server into red, you can write:
a [href="http://www.baidu.com"] {color:red;}
Example 2: Link multiple attribute-value selectors together to select a document.
a [href="http://www.baidu.com"] [title="baidu"] {color:red;}
This will change the text of the first hyperlink to red, but the second or third link will not be affected:
Note: This format requirement must exactly match the attribute value.
If the attribute value contains a space-separated list of values, the matching may be problematic.
⑶Select according to some attribute values
If you need to select a word in the word list in the attribute value, you need to use a tilde (~).
To select the element that contains important in the class attribute, you can do this with the following selector:
p[class~="important"] {color:yellow;}
Note: If the tilde is omitted, it means that the exact value matching needs to be completed.
⑷Specific attribute selection type
For example:[lang |="en"] {color:red;}
The above rule will select all elements whose lang attribute is equal to en or starting with en-. Therefore, the first three elements in the following example tag will be selected, but the last two elements will not be selected:
(Vii) Offspring selector
⑴The descendant selector is also called the containment selector. The descendant selector can select elements that are descendants of an element.
(2) In descendant selectors, the selector on the left side of the rule includes two or more selectors separated by spaces. The space between the selectors is a combinator.
⑶ Each space combiner can be interpreted as "... found in...", "...as part of...", "...as a descendant of...", but the selector must be read from right to left.
Example: To apply styles only to the em element in the h1 element, you can write:
h1 em {colopr:red;}
⑴ The above rule will change the text of the em element that is the descendant of the h1 element to red. Other em texts (such as em in a paragraph or block quote) will not be selected by this rule.
⑵ The h1 em selector can be interpreted as "any em element that is a descendant of h1 element". If you want to read the selector from left to right, you can change it to the following statement: "All h1s containing em will apply the following style to the em".
application:
Can make possible tasks that are impossible in HTML. Suppose there is a document with a sidebar and a main area. The background of the sidebar is blue, and the background of the main area is white. Both areas contain a list of links. You can't set all links to blue, because then the blue links in the sidebar will not be visible. The solution is to use descendant selectors. In this case, you can specify the class attribute value of sidebar for the div containing the sidebar, and set the class attribute value of the main area to maincontent.
Write the following style:
div.sidebar {background:blue;}
div.maincontent {background:white;]
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}
㈧sub element selector
⑴ Child selectors can only select elements that are child elements of a certain element.
⑵ Do not want to select any descendant elements, but want to narrow the scope, only select the child elements of a certain element, please use the child selector (Child selector).
(3) The sub-selector uses the greater than sign (sub-combiner). There can be white space on both sides of the sub-combiner, which is optional.
For example: To select a strong element that is only a child element of the h1 element, you can write:
h1 > strong {color:red;}
If you read from right to left, the selector h1> strong can be interpreted as "select all strong elements that are child elements of h1".
This rule will change the two strong elements under the first h1 to red, but the strong in the second h1 is not affected:
∨ Neighbor brother selector
⑴Adjacent sibling selector can select the element immediately after another element, and both have the same parent element.
⑵The adjacent sibling selector uses the plus sign (+), which is the Adjacent sibling combinator. Like the sub-combiners, there can be white space next to adjacent siblings.
For example: if you want to increase the top margin of the paragraph that appears immediately after the h1 element, you can write:
h1 + p {margin-top:50px;}
This selector reads: "Select the paragraph that appears immediately after the h1 element. The h1 and p elements have the same parent element."
Specific explanation: Please see the following document tree snippet:
In the above snippet, the div element contains two lists: an unordered list and an ordered list. Each list contains three list items. The two lists are adjacent siblings, and the list items themselves are also adjacent siblings.
However, the list items in the first list and the list items in the second list are not adjacent siblings, because these two sets of list items do not belong to the same parent element (at most, they can only be counted as cousins).
Simply put: ul and ol are adjacent brothers, and the list items in ul and the list items in ol are not adjacent brothers.
I am currently working in front-end development. If you also want to learn front-end development technology now, and you encounter any questions about learning methods, learning routes, learning efficiency, etc. during the process of getting started learning front-end, you can apply to join my front-end Learning exchange skirt: 421374697. It gathers some beginners, changers, and beginners who are self-learning front-end. I also have some front-end learning mind maps compiled during the time I was doing front-end technology, front-end factory interview questions, front-end development source code tutorials, and PDF documents. Books and tutorials can be obtained from the skirt pig if you need them.
Note: Only the second element of two adjacent siblings can be selected with a combinator. Look at the selector below:
li + li {font-weight:bold;}
The above selector will only make the second and third items in the list bold. The first list item is not affected.