Define a style for a link
A:link indicates that the link has not been visited, the mouse has not been crossed and clicked
A:visited represents a link that has been visited
A:hover represents a link to the mouse stroke
A:active means the active link, that is, the moment the mouse clicks on the link
Note that the above four linked pseudo classes in the use of a certain order, that is the order listed above, otherwise do not see the effect. It can be simply written as Love (contains link and visited initials) and hate (contains the first letters of hover and active).
Define a style for a paragraph
: First-letter creates a style for the first character in a row
: First-line creates a style for the first line of a paragraph
More pseudo classes and pseudo elements
: Before can add content before the specified element. For example, there is a paragraph p, you want to add "hello" in front, you can use pseudo class to express P:before {content: "Hello";}
: After and: Before, just the actual elements of the following add content.
But IE6, IE7 does not support the content attribute.
: First-child selects the first child element of another element, which can easily cause confusion. For example, there is the following code:
<ul>
<li> First line </li>
<li> Second Line </li>
<li> Third line </li>
</ul>
<p>
<ul>
<li> First line </li>
<li> Second Line </li>
<li> Third line </li>
</ul>
</p>
Li:frist-child will then select the first Li tag under all the UL tags, that is, the Li tag with the top two contents as the first line, not the first child element of the Li tag.
: Focus this pseudo element is similar to the link: hover, except that the hover is dedicated to the link, and this can be used for other elements that represent the style that should be when the element is focused
Advanced Selector
Child Selector
">" can be used as a child selector. You can use this symbol when you want to select a child element of an element. For example, there is the following code:
<p>
<ul>
<li> First Level </li>
<li>
<ul>
<li> level II </li>
</ul>
</li>
</ul>
</p>
P>ul will only choose the first UL tag, not the second UL tag, because it is not a child element of the P tag, but a child of the Li tag. If you want to reach the selection of these two UL tags, can be p ul. All the UL tags below the P tag will be selected. This form selects all descendant elements below the P tag.
Sibling Selector
"+" can be used as a sibling selector. In HTML, a label that appears close to another label is called a neighboring sibling tag, such as:
<body>
<p> paragraph </p>
</body>
The
P tag is adjacent to the H1 tag, so the P tag is a H1 sibling tag that can be selected by H1+p. The
Property selector
, in the property selector, contains the properties to select, such as
Img[title]
, so that all the IMG tags with the title attribute are selected, and those without the title tag will not be selected. [] before parentheses can make any valid selector. A property in the
Property selector can also have a value. For example, many form elements have the same forms, such as <input type = "Text"/> and <input type = "checkbox"/>, then Input[type = "Text" Allows you to select only the text box.
Some other property selectors are:
^= lets you match attributes "to ... Start tab, such as: a[href^= "http://" matches all links that begin with http://.
$= lets you match attributes "to ... End of the label, such as: a[href$= ". com"] matches all links ending with ". com".
*= lets you match a label that contains a value for a property, such as: a[href*= "Renren" matches all the links in the href that contain "Renren."
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
