First summarize the concept of it, is based on the attributes attribute selectors to select HTML elements to apply CSS styles (such as one of your properties comply with my request, I will give you the application form). Attribute selector is set to match the style attributes of HTML elements.
First of all attribute selector example, it is this part of the code portion HTML:
<body>
<p align="center">111</p>
<p>222</p>
<p align="left">333</p>
</body>The three <p> paragraph content are 111,222,333, its properties are centered, free, left-justified.
The basic format of attribute selector: name tag [Properties required] {CSS property name: Attribute}
For example, the most basic:
Tag name [attribute]
<style>
p[align]{
color: red;
}
</style>Meaning that all <p> tags, as long as there are qualified align attribute that stained red. Run 111 and 333 results in red, 222 is black.
Tag name [= attribute 'attribute']
<style>
p[align='center']{
color: red;
}
</style>Means that all <p> tag, as long as the align attributes 'center' of the red dye. Operating results of the red 111, 222 and 333 as black.
Tag name [attribute ^ = 'attribute'] / tag name [attribute $ = 'attribute']
<style>
p[align^='c']{
color: red;
}
</style>Means that all <p> tags, align attribute 'c' at the beginning of the red dye. Operating results of the red 111, 222 and 333 as black.
Similarly, to the ^ $, when the align attributes 'c' end of the red dye.
Name tag [* = attribute 'attribute']
<style>
p[align*='t']{
color: red;
}
</style>All <p> tags, align attribute contains the string 'c' is stained red. That is 111,333 red.
Pseudo class selector
Dynamic pseudo-class selectors, I think it is an HTML element before the click, and then click on an instant and temporary hover styles of these four cases.
<body>
<div class="test">
</div>
</body>
<style>
.test{
/* 基础样式 */
width: 100px;
height: 100px;
}
.test:link{
/* 未被点击 */
background-color: grey;
}
.test:hover{
/* 鼠标悬停 */
background-color: red;
}
.test:active{
/* 鼠标点击瞬间 */
background-color: black;
}
.test:visited{
/* 点击之后 */
background-color: teal;
}
</style>Camouflage structure selector
The use of the special nature of the document structure to match the elements, such as the parent element has only one child element, and so on.
For example, the tag name: only-child case represents the class of the parent class only one of its elements.
Label name such as: only-first represents the first element of the parent class matches the class. Wherein: tag name: nth-child (3) represents the third.
For example, the tag name: only-last is the last element of the parent class matches the class. Wherein: tag name: nth-last-child (3) represents the last third.
There are many others, but the personal feeling is fancy, basically not going to use ......
Tag name: only-of-type child elements that represent unique;
Label name: first-of-type element which matches the first child;
Label name: last-of-type which matches the last child element; nth-of-type (3) Likewise
Label name: empty HTML element has no child elements represent the
State pseudo-classes
It is the state of HTML elements such as whether visible ......
Label name: enabled represent visible HTML attributes; disenabled empathy
Label name: checked to indicate selection of HTML elements such as radio buttons, checkboxes
Tag name: not () pseudo-class negative example code below, the id is not b are changed to red.
<body>
<p id="a">111</p>
<p id="b">222</p>
<p id="c">333</p>
</body>
<style>
p:not(#b){
color: red;
}
</style>
The last thing is more fun target pseudo-class selectors
If you could implement a function: basic aim of the above in HTML, aiming to jump to the content when the red background.
Like this, click "Navigate", jump to the content 111, and displays a red background.
Click on "Navigator 3", jump to the content 333, and displays a red background.
That's where "tag name: target", the code looks like this:
<body>
<a href="#a">导航1</a>
<a href="#b">导航2</a>
<a href="#c">导航3</a>
<p id="a">内容111</p>
<p id="b">内容222</p>
<p id="c">内容333</p>
</body>
<style>
p:target{
background-color: red;
}
</style>
