CSS3 Selectors Overview - 抹桥的博客

Attribute Selectors#

E[att^="val"]: Selects E elements whose att attribute value starts with val.
E[att$="val"]: Selects E elements whose att attribute value ends with val.
E[att*="val"]: Selects E elements whose att attribute value contains val.

Structural Pseudo-Class Selectors#

:root: The root selector, matches the root element of the document the element is in. In HTML, the root element is always <html>. :not: The negation selector, selects all elements except for the specified element. The following code will ultimately set a red background for elements with type=button.

<style>
	input:not([type="text"]){background-color: red};
</style>
<body>
	<input type='text'>
	<input type='text'>
	<input type='button'>
</body>

:empty: The empty selector, selects elements that have no content. An empty element is one that contains absolutely nothing, including whitespace. :target: The target selector, matches the target element of a fragment identifier in the document’s URL. The following code adds a click event to each <a> element; when a1 is clicked, the element with id='a1' will have a red background, and so on for the others.

<style>
	#a1:target{background-color: red}
	#a2:target{background-color: blue}
	#a3:target{background-color: yellow}
</style>
<body>
	<a href="#a1">a1</a>
	<a href="#a2">a2</a>
	<a href="#a3">a3</a>
	<div id="a1">a1</div>
	<div id="a2">a2</div>
	<div id="a3">a3</div>
</body>

:first-child: Selects the first child element of its parent. For example, ul li:first-child selects the first <li> element within a <ul>. :last-child: The opposite of the previous selector, selects the last child element. :nth-child(n): Selects one or more specified child elements of a parent. n is a parameter that can be a number or an expression. Selects <li> elements that are even-numbered (i.e., the second and fourth, with n starting from zero) within a <ul>, and sets their font color to yellow.

li:nth-child(2n){color:yellow;}
<ul>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
</ul>

:nth-last-child(n): The opposite of the previous selector, it selects specified elements by counting from the last child element of the parent. :first-of-type: Selects the first element of a specified type within its parent. For example, div p:first-of-type selects the first p element inside a div. :nth-of-type(n): Similar to nth-child(n), it selects elements of a specified type at a specified position within their parent. For example, div p:nth-of-type(3) selects the 3rd p element inside a div. :last-of-type: Similar to first-of-type, but selects the last element of a specified type within its parent. :nth-last-of-type(n): Similar to nth-of-type(n), but counts from the end of the parent’s children. :only-child: div p:only-child selects p elements that are the only child of their div parent, when there are multiple divs. Only the <li> in the first <ul> will turn orange; the <li>s in other <ul>s will remain unchanged.

li:only-child{color: orange}
<ul>
	<li>你好</li>
</ul>
<ul>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
</ul>

:only-of-type: Similar to the previous selector, but it selects child elements that are the only element of their specified type within their parent.

Other Selectors#

:enabled: In forms, elements can be in either an enabled (:enabled) or disabled (:disabled) state. This selector selects elements in the enabled state. :disabled: Similar to the previous selector, selects elements in the disabled state. :checked: Both radio buttons and checkboxes have checked and unchecked states. This selector selects buttons in the checked state. ::selection: This pseudo-element is used to match highlighted text (i.e., text selected with the mouse). By default, browsers display selected web text with a “blue background and white font.” ::selection{color:black;} changes the color of selected text to black. :read-only: Selects elements in a read-only state. This applies to elements that have readonly='readonly' (or simply readonly in HTML5). :read-write: The opposite of :read-only, selects elements in a read-write state. ::before: Used to insert content before an element. ::after: Used to insert content after an element.

Attribute Selectors#

Structural Pseudo-Class Selectors#

Other Selectors#

其他语言