Css3 basic knowledge-A Review of css3 basic knowledge

Css3 basic knowledge-A Review of css3 basic knowledge

1. Attribute Selector
　　Fully matched attribute selector [id = article] {}
Example:
<Style>
Input [type = text] {border: 2px solid red ;}
</Style>

<Input type = "text">
<Input type = "text">
<Input type = "password">
Result: The border of the first two text boxes is two pixels in red.

　　Contains the Matching Element selector and a specified string.
Syntax: [attribute * = vlue] attribute refers to the attribute name, and value refers to the attribute value.
Example:
<Style>
P [id * = css] {color: red ;}
</Style>

<P id = "css_one"> css3 Reinforcement Learning </p>
<P id = "left"> css3 Reinforcement Learning </p>
<P id = "css_two"> css3 Reinforcement Learning </p>
Result: The first and third texts become red.

　　The first character matching selector, as long as the first character matches.
Syntax: [attribute ^ = vlue] attribute refers to the attribute name, and value refers to the attribute value.
Example:
<Style>
P [id ^ = c] {color: red ;}
</Style>

<P id = "css_one"> css3 Reinforcement Learning </p>
<P id = "css_two"> css3 Reinforcement Learning </p>
<P id = "mss_one"> css3 Reinforcement Learning </p>
Result: The first and second texts are changed to red, and the third colors remain unchanged.

　　The last character matching selector, as long as it matches the string at the end.
Syntax: [attribute $ = vlue] attribute refers to the attribute name, and value refers to the attribute value.
Example:
<Style>
P [id $ = e] {color: red ;}
</Style>
<P id = "css_one"> css3 Reinforcement Learning </p>
<P id = "css_two"> css3 Reinforcement Learning </p>
<P id = "mss_one"> css3 Reinforcement Learning </p>
Result: The first and third texts are red, and the second colors remain unchanged.

　　Matches all selectors that contain the word attribute.
Syntax [attribute ~ = Vlue] vlue is a word.
Example:
<Style>
P [id ~ = Css] {color: red ;}
</Style>
<P id = "cmm one"> css3 Reinforcement Learning </p>
<P id = "cmm two"> css3 Reinforcement Learning </p>
<P id = "cnn three"> css3 Reinforcement Learning </p>
Result: The first and second texts become red, and the third ones remain unchanged.

　　The match must start with a specific word attribute selector.
Syntax [attribute | = vlue] vlue is a word
Example:
<Style>
P [id | = cmm] {color: red ;}
</Style>
<P id = "cmm-one"> css3 Reinforcement Learning </p>
<P id = "cmm-two"> css3 Reinforcement Learning </p>
<P id = "cnn-three"> css3 Reinforcement Learning </p>
Result: The first and second texts become red, and the third ones remain unchanged.

2. Pseudo-class selector

　　Specify the first element in the element list: first-child
Syntax: li: first-child {}
Example:
<Style>
Li: first-child {color: red ;}
</Style>
<Ul>
<Li> css3 consolidation </li>
<Li> css3 consolidation </li>
<Li> css3 consolidation </li>
</Ul>
Result: The first li text turns red.

　　Specify the last element in the element list: last-child
Syntax: li: last-child {}
Example:
<Style>
Li: last-child {color: red ;}
</Style>
<Ul>
<Li> css3 consolidation </li>
<Li> css3 consolidation </li>
<Li> css3 consolidation </li>
</Ul>
Result: the text in the last li changes to red.
Note: p: last-child is equivalent to p: nth-last-child (1)

　　Child element of the specified type under the parent label: nth-child
Syntax: p: nth-child (){}
Example:
<Style>
P: nth-child (2) {color: red}
</Style>
<Div>
<P> css3 consolidation </p>
<P> css3 consolidation </p>
<Div> css3 consolidation </div>
</Div>
Result: the elements in the second p label become red.
<Style>
P: nth-child (2) {color: red}
</Style>
<Div>
<P> css3 consolidation </p>
<Div> css3 consolidation </div>
<P> css3 consolidation </p>
</Div>
Result: No effect.

　　Select the specified elements under the parent Tag: nth-of-type
Syntax: nth-of-type (){}
Example:
<Style>
P: nth-of-type (2) {color: red ;}
</Style>
<Div>
<P> css3 consolidation </p>
<Div> css3 consolidation </div>
<P> css3 consolidation </p>
</Div>
Result: The text in the last element turns red.

　　: Nth-child (odd), and nth-child (even) Select odd and even numbers.
Example:
<Style>
Li: nth-child (odd) {color: red ;}
Li: nth-child (even) {color: blue ;}
</Style>
<Ul>
<Li> css3 consolidation </li>
<Li> css3 consolidation </li>
<Li> css3 consolidation </li>
<Li> css3 consolidation </li>
</Ul>
Result: The text in the odd row turns red, and the text in the even row turns red.

　　The specified unique child element that belongs to the specific type of the parent element: only-of-type.
Example:
<Style>
P: only-of-type {background: # ff0000 ;}
</Style>
<Div>
<P> This is a paragraph. </P>
</Div>
<Div>
<P> This is a paragraph. </P>
<P> This is a paragraph. </P>
</Div>
Result: the background of the p element in the first div changes to red, and the background of the second div does not change color.

　　Select the specified empty element p: empty.
Example:
<Style>
Li {width: 100px; height: 20px ;}
Li: empty {background: red ;}
</Style>
<Ul>
<Li> </li>
<Li> 123 </li>
<Li> </li>
</Ul>
Result: The first li and the last li Beijing will change to red.

　　The selector can be used to select the target element of the current activity: target.
Example:
<Style>
Div {width: 300px; height: 200px; background: yellow; font: 50px/200px ""; color: # fff; text-align: center; display: none ;}
Div: target {display: block ;}
</Style>
<A href = "# div1"> div1 </a>
<A href = "# div2"> div2 </a>
<A href = "# div3"> div3 </a>

<Div id = "div1"> div1 </div>
<Div id = "div2"> div2 </div>
<Div id = "div3"> div3 </div>
Result: The div corresponding to the tag is displayed.

　　Select the enabled form element.
Example:
<Style>
Input [type = "text"]: enabled {background: red ;}
</Style>
<Input type = "text">
<Input type = "text" disabled>
Result: The first input background changes to red, and the second background does not change.

　　Select the enabled form element: disabled.
Example:
<Style>
Input [type = "text"]: disabled {background: red ;}
</Style>
<Input type = "text">
<Input type = "text" disabled>
Result: The first input background does not change color, and the second background changes to red.

　　Select selected input elements (only for single-choice buttons and check boxes)
Example:
<Style>
Input: checked {width: 30px; height: 30px ;}
</Style>
<Input type = "radio">
<Input type = "checkbox">
<Input type = "button">
Result: The first and second inputs increase, and the third inputs do not.
Example:
<Style>
. Test_checkbox,
. Test_more,
. Test_hide,
. Test_checkbox: checked ~ . Test_label. test_show {position: absolute; display: none ;}
. Test_checkbox: checked ~ . Test_more,
. Test_checkbox: checked ~ . Test_label. test_hide {position: static; display: inline-block ;}
</Style>
Css3 reinforcement learning...
<Input type = "checkbox" id = "testToggleCheckbox" class = "test_checkbox"/>
<Span class = "test_more"> pull up your sleeves and cheer up! </Span>
<Label class = "test_label" for = "testToggleCheckbox">
<Span class = "test_hide"> hide partitions </span>
<Span class = "test_show"> Expand struct </span>
</Label>
Result: Click collapse and expand to display and hide the ellipsis.

Example:
<Style>
. Test_box {width: 50%; min-width: 250px; margin: 1em auto; position: relative ;}
. Test_tab {width: 33.1%; margin-right:-1px; border: 1px solid # ccc; border-bottom: 0; float: left ;}
. Test_label {display: block; padding-top: 5px; padding-bottom: 5px; background-color: # eee; text-align: center ;}
. Test_radio,. test_tab_content {position: absolute; display: none ;}
. Test_radio: checked ~ . Test_tab_content {margin-top:-1px; padding: 1em 2em; border: 1px solid # ccc; left: 0; right: 0;
Display: block ;}
. Test_radio: checked ~ . Test_label {background-color: # fff; border-bottom: 1px solid # fff; position: relative; z-index: 1 ;}
</Style>
<Div class = "test_box">
<Div class = "test_tab">
<Input type = "radio" id = "testTabRadio1" class = "test_radio" name = "tab" checked = "checked">
<Label class = "test_label" for = "testTabRadio1"> Tab 1 </label>
<Div class = "test_tab_content">
<P> I am the content corresponding to Tab 1 </p>
</Div>
</Div>
<Div class = "test_tab">
<Input type = "radio" id = "testTabRadio2" class = "test_radio" name = "tab">
<Label class = "test_label" for = "testTabRadio2"> Tab 2 </label>
<Div class = "test_tab_content">
<P> I am the content corresponding to Tab 2 </p>
</Div>
</Div>
<Div class = "test_tab">
<Input type = "radio" id = "testTabRadio3" class = "test_radio" name = "tab">
<Label class = "test_label" for = "testTabRadio3"> tab 3 </label>
<Div class = "test_tab_content">
<P> content corresponding to tab 3 </p>
</Div>
</Div>
</Div>
Result: Click the corresponding tab to implement switchover.

　　Selector is used to select the first line of the specified selector: first-line
Add a special style to the first letter of the pseudo-element text: first-letter
Selector matching selected by the user: selection

Example:
<Style>
P: first-line {background: red ;}
P: first-letter {color: blue ;}
P: selection {background: yellow ;}
</Style>
<P> 2017 pick up your sleeves and cheer up! 2017 pick up your sleeves and cheer up! 2017 pick up your sleeves and cheer up! </P>
Result: the background of the first line changes to red, the font color of the first line changes to blue, and the selected background changes to yellow.

　Insert content before the content of the selected element: before
Insert content after the content of the selected element: after
Example:
<Style>
P: before {content: "2017.2.3 "}
P: after {content: "2017.2.5 "}
</Style>
<P> 2017.2.4 </p>
Result: The three dates are arranged in sequence.

　　The selector matches each element of an unspecified element/selector: not (selector)
Example:
<Style>
P {color: blue}
: Not (p) {color: red ;}
</Style>
<Div> 2017. </Div>
<P> 2017. </P>
<Div> 2017. </Div>
Result: The text in the div turns red.

3. Text Modifier

　　Text Set shadow text-shadow
Syntax: text-shadow: h-shadow v-shadow blur color;
H-shadow must be the position of the horizontal shadow. A negative value is allowed.
V-shadow must be the vertical shadow position. Negative values are allowed.
Optional; fuzzy distance.
Color: Optional shadow color.
Example:
<Style>
P {font-size: 35px; color: yellow; text-shadow: 2px 2px 1px red ;}
</Style>
<P> 2017 pick up your sleeves! </P>
Result: A red blur shadow is displayed.

　　Text stroke text-stroke
Syntax: text-stroke: <'text-stroke-width' >||< 'text-stroke-color'>
Stroke thickness of text in text-stroke-width
Stroke color of text in text-stroke-color
Example:
<Style>
P {font-size: 40px; color: yellow;-webkit-text-stroke: 1px red ;}
</Style>
<P> text Stroke Effect </p>
Result: A red stroke is added to the text.

　　Required text writing direction: direction
Set the text direction: unicode-bidi
Syntax: direction optional value: ltr default, text direction from left to right
The rtl text direction is from right to left, and the inberit rules are inherited from the parent element.
Example:
<Style>
P {direction: rtl; unicode-bidi: bidi-override ;}
</Style>
<P> achieve your small goals </p>
Result: achieve your small goal.
Extra text is expressed by ellipsis
Example:
<Style>
P {width: 200px; border: 1px solid #000; font: 14px/30px ""; white-space: nowrap; overflow: hidden; text-overflow: ellipsis ;}
</Style>
<P> 2017 do what you should do, and do not try to wait for a while. </P>
Result: The excess width is expressed by a ellipsis.

Demo download https://github.com/ningmengxs/css3.git