CSS uncommon problems all in one place_html/css_WEB-ITnose

Catch all the uncommon CSS issues

Pseudo classes and pseudo elements

Pseudo classes

What is a pseudo class? A class is not a class, it is not a class declared by itself (do not write Styles also exist).

The understanding of pseudo elements lies in the hyperlinks on early web pages. The links (anchors) are underlined. After clicking, the link turns purple and changes color when the mouse is hovered over it.

Link pseudo-class

css2.1 defines two pseudo-classes that only apply to hyperlinks (all a elements with href attributes).

伪类名 描述

:link	:visited
指示作为超链接(href)并指向一个*未访问*地址的所有的锚(注意不是所有的锚,是未访问过的,但是有的浏览器可能不是这么做的)	指示已访问过的所有的锚

Dynamic pseudo-class

伪类名 描述

:focus	当前拥有焦点(可用tab切换)的元素,能接受输入或能被激活的元素
:hover	鼠标正停留在上面的元素(不只限于超链接)
:active	指示被输入或激活的元素(不只限于超链接)

Dynamic pseudo-classes can be applied to any element and are useful for non-link style applications.

Select the first child element

There is another static pseudo-class: first_chilid to select the first child element of the element.

<div> 

 <p></p> 

 <ul> 

 <li href='abc'></li> 

 <li></li> 

 </ul> 

</div> 

So

div:first_child A child element is e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3

ul:first_child The first child element is 9f01f4a91053917419bfe531e856d072bed06894275b65c1ab86501b08a632eb

Combine pseudo-classes

In CSS2.1, pseudo-classes can be used in combination with the same selector.

a:link:hover { }

a:visited:hover { } 

a:hover:visited { } 

The order is not important, the effect is is the same.

Pseudo-elements

Pseudo-element selectors

Just like pseudo-classes specify phantom classes for anchors, pseudo-elements enable the entry of imaginary elements in the document. So as to get a certain effect.

Four pseudo-elements are made in CSS2.1, setting the first letter style (:first-letter), setting the first line (:first-line), setting the before ( :before), after setting (:after).

Speaking of, :after, :before, are "essential" in the content attribute.

Moreover, in CSS3 , the pseudo element has been upgraded from one: to ::, which is intended to distinguish it from the pseudo class, but it is still compatible with single colon. The official recommendation is to use two colons.

Attribute selector

h1[class] { color:red; } 

a[href][title] { font-weight:bold; } 

Choose based on specific attribute values

a[href="http:a.com"] 

planet[moons="1"] 

This product can match this simple attribute value.

For example,

<p class="urgent warning "> </p> 

Be careful when using it. Its attribute matching is not as natural as multi-category selection. It is actually a complete string match. Therefore, there must be spaces.

If it is not convenient to use , you can use the following

to select based on some attribute values ​​

For the above example, you can use it like this:

p[class~="warning"] 

I believe you have discovered that this product can Alternative class selector.

There is no need to be so pretentious with single-category selection. Multi-category selection is very necessary.

Did you know that in versions before IE7, IE cannot be correct? Handling multi-class selectors.

<p class="urgent warning "> </p> 

p.warning.help {} 

It can usually be thought that this selector will only match those p elements whose class contains warning and help.

But before IE7 In this version, p.warning can be used, but p.waring.help will match all p elements with class help, because help appears last in the selector, and there is no warning at all.

So, using attribute selectors, you can circumvent this problem.

Specificity of the selector

The specificity of the selector is determined by the components of the selector itself. The specificity value is expressed as 4 A part, in the shape of 0.0.0.0, although it is not a number, it is treated as a number.

The particularity of a selector is as follows:

1. For each # ID given in the selector Attribute value, add points 0,1,0,0;
2. For the class attribute value (.class), attribute selection (xxx [atr='']) or pseudo-class given in the selector, add Points 0,0,1,0
3. For each element (htm body div span) and pseudo-element given in the selector, add 0,0,0,1. According to the documentation, pseudo-elements get extra points Starting from CSS2.1
4. Combiners ( ,,>, and are not familiar at all) and wildcards (*, the contribution value to specialness is 0,0,0,0).

Too much is a waste, here are examples

选择器 特殊性获值

h1 { }	0,0,0,1
p em {}	0,0,0,2
.grap { }	0,0,1,0
*.grap { }	0,0,1,0
p.bright em.dark { }	0,0,2,2
#id { }	0,1,0,0
div#header *[attr] { }	0,1,1,1

After seeing these, the first of these four has never met, who is so good? Inline style, written in the html line.

Counting these, it is used for multiple selections When players compete for the same element, see who has the stronger ability.

Not finished, to be continued...