CSS Fourth hours

1, special selector,

* Used to match any label

> relationships for specifying parent-child nodes

<style> #d1 >p{color: #F00;} </style>
<div id= "d1" ><p> test test test </p></div>

E+f adjacent to the selector, matching E with the sibling element F immediately following the E element

E~f sibling element F after matching E

2, a[title]{} to set the style for the A element that has the title property set

A[title= ""]{} represents a style for the A element set with the title property

A[href^=] found in ... Begins with

A[href$=] found in ... End of

A[href*=] Find what's included in the content

3. Pseudo-Class

<style>i:first-child{color: #F00;} </style>
<p><i> First </i><i> Second </i></p>

<style>input:focus{color: #F00;} </style>
<input type= "text" value= "Hello"/>

Effect when not getting the focus

After getting focus

disable= "Disable" Disabled properties

:d isable{} set style for elements that are disabled

Before you add a style

Code:

<style>input:focus{color: #F00;} </style>
<input type= "text" value= "Hello" disabled= "disabled"/>
<input type= "text" value= "Hello" disabled= "disabled"/>

After you add a style

<style>input:focus{color: #F00;} :d isabled{color: #F00;} </style>
<input type= "text" value= "Hello" disabled= "disabled"/>
<input type= "text" value= "Hello" disabled= "disabled"/>

4. Pseudo-Elements

P:nth-child (2) indicates that this element is the 2nd element of its parent tag and is a P tag

P:nth-of-type (2) the second P element of a parent element

P:nth-last-of-type (2) The second-to-last p-element of a parent element

4. Links

A:link hyperlink does not have a style before dot

A:hover the style of the mouse on the hyperlink

A:active mouse Click hyperlink that moment of style

A:visite supermarket links after clicking on the style

Must be written in this order, and these are also useful for Div

For details of this section, see: Http://www.cnblogs.com/ruanmou/p/4832214.html

CSS Fourth hours