In CSS2.1, commonly used selectors are: element selector, ID selector, class selector, group selector and level selector. In CSS3, new attribute selector, structure pseudo-class selector, UI pseudo-class selector, the new selector can improve the development efficiency.
Property selector
The id, type, and value are the attributes of the input element. Common property selectors are as follows:
| The selector | instructions |
|---|---|
| E[attr^=”xxx”] | Select the element E, where the attr attribute of the element E begins with any character starting with XXX |
| E[attr$=”xxx”] | Select the element E, where the attr attribute of the element E is any character ending in XXX |
| E[attr*=”xxx”] | Select element E, where the attr attribute of element E is any character containing XXX |
Usage scenarios: On some sites, you can use an icon based on an attribute of an element that is displayed in front of the text, as shown in the following example:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
ul{
list-style-type: none;
}
a[href$="doc"]::before{
content: url(word.svg);
}
a[href$="pdf"]::before{
content: url(pdf.svg);
}
a[href$="ppt"]::before{
content: url(ppt.svg);
}
</style>
</head>
<body>
<ul>
<li><a href="doc.doc" download>Download doc files</a></li>
<li><a href="doc.pdf" download>Download PDF file</a></li>
<li><a href="doc.ppt" download>Download PPT file</a></li>
</ul>
</body>
</html>
Copy the codeIt looks like this in the browser:
Similar to array subscripts and regular expressions, ::before is a pseudo-element that is inserted before the element.
Child element pseudo-class selector
Child pseudo-class selectors refer to the child elements under an element. In CSS3, there are two major categories of child pseudo-class selectors:
1, :first-child, :last-child, :nth-child(n), :only child
2, :first-of-type, :last-of-type, :nth-of-type(n), :only of type
1, :first-child, :last-child, :nth-child(n), :only child
The first type of child element pseudo-class selector is as follows:
| The selector | instructions |
|---|---|
| E:first-child | Select the first child of the parent element, E |
| E:last-child | Selects the last child of the parent element, which is E |
| E:nth-child(n) | Select the NTH child of the parent element, or even element. The child element is E. The value of n is a number or odd or even |
| E:only-child | Select the only child of the parent element that has only one child, E |
Examples are as follows:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
ul{
list-style-type: none;
}
li{
height: 50px;
width: 300px;
}
ul li:first-child{
background-color: blueviolet;
}
ul li:nth-child(2) {background-color: coral;
}
ul li:nth-child(3) {background-color: cornflowerblue;
}
ul li:last-child{
background-color: forestgreen;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
Copy the codeIt looks like this in the browser:
To achieve the above effect, using a class or ID selector will add a lot of redundant code, which is not good for later maintenance, while using a child pseudo-class selector can separate structure and style, making THE HTML document clearer.
2, :first-of-type, :last-of-type, :nth-of-type(n), :only of type
The second type of child pseudo-class selector is as follows:
| The selector | instructions |
|---|---|
| E:first-of-type | Selects the first child element of type E under the parent element |
| E:last-of-type | Selects the last child element of type E under the parent element |
| E:nth-of-type(n) | Select the NTH child or parity element of type E under the parent element. The value of n is a number or odd or even |
| E:only-of-type | Select the unique child element of type E under the parent element, which can have more than one child element |
The difference between the pseudo-element selector of the first type and the pseudo-element selector of the second type is that the pseudo-element selector of the first type not only distinguishes the element type, but also specifies the position of the selected element in all the child elements. The second type of pseudo-element selectors distinguish element types, but specify the position of the selected element in the child element of the same class, for example:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
p.span{
display: block;
height: 50px;
width: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<p>P element</p>
<span>Span element 1</span>
<span>Span element 2</span>
</div>
</body>
</html>
Copy the codeHow it looks in the browser:
There are three content blocks that, if you want the span element 1 block to have a background color, can be written as (the second element of div, the first type of child pseudo-class selector) using the pseudo-class subelement selector:
div span:nth-child(2){
background-color: aquamarine
}
Copy the codeThe effect is as follows:
Using the second type of child pseudo-class selector, we can write:
div span:nth-of-type(1){
background-color: aquamarine;
}
Copy the codeThe effect is the same in the browser:
It can be seen that the first type selects the number of children, and the second type selects the number of children in the specified type. Generally, only the first type is used.
UI pseudo-class selector
UI pseudo-class selector refers to a pseudo-class selector that selects elements according to the state of elements. The full name of UI is User Interface, which is also the User Interface. The states of elements include: available, unavailable, selected, unselected, get focus, lose focus, etc. The common feature of UI pseudo-class selectors is that they do not work by default for a specified style, but only if the element is in a specified state. In addition, most UI pseudo-class selectors are for form elements.
UI selectors are classified into :: focus, :: Selection, : Checked, :enabled, and :disabled, :read-write, and :read-only.
1, : focus
You can use this selector to define the style to use when an element gets focus. Not all HTML elements have focus styles, and there are only two types of elements with focus and out-of-focus characteristics: form elements (buttons, checkboxes, checkboxes, text boxes, drop-down lists) and hyperlinks.
How do you tell if an element has focus? When you open a page and press Tab, the element with the focus feature is selected.
Here is an example of adding an outline to an element when it gets focus:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
input:focus{
outline: 1px red solid;
}
</style>
</head>
<body>
<div><label>Account:</label><input type="text"/></div>
<div><label>Password:</label><input type="password"/></div>
</body>
</html>
Copy the codeThe browser has the following effects:
2, : : selection
By default, when text is selected on a page, the text content is displayed with a blue background and white font. We can use the :: Selection selector to define the style of the selected text on the page. (Single colons tend to be pseudo-classes, double colons tend to be pseudo-elements).
Set selected styles for individual labels as shown in the following example:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
p::selection{
color: white;
background-color: yellowgreen;
}
</style>
</head>
<body>
<p>This is the sample text</p>
</body>
</html>
Copy the codeHow it looks in the browser:
Set the selected style for the entire page text:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
::selection{
color: white;
background-color: yellowgreen;
}
</style>
</head>
<body>
<p>This is a p</p>
<div>This is a div</div>
<span>This is a span</span>
</body>
</html>
Copy the codeAll text is selected:
3, a: checked
Checkbox Radio and checkbox both have checked and unchecked states. You can use the: Checked selector to define the style of a checkbox or checkbox when it is checked, as shown in the following example:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
input:checked{
background-color: yellowgreen;
font-size: large;
}
</style>
</head>
<body>
<form>
<label><input type="radio" name="fruit" checked/>apple</label>
<label><input type="radio" name="fruit"/>banana</label>
<label><input type="radio" name="fruit"/>orange</label>
</form>
</body>
</html>
Copy the codeThis selector is not compatible and only supported by the Opera browser, so it is easy to understand.
4. :enabled and :disabled
Some form elements, such as text boxes, checkboxes, checkboxes, etc., have both available and unavailable states, and you can also define their styles:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
input:enabled{
background-color: aquamarine;
}
input:disabled{
background-color: black;
}
</style>
</head>
<body>
<form>
<p><label>Available:<input type="text"/></label></p>
<p><label>Disable:<input type="text" disabled/></label></p>
</form>
</body>
</html>
Copy the codeHow it looks in the browser:
5, :read-write and :read-only
Some form elements, such as single-line text boxes and multi-line text boxes, can be read/write or read-only, and their styles can be defined, as shown in the following example:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
input:read-write{
background-color: aquamarine;
}
input:read-only{
background-color: black;
}
</style>
</head>
<body>
<form>
<p><label>Reading and writing:<input type="text"/></label></p>
<p><label>Read only:<input type="text" readonly/></label></p>
</form>
</body>
</html>
Copy the codeThe effect is as follows:
Other pseudo-class selectors
1, : root
Use this selector to select the root element of an HTML page, using :root{} and HTML {} are equivalent, and select the entire page.
2. : the empty
Use this selector to select an element that does not contain any child elements and content, that is, to select an empty element, as shown in the following example:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
table.tr.td{
border: 1px black solid;
}
td{
height: 50px;
width: 50px;
text-align: center;
background-color: rgb(36.133.100)}td:empty{
background-color: rgb(204.231.240);
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td></td>
</tr>
</table>
</body>
</html>
Copy the codeChange the background color of all empty elements in the table to light blue:
3, a: target
This selector can be used to select one of the page’s targrt elements. Targrt elements are elements whose IDS are used as anchor links on the page, as shown in the following example:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
:target{
color:lightcoral;
}
</style>
</head>
<body>
<div>
<a href="#div1">div1</a><br/>
<a href="#div2">div2</a>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="div1">
<h3>Title 1</h3>
<p>div1</p>
</div>
<div id="div2">
<h3>Title 2</h3>
<p>div2</p>
</div>
</html>
Copy the codeWhen an anchor link is clicked, the corresponding content changes color:
If you only want the title inside the clicked anchor link to change color, you can write:
:target h3{
color:lightcoral;
}
Copy the codeThe effect is as follows:
4, : the not ()
Use this selector to select all elements except one, as shown in the following example:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
ul{
list-style-type: none;
}
li:not(.first) {color: lightcoral;
}
</style>
</head>
<body>
<ul>
<li class="first">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</html>
Copy the codeIt looks like this in the browser:
