1. label label
w3 definition and usage:
The <label> tag defines a label (markup) for the input element.
1. The label element does not present any special effects to the user. However, it improves usability for mouse users. This control fires if you click on text inside the label element. That is, when the user selects the label, the browser will automatically focus on the form control associated with the label.
2. The "for" attribute can bind the label to another element. Please set the value of the "for" attribute to the value of the id attribute of the associated element.
Example:
The hiding of elements
{ display: none; /* does not occupy space, cannot be clicked */ }
{ position: absolute; top: -999em; /* does not occupy space and cannot be clicked*/ }
{ position: absolute; visibility: hidden; /* does not take up space, cannot be clicked */ }
{ height: 0; overflow: hidden; /* Does not occupy space and cannot be clicked (if there is a border border, you need to remove the border) */ }
{ visibility: hidden; /* takes up space and cannot be clicked */ }
{ position: relative; top: -999em; /* occupies space, cannot be clicked*/ }
{ opacity: 0; filter:Alpha(opacity=0); /* takes up space, you can click */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* does not occupy space, you can click */ }
Three, :target pseudo-class (ie9+, chrome, etc.)
Syntax: E:target { sRules }
Description: Matches the E element pointed to by the relevant URL.
The URL followed by the anchor # points to a specific element within the document. The linked element is the target element, and the :target selector is used to select the currently active target element.
Example:
#demo:target{color:#f00;} <div id="demo"> <p>E:target伪类使用方法</p> </div>
Assuming the above code is in page a.html, then when visiting a.html#demo, this div element will be hit by :target
Fourth, :after, :before pseudo-elements combined with the content attribute
Usage: Insert sequences such as numbers into elements
Example:
style:
To be continued. . .