CSS3 Complex selector + content generation +css Hack

1. Complex Selector
2. Content Generation
3, multi-column
4. CSS Hack (browser Compatibility)
=======================================
1. Complex Selector
1. Brother Selector
1. features:
1. Match elements by positional relationships (peer)
2, can only look back, can not look forward
2. Brother Selector-adjacent Brother Selector
1, What is the neighboring brothers
The elements that are close together, called neighboring brothers
<div id= "d1" ></div>
<p id= "p1" ></p>
<span id= "span" ></span>
2. grammar
Selector selector 1+ Selector 2
Ex
#d1 +p{color:red;}
3. Brother Selector-universal Brotherhood Selector
1, What is the General brothers
All behind
2. grammar
Selector selector 1~ Selector 2
Ex
#d1 ~p{color:green;}
#d1 ~.bluecolor{color:blue;}
2. Attribute Selector
1. attribute Selector
Allows you to match elements of a page with the attributes and their values that are included with the element
Ex: matches all text boxes in the page (input elements that match all type=text in the Page)
2. grammar
[attr= value]
3, detailed
1. [attr]
Attr: represents a specific property name
Function: matches the element with the attr attribute
Ex
[id]: matches all elements of the page with ID attributes
2, elem[attr]
Elem: represents a specific element in a page
Ex
Div[id]: matches all DIV elements with ID attributes in the page
3. [attr1][attr2] ...
Function: matches the element with the ATTR1 attribute and also the ATTR2 attribute
Ex
P[id][class]: p element with id attribute and class attribute on match page
4. [attr=value]
Value: represents a specific value
Function: matches all elements of the Attr property value
Ex
input[type=text]
5. [class~=value]
Role:
1, used in the Multi-Class selector
2. The match class attribute value is a space-delimited list of values, and value is an element of a separate value in the list of values
6. [attr^=value]
^=: to ... As a start
Function: match the attr attribute value to the starting element as value
7. [attr*=value]
*=: contains ... Character
Function: matches an element of the Attr property value that contains the value character
8. [attr$=value]
$=: to ... As the end
Function: match the attr attribute value to the end element as value

All values in the property selector can be caused by using "" or "
[class= "c1"]
[class= ' C1 ']
[class=c1]
3. Pseudo-class Selector
1. Target Pseudo-class
1. function
Highlight an active HTML anchor element
2. grammar
Elem:target
2. Element State Pseudo-class
1. function
The matching element is enabled, disabled, selected state
Primarily applied on form controls
2. grammar
1,: enabled
Match each element that is enabled (not Disabled)
2,:d isabled
Match each element that is disabled
3,: checked
Match each selected element (radio,checkbox)
3. Structure Pseudo-class
1. function
Match elements through structural relationships between elements
2. grammar
1,: First-child
Matches the first child element belonging to its parent element
Ex
td:first-child{color:red;}
2,: Last-child
Match the last child element that belongs to its parent element
Ex
td:last-child{color:green;}
3,: Nth-child (n)
Matches the nth child element that belongs to its parent element
4,: Empty
Match elements with No child elements
Note: You cannot also include text
5,: Only-child
Match a unique child element that belongs to its parent element
<div id= "d1" >
<p id= "p1" ></p>
</div>
4, Negative Pseudo-class
1. function
Exclude elements that match the criteria selector
2. grammar
: Not (selector)
Ex
#tbl Td:not (: First-child) {
color:red;
}
Match: all remaining columns except the first column of each row
4. Pseudo Element Selector
Pseudo-class: matches the different states of the element, matches the element
Pseudo-element: matches some part of an element
1,: First-letter or:: First-letter
Matches the first character of an element
2,: First-line or:: First-line
Matches the first line character of an element
3,:: selection
Match the part selected by the user

: The difference with::
1.:
Can represent both Pseudo-class selectors
can also represent Pseudo-element selectors (CSS2)
2,::
Representing Pseudo-element selectors in CSS3
As far as possible: to use, that is, the Pseudo-class also represents a pseudo-element
2. Content Generation
1. Pseudo element Selector
1,: before or:: before
Before matching the content area of an element
<div> (: Before) This is a div</div>
2,: after or:: after
After matching the content area of an element
<div> This is a div (: after) </div>
2. properties
Properties: Content
Value:
1. string: Plain Text
Use "" to cause

Content: "lines:";
2. image: URL ()
Content:url (xxx.jpg);
3. counter

Demo
Zi Yue: Learning and time learning, joy!
-analects

<span> Learning and Shizhi </span>
<span> have friends from afar </span>
3, the problem solved
1. The height of the parent element of the floating element
. clear:after{
Content: "";
display:block;
clear:both;
}

<div class= "clear" ></div>
2, margin Overflow
#d2: before{
Content: "";
display:table;
}
4. Counter
1. What is a counter
Dynamically generate an ordered set of numbers and insert them into an element using CSS
2. grammar
1. properties-counter-reset
1. function
Declaring or resetting counters
2. grammar
Counter-reset: initial value of first name;
Counter-reset: Name 1 value 1 Name 2 value 2;
Attention:
1, the initial value can be omitted to write, the default is 0
2, cannot be placed in the elements used to declare, in most cases, you can declare the counter on the use of elements of the parent element (combined with practical CONSIDERATIONS)
2. properties-counter-increment
1. function
Specify increments for each occurrence of the counter
That is, each occurrence of the value of the counter change range
2. grammar
Counter-increment: name Increment 1;
Counter-increment: Name 1 increased by 1 2 by 2;

Note:
1, increment values can be positive or negative, or you can omit
as positive: increment
negative: decrement
omit: default increment is 1
2, which element uses counter, which element sets counter increment
3, function-counter ()
1, role
in the specified element, use the value of the counter
must be used with the content property
content to Match: before or: after using
2, syntax
xx:before{
Content:counter (name);
}

demo:
1, Web Basics (c1)-declaring C2 Counter
1.1 Basic 1 (c1.c2)
1.2 basic 2 (c1.c2)
1.3 Basic 3 (c1.c2)
2, HTML QuickStart (c 1)-C2 Reset to 0
2.1 Getting Started 1 (c1.c2)
2.2 Getting Started 2 (c1.c2)
3, text in Web pages (c1)-c2 reset to 0
3.1 Text 1 (c1.c2)
3.2 text 2 (c1.c2)
3, Multicolumn
1, Syntax
1, delimited column
properties: column-count
value: number
2, column interval
property: column-gap
value: px value
3, column Rule
Function: define the line style between each two columns
properties: column-rule
: width style color
2, compatibility
Chrome & Safari:
-webkit-column-count :
-webkit-column-gap:
-webkit-column-rule:
Firefox:
-moz-column-count:
-moz-column-gap:
- Moz-column-rule:
4, css Hack
1, principle
Use CSS Property precedence to resolve compatibility issues
2, CSS Hack implementation
1, CSS class internal Hack
Add a prefix before or after a style property name or value to identify different browsers
2, selector hack
Add prefixes before selectors to identify different browsers
*: IE6 recognition
*+: IE7 recognition

div{
background-color:red;
}

/* The following browsers can only be recognized in IE6 */
*div{
background-color:green;
}
/* The following browsers can only be recognized in IE7 */
*+div{
background-color:blue;
}
3. HTML header reference hack
Using HTML conditional annotations to determine browser version

CSS3 Complex selector + content generation +css Hack