Home > Developer > Web Develop
Dynamic Pseudo class Selector
Pseudo-Class selector: Everyone familiar with: ": Link" ": Visited" ": Hover" ": Active"
The pseudo-class selector of CSS3 is divided into six types:
(1) dynamic Pseudo-class selector
(2) target pseudo-class selector
(3) Language Pseudo-class selector
(4) UI pseudo-class selector
(5) Structure pseudo-class selector
(6) Negation pseudo-class selector
Note: Differences from other CSS selectors-pseudo-class selectors begin with a colon ":"
Thinking about the problem?
(1) What is the function of CSS3 pseudo-class selector?
(2) What convenience does the selected element bring?
1.1. Dynamic pseudo-class selector syntax
Dynamic pseudo-classes consist of two types:
(1) Anchor-point pseudo-class commonly seen in links
(2) for user behavior Pseudo-class
(3) Anchor pseudo-class settings follow the "love and Hate Principle love/hate", that is link->visited->hover->active
(4) IE6, IE7 and Ie8,a:link are weaker than the other 3.
1.2. Dynamic pseudo-Class selector compatibility
Note: IE6 Browser only supports link anchor points a:hover
2.1 Target Pseudo-class selector: Target element for an identifier in a URI that matches a document (page)
<style>
Div:target{background:black;color:white;}
</style>
<a href= "#title1" > title 1</a>
<a href= "#title2" > title 2</a>
<a href= "#title3" > title 3</a>
<div id= "Title1" > Content 1</div>
<div id= "Title2" > Content 2</div>
<div id= "Title3" > Content 3</div>
2.2 Target pseudo-class selector syntax
Note: The target pseudo-class selector is a dynamic selector, and the style effect takes effect only if there is a URL pointing to the matching element
2.3 Target pseudo-class selector browser compatibility
Note: The target pseudo-class selector is not supported in IE8 and previous versions, but IE users clicking the link in the directory will still jump to the corresponding title, but the title will not be highlighted; ie lower version needs to use JS
2.4 Related knowledge memory method caused by target pseudo-class selector:
About Triangle angle notation: (Unified setup transparent)
1. Up and down pointing, left and right for transparent
2. Right and left pointing, up and down for transparent
3. Where is the direction and where is transparent
Transition:property duration timing-function delay;
Property: Equivalent to the corresponding athlete
Duration: Equivalent to the target, how long to complete
Timing-function: Select the corresponding runway
Delay: How much longer do I have to wait
3.1 Language pseudo-class selectors
It is useful to use language pseudo-class selectors to match elements that use language, especially for multi-language versions of websites. You can use it to set the font style for a page based on different language versions
3.2 Language Pseudo-class selector syntax
A language pseudo-class selector is a matching element that is encoded according to the language of the element. This language information must be included in the document or associated with the document and cannot be specified from the CSS.
There are two ways to specify a language for a document:
1.<! DOCTYPE html>2.<body lang= "FR" >
The language pseudo-class selector allows special rules to be defined in different languages, which is especially handy in multi-language versions of Web sites.
E (Element): lang (language) indicates that all elements that match e are selected, and the matching element specifies the lang attribute, whose value is language
3.3 Browser compatibility
Note: For IE6, IE7 These incompatible browsers, we can refer to a style sheet that is not the same name
3.4 Combat
<body>
<style>
: lang (en) {quotes: ' "'" ';}
: lang (en) q{background:red;}
: lang (FR) {quotes: '? ' ‘?‘;}
: Lang (FR) Q{background:green;}
</style>
<P>WWF ' s goal is to:
<q cite= "http://www.wwf.org" >
Build a future where people live in harmony with nature
</q>
We hope they succeed.
</p>
4.1UI element status Pseudo class Selector
Mainly used in form form elements, in order to improve the human-computer interaction of Web pages, operating logic and the overall appearance of the page, so that the form page more personality and taste, and make the user to manipulate the page form more convenient and simple
4.2UI element State pseudo-class selector syntax
UI element states include: Enabled, disabled, checked, unchecked, get focus, lose focus, lock and standby, and so on.
HTML element form text input box, sub-enable and disable;
HTML element table single button and multi-select button, selected and unchecked;
4.3 Browser compatibility
IE9 can already fully support the UI element State pseudo-class selector
As for IE6 ~ IE8, you have to use JS Library to solve the compatibility problem
5.1 Structure pseudo-class selector
struct pseudo-class selectors are anchored to elements based on certain attributes in the document tree, such as relative positions. That is, matching specific elements through the relationship of the document tree structure, which reduces the definition of an HTML document's ID or class name, helps you keep the code clean and tidy, and gets the corresponding element from the DOM document tree.
5.2 Structure Pseudo-class selector syntax
Let you distinguish the artifact of structure pseudo-class selector!
5.3 Structure pseudo-class selector browser compatibility
5.4 parameter N in the structure pseudo-class selector
: Nth-child (N)
: Nth-last-child (N)
: Nth-of-type (N)
: Nth-last-of-type (N)
(1) parameter n is a specific value: can be any positive integer greater than 0
(2) The parameter n is the expression "N*length": N is a zero-based, length>0 Integer; a multiple of n
(3) parameter n is the expression "n+length": Select the element of >=length
(4) parameter n is the expression "-n+length": Select the element of <=length
(5) The parameter n is the expression "n*length+b": B is the offset value, which indicates that the N*LENGTH+B element is selected by the length of the element
(6) parameter n is the keyword "odd": Select Odd
(7) parameter n is the keyword "even": Select even
The ": First-of-type" selector is similar to the ": First-child" selector, where the type of the element is specified , which is used primarily to locate the first child element of a type under a parent element.
First-child Choice must be the first, but first-of-type not necessarily the first choice
6.1 Negation pseudo-class selector
Negative selector ": Not ()" is a new selector for CSS3, type ": Not ()" in jquery to locate an element that does not match the selector
6.2 Negation Pseudo-class selector syntax
Play the role of filtering content
6.3 Browser compatibility
7.1 Pseudo-elements
CSS2.1: ": First-line" ": First-letter" ": Before" ": After"
CSS3 adjusted the pseudo-elements, adding a colon ":: First-line" ":: First-letter" ":: Before" ":: After" and added ":: Selection"
browsers, both of which support both methods
(1) Pseudo-element:: First-letter: Used to select the first letter of a block of text, eg: sinking first letter
(2) Pseudo-element:: First-line: The first line of text used to select an element
(3) Pseudo-elements:: Before and:: After: does not refer to content that exists in markup, but rather where additional content can be inserted. Although the generated content does not become part of the DOM, it can also set styles, and to generate content for pseudo-elements, you also need to mate with the content property
(4) Pseudo-elements:: Selection: Used to match the highlighted text, that is, the text with the mouse to select the style "Note":: Selection only accept two attributes, one is background, the other is a color
CSS Dynamic pseudo-class selector temperature 3
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
