如果 E 是一个目标还没有访问过(:link)或者已经访问过(:visited)的超链接的源锚点时匹配元素 E 。(link 伪类)
E:active E:hover E:focus
在确定的用户动作中匹配 E 。(动态伪类)
E:lang(c)
如果类型为 E 的元素使用了(人类)语言 c (文档语言确定语言是如何被确定的)，则匹配该元素。(:lang() 伪类)
E F
如果一个元素 E 直接在元素 F 之前，则匹配元素 F 。(临近选择器)
E[foo]
匹配具有”foo”属性集(不考虑它的值)的任意元素 E 。(属性选择器)
E[foo="warning"]
匹配其“foo”属性值严格等于“warning”的任意元素 E 。(属性选择器)
E[foo~="warning"]
匹配其“foo”属性值为空格分隔的值列表，并且其中一个严格等于“warning”的任意元素 E 。(属性选择器)
E[lang|="en"]
匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 E 。(属性选择器)
DIV.warning
仅 HTML。用法同 DIV[class~="warning"]。(类选择器)
E#myid
匹配 ID 等于“myid”的任意元素 E 。(ID 选择器)
我们用下面的例子来解释“父元素”、“子元素”、“父/子”及“相邻”这几个概念。
这是是h1的内容
这是一个段落p的内容！这里是strong的内容这是一个段落p的内容！
From the above code, we can find this relationship:
h1 and p are both "sons" of div, and they form a "parent/child" relationship with div respectively.
h1, p, strong are all "child elements" of div. (All three are contained within a div)
div is the "parent element" of h1 and p.
strong and p form a "parent/child" relationship, and the "parent element" of strong is p .
However, the relationship between strong and div is not a "father/son" relationship, but a "grandparent-grandson" relationship, but strong is still the "child (grandson) element" of div.
div is the "ancestor" of h1 p strong, and the three are the "child (grandson) elements" of div.
h1 and p are adjacent.
Inherit the above example to demonstrate the relationship between E and F: If we need to change the content of strong to green, what methods can we use?
div strong {color:green;}
p > strong {color:green;}
div > strong {color:green;}
Proximity selectors and universal selectors: Universal selectors are represented by an asterisk "*" and can be used to replace any tag.
Example:
h2 * { color:green }
2. Introduction to selector classification
1. Wildcard selector
Syntax:
* { sRules }
Description:
wildcard selector. All types of single objects in the selected document tree (DOM).
If the wildcard selector is not the only component of a single selector, the "*" can be omitted.
Example:
*[lang=fr] { font-size:14px; width:120px; }
*.div { text-decoration:none; }
2. Type selector
Syntax:
E { sRules }
Description:
Type selector. Use the document language object (Element) type as the selector.
Example:
td { font-size:14px; width:120px; }
a { text-decoration:none; }
Pseudo class can be seen as a special class selector that can be automatically recognized by browsers that support CSS. Its greatest use is that it can define different style effects for links in different states.
1. Syntax
The syntax of pseudo-class is to add a pseudo-class (pseudo-class) to the original syntax:
selector:pseudo-class {property: value }
(selector: pseudo-class {attribute: value})
Pseudo-classes are different from classes. They are already defined by CSS and cannot be arbitrarily used with other names like class selectors. According to the above syntax, it can be interpreted as the style of the object (selector) in a special state (pseudo-class).
Class selectors and other selectors can also be mixed with pseudo-classes:
selector.class:pseudo-class {property: value}
(selector.class :pseudo-class {attribute: value})
2. Anchor pseudo-class
The most commonly used ones we use are the 4 pseudo-classes of a (anchor) elements, which represent the 4 types of dynamic links Different states: link, visited, active, hover (unvisited link, visited link, active link and mouse over link). We define different effects for them respectively:
（ In the above example, the link is red without underline when it is not visited, green without underline when accessed, blue and underlined when the link is activated, purple and underlined when the mouse is on the link)
Note: Sometimes this link has an effect when the mouse points to it before accessing it, but has no effect when the mouse points to the link again after the link is accessed. This is because you put a:hover in front of a:visited. In this case, because the latter one has a higher priority, the effect of a:hover will be ignored when the link is accessed. Therefore, according to the stacking order, when we define these link styles, we must write them in the order of a:link, a:visited, a:hover, and a:actived.
3. Pseudo-class and class selectors
By combining pseudo-classes and classes, you can create several sets of different link effects on the same page. For example, we define a The group link is red and blue after visiting; the other group is green and yellow after visiting:
In addition, CSS2 also defines the first word and first line ( First-letter and first-line) pseudo-classes can set different styles for the first word or first line of elements.
Look at this example below. We define the size of the first word of the text in the paragraph mark to be 3 times the default size:
……
这是一个段落，这个段落的首字被放大了。
我们再定义一个首行样式的例子：
……
这是段落的第一行
这是段落的第二行
这是段落的第三行
(In the above example, the first line of the paragraph is red, and the second and third lines are the default color)
Note: The pseudo-classes of the first word and first line need to be supported by IE5.5 or above. .
1. Comparison of Block and inline elements
All HTML elements are between block and inline one.
The characteristics of the block element are:
always starts on a new line;
Height, line height and top and bottom margins can all be controlled;
The default width is 100% of its container, unless a width is set
