This is the 15th day of my participation in the August More Text Challenge
CSS3 new selector is actually in CSS2 selector on the basis of the increase of some, the large type remains the same. The specific additions are as follows
- New relationship selectors:
E + F E ~ F
- Property selectors added:
E[attr ~="val"] E[attr |="val"] E[attr ^="val"]
E[attr $="val"] E[attr *="val"]
- New pseudo-element selectors
E::placeholder E::selection
- Pseudo class selector added
E:not(s) :root E:target
E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n)
E:first-of-type E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-of-last-type(n)
E:empty E:checked
E:enabled E:disabled
E:read-only E:read-write
Above is CSS 3 new selectors, you can see is the relationship between selector, attribute selectors, added some pseudo-classes and pseudo elements, think about, too, in the case of categories is not new, really can only be added in this a few places, it can’t be in the id selector, tag selector, wildcard selector, wait for the new class selectors.
Let’s break it down one by one:
E + F represents the next sibling node that meets the condition
<head>
<style>
div + span{
color: #f00;
}
</style>
</head>
<body>
<div>div</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
Copy the codeNote: the selected elements are adjacent to each other. If you put a P element under the div in the preceding example, you will not be able to select a span. 2. E ~ F indicates some sibling element nodes that meet the conditions
<head>
<style>
div ~ span {
color: #f00;
}
</style>
</head>
<body>
<span>span</span>
<div>div</div>
<span>span0</span>
<p>p</p>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
Copy the codeNote: only siblings are selected, that is, only brothers are selected, not brothers.
E[attr ~="val"] indicates that the attribute name is attr and the attribute value contains a separate element of val
<style> span[class~='a'] { color: #f00; } </style> </head> <body> <span class="a">span0</span> <span class="b">span1</span> <span class="a b">span2</span> <span class="aaa bbb">span3</span> </body>Copy the codeNote: the attribute value must be independent, if class=”ab” is not selected in the above example.
- E [attr | = “val”] said properties, called attr attribute values begin with val or begin with val – element
<head>
<style>
span[class|='a'] {
color: #f00;
}
</style>
</head>
<body>
<span class="a">span0</span>
<span class="a-test">span1</span>
<span class="b-test">span2</span>
<span class="ab-test">span3</span>
</body>
Copy the codeNote: start with what or what plus –
E[attr ^="val"] represents the element whose attribute name is attr and whose attribute value begins with val
<head>
<style>
span[class^='a'] {
color: #f00;
}
</style>
</head>
<body>
<span class="a">span0</span>
<span class="a-test">span1</span>
<span class="b-test">span2</span>
<span class="ab-test">span3</span>
</body>
Copy the codeE[attr $="val"] represents the element whose attribute name is attr and whose value ends in val
<head>
<style>
span[class$='test'] {
color: #f00;
}
</style>
</head>
<body>
<span class="a">span0</span>
<span class="a-test">span1</span>
<span class="b-test">span2</span>
<span class="ab-test">span3</span>
</body>
Copy the codeE[attr *="val"] indicates the element whose attribute value of the attr attribute contains val
<head>
<style>
span[class*='t'] {
color: #f00;
}
</style>
</head>
<body>
<span class="a">span0</span>
<span class="a-test">span1</span>
<span class="b-test">span2</span>
<span class="ab-test">span3</span>
</body>
Copy the codeNote: the entire attribute value should be included anywhere.
Pseudo classes and pseudo elements are added further down the list
Here is a brief description of pseudo elements and pseudo classes, many people are easy to confuse:
A pseudoclass represents a state of the selected element
A pseudo-element represents a portion of the selected element
8. Pseudo elements: E::placeholder represents placeholders for selected elements
<head>
<style>
input::-webkit-input-placeholder {
color: # 999;
}
input:-ms-input-placeholder {
/* IE10+ */
color: # 999;
}
input:-moz-placeholder {
/*Firefox4-18 */
color: # 999;
}
input::-moz-placeholder {
/* Firefox19+ */
color: # 999;
}
</style>
</head>
<body>
<input type="text" placeholder="Placeholder" />
</body>
Copy the codeWhen a product is not displayed, it shows how a placeholder is selected in the input element
9. E:: Selection represents the selected part of the element, and sets the style for that part
<head>
<style>
span::selection{
color: #f00;
background-color: antiquewhite;
}
</style>
</head>
<body>
<span class="a">span0</span>
<span class="a-test">span1</span>
<span class="b-test">span2</span>
<span class="ab-test">span3</span>
</body>
Copy the codeHere are the new pseudo classes for C3
E: Not (s) indicates that the selected elements do not contain some elements, and some elements that do not meet the conditions are excluded
<head>
<style>
span:not([class="a"]) {color: #f00;
}
</style>
</head>
<body>
<span class="a">span0</span>
<span class="b">span1</span>
<span class="c">span2</span>
<span class="d">span3</span>
</body>
Copy the code:root Indicates the root tag in HTML documents and the root tag in XML
<head>
<style>
:root.body{
background-color: #f00;
height: 100%;
}
</style>
</head>
<body>
<span class="a">span0</span>
<span class="b">span1</span>
<span class="c">span2</span>
<span class="d">span3</span>
</body>
Copy the codeSetting the height of the root tag to 100% inherits the viewport height of the document
E:target represents the element marked by the anchor point of the A tag in the selection element
<head>
<style>
div:target{
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
</head>
<body>
<a href="#test">Am I</a>
<div id="test"></div>
</body>
Copy the codeE: First-child means someone's first child
<head>
<style>
span:first-child{
color: #f40;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div>
<p>p</p>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
Copy the codeNote: The selected element must be someone else’s eldest child, and will be influenced by other types of elements. In the example above, the first son under the second div is p, so the span:first-child cannot be selected because it is the second son.
E:last-child: Indicates that the selected element is the last child of someone else
<head>
<style>
span:last-child{
color: #f40;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<p>p</p>
</div>
</body>
Copy the code:last-child Must also be the last child of someone else, affected by other element types, and not selected if it is followed by another element type.
E:only-child indicates that the selected element is the only child of someone else
<head>
<style>
span:only-child{
color: #f40;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>
<span>1</span>
<i>i tag</i>
</div>
<div>
<span>1</span>
</div>
</body>
Copy the codeE:nth-child(n) indicates the number of children of the selected element. N starts at 1, but as an expression it starts at 0 and is affected by other sibling elements
<head>
<style>
p:nth-child(2n+1) {color: #f40;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<div>
<span>span</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</body>
Copy the codeE: nth-last-Child (n) is similar to :nth-child(n), where the selected element is the penultimate child of someone else
<head>
<style>
span:nth-last-child(1) {color: #f40;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<span>span</span>
</div>
</body>
Copy the codeThe penultimate element is not selected if it is not of that type.
E:first-child E: last-Child E:only- Child E: nth-Child (n) E: nth-last-Child (n) is affected by other types of elements. This is not so good, but the next pseudo-class, which has five methods and is not affected by other types of elements, is much more useful.
E:first-of-type indicates that the selected element is someone else's first eldest child of the type. That is, the first child element of type E of the parent element is matched
<head>
<style>
p:first-of-type{
color: #f40;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>
<span>span</span>
<p>pppp</p>
</div>
</body>
Copy the codeNot affected by other types of elements, equivalent to finding the number of elements under this type. The following ones are similar
-
E:last-of-type Selects the penultimate of all E child elements under the parent element. -
E:only of type selects the only child element E among all the children of the parent element. -
E:nth-of-type(n) indicates the number of E elements among all E children of the selected parent element -
E:nth-of-last-type(n) indicates the penultimate E element of all E children of the selected parent element -
E:empty indicates that the content in the selected element is empty, or the content is only the element of the comment node. Notice whether there is an attribute node or not
<head>
<style>
p:empty{
width:100px;
height: 14px;
background-color: cadetblue;
}
</style>
</head>
<body>
<p></p>
<p><! -- there is a comment node --></p>
<p>P with content</p>
<p class="have-attr-p"></p>
</body>
Copy the codeE: Checked Represents the E element of the checked state, such as checkboxes and checkboxesE: Enabled Indicates the elements that can be used normally among the selected elementsE:disabled Indicates the disabled elements in the selected elementsE: Read-only The selected element for which readonly="readonly" is setE:read-write Indicates the readable and writable elements of the selected E element