What is new stuff CSS3 have it? ? ?

What is new stuff CSS3 have it?

A, CSS3 attribute selector

E [attr] ----- Button [ "Disabled"] E elements with selected attributes attr

E [attr = "XX"] ----- INPUT [type = "text"] and is selected to have attr attribute property value is equal to E element XX

E [^ attr = "XX"] ----- INPUT [^ type = "text"] and select attributes attr property value with the beginning of the XX element E

E [attr $ = "XX"] ----- INPUT [$ type = "text"] having a selected attribute value and attribute attr ending XX E element

E [* attr = "XX"] ------ INPUT [* type = "text"] having a selected attribute and an attribute value attr comprising XX of the element E

Two, CSS3 pseudo class selector structure 

ul li: first-child {}   select the first label li at ul

ul li: last-child {}    select the last label in the ul li

li UL: Nth-Child ( n) {}    selected n th label li in the UL (n starts from 0)

  • When n may be a number may be keywords - the even, ODD  (interlaced color table)
  • When n is even equivalent to 2n, 2n + 1 when n is odd when the equivalent
  • When n li element in the selected multiple of 5 when 5n
  • After the selection of the n + 3 n of all three elements li
  • -N + 3 is selected when the first three elements li n is

div span: first-of-type   {} selects the first element of span type

div span: first-of-type {}    select the last element of span type

div span: nth-of-type   (n) {} selected span type n-th element

tip:  a weight of 10

 

Three, CSS3 pseudo-element selector

:: before an insert in the inside the front element

:: after insertion element after the interior element

tip:

  • before and after must have a content property
  • In front of the contents before, after the contents of the back
  • before and after creating an element, but the elements belonging to row (no size) ---->  {the display: Block '}  or {the display: inline-Block' line block within}
  • before and after the invisible elements inside just created, so we called pseudo-elements
  • Pseudo-elements and the same tag selector, a weight of 1

 

  

Blog only to record what they learn, thanks to an error message if treatise Oh!

 

Guess you like

Origin www.cnblogs.com/ruiannan/p/11879354.html