Css_2 and 3

#css2中的选择器
1. Element Selector
* Wildcard selector, HTML type selector, ID selector, class selector
2. Relationship Selector
E F (includes selector), E>f (sub-selector), e+f (f selector adjacent to E Element)
3. Pseudo-Class selectors
E:link (link pseudo-class selector-default link)
e:visited (link pseudo-class selector-clicked link)
E:hover (User action Pseudo-class selector-mouse over)
E:active (User action Pseudo-class selector-mouse click)
E:focus (User action Pseudo-class selector-past cursor)
E:lang () (: lang () pseudo-class selector-match e element with special language)
4. Property Selector
E[att] (select the e element with the ATT attribute)
E[att= "Val"] (select e element with att attribute and attribute value equal to Val)
E[att~= "Val"] (Select the list of words with the ATT attribute and the attribute value as a space delimited, where one equals the e element of Val < The popular saying attribute value is not unique when selecting >)
E[att|= "Val"] (select the e element with the ATT attribute with the attribute value starting with Val and the string separated by the connector "-")
5. Pseudo-Object selectors
E:first-letter (sets the style of the first character within the object)
E:first-line (sets the first row style within the object)
E:before (Sets the content that occurs before the object, based on the logical structure of the object tree.) Used in conjunction with the Content property)
E:after (Sets what happens after the object, based on the logical structure of the object tree). Used in conjunction with the Content property)

#css3 New Selector
1. Relationship Selector
E~f Brother Selector (select "All brothers tag F" after "e-tag") < not found with e+f >
2. Structure pseudo-Class selector
E:first-child (selected when E tag is the first child in all brothers) = same effect as E:nth-child (1)
E:last-child (selected when the E tag is the last child in all brothers)
E:nth-child (int x child) (selected when the first X child of all siblings is the E tag)
E:nth-child (even) even (starting from 1) = E:nth-child (2n)
E:nth-child (odd) odd (starting from 1) = E:nth-child (2n+1)
E:nth-last-child (int countdown x Child)-exactly the opposite of E:nth-child
E:only-child (only when the e tag is an only child)

---------------------------------------------
Of-type series such as: E:child-of-type, only the E-label type of brothers plus 1234. tag to select
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type ()
E:nth-last-of-type ()

html:root{} has the same effect as html{}

3.UI element status Pseudo class Selector
input:disabled style of disabled type form
input:enabled style of the enabled type form
Input:checked the style of the selected form item
4. Property Selector
E[attr^= "val"] attribute value begins with Val
E[attr$= "val"] attribute value ends in Val
E[attr*= the Val character is present in the "Val"] property value.
5. Pseudo-Object selectors
#以下四种虽然是 "::", but same as the previous version of CSS ":" Single colon
E::first-line the first string inside the e tag (can be wrapped for <br/> or wrapped in a container's width)
The first character inside the E::first-letter e tag
E::before (Sets the content that occurs before the object, based on the logical structure of the object tree.) Used in conjunction with the Content property)
E::after (Sets what happens after the object, based on the logical structure of the object tree). Used in conjunction with the Content property)

?

1234567

/* example          * a[href$=" rar "]:: after{          *  content:url (.. /images/rar.jpg)          *}          Code class= "CSS Comments" >* #content: "You can also output the string"           * effect: the href attribute of a tag is appended with the label after the end of the RAR tag          * */

E::selection e tags When text is selected background color (default is dark blue) #不支持FF, support Chrome
#css3 New Properties
Text properties in the 1.css1&2
Text-indent css1 Text Indent
Letter-spacing the spacing between css1 text
Word-spacing Css1 The number of empty numbers inserted between words
Vertical-align Css1/css2 Vertical Alignment
White-space css1 whitespace processing method (corresponding value: normal | pre | nowrap | pre-wrap | pre-line)
#direction Css2 Text Flow direction
#unicode-bidi Css2 is used to display text that is read in different directions on the same page. Use with the Direction property

?

12345

/* such as: #b {                             DIRECTION:RTL; (writes the document flow from and to the left)                           unicode-bidi: Bidi-override;                       }              */

Line-height css1 Row Height
New Text properties in 2.CSS3
Text-overflow CSS3 whether to use an ellipsis tag (corresponding value: clip|ellipsis)
Text-align CSS1/CSS3 Text Alignment
Text-transform css1/css3 text case (corresponding value: lowercase|uppercase|capitalize)
Text-decoration CSS1/CSS3 [Composite Properties] text decoration, underline, strikethrough
Text-decoration-line CSS3 The position of the text trim line
Text-decoration-color Color of CSS3 text trim lines
Text-decoration-style CSS3 The shape of a text trim line
Text-shadow CSS3 text text shadow and blur effect (corresponding value: (left,top[, Blur degree Px][,rgba (r,g,b, transparency) |rgb (R,G,B) | #000000])-can be separated by "," comma to continue writing the same Format to multi-shadow effect
Text-fill-color CSS3 Text Fill color #需要加浏览器私有前缀 such as:-webkit-text-fill-color:red;
Text-stroke CSS3 [Composite property] text strokes #需要加浏览器私有前缀 such as:-webkit-text-stroke:1px red;
Text-stroke-width the thickness #需要加浏览器私有前缀 css3 text strokes such as:-webkit-text-stroke-width:1px;
Text-stroke-color the color of CSS3 text strokes #需要加浏览器私有前缀 such as:-webkit-text-stroke-width:red;

?

123456

/* 浏览器私有前缀          * IE:-ms-          * 谷歌、苹果、猎豹、360急速(webkit内核)：-webkit-          * opera:-o-          * firefox:-Gecko-          * */

Tab-size CSS3 tab (tab) length #<pre> label inside to see the effect (TAB-SIZE:30) Google Chrome does not support px pixels
Word-wrap CSS3 whether to break a career change (corresponding value: normal | break-word) #一般英文单词之类的中间没有空格的字符一长串下来不会自动换行 When the current row exceeds the bounds of the specified container, and will exceed the limit width, so use the word- Wrap:break-word; style to force line wrapping
3.CSS3 New color representation
RGBA (r,g,b,alpha<0-1>)
HSL (h,s,l)-Color wheel mode
H:hue (Hue)
0 (or 360) indicates red, 120 is green, and 240 is blue. The color value range is: 0-360
S:saturation (saturation)
Value range: 0.0%-100.0%
L:lightness (Brightness)
Value range: 0.0%-100.0%
#如: HSL (360,50%,50%) For the impure red
HSLA (H,s,l,a)
A:alpha (transparency)
Value range: 0-1
Opacity
opacity:0.3, between #取值为0-1
Filter:alpha (opacity) is limited to ie# value of 0-100-in order to be compatible with IE browser

Css_2 and 3