The things about CSS selectors

Before introducing the CSS selector, let's start by getting to know CSS

css--cascading style sheet, as a Web page typesetting artifact is constantly praised by the Web front-end scholars ...

Next, let's get to this.

1, the characteristics of CSS

Disadvantages of HTML typesetting:

Setup trouble, modify the trouble, the function is seriously insufficient.

Advantages of CSS style typography:

The Layout property function is complete, the typesetting file can exist independently, can share the typesetting file

Categories of CSS style typography:

inline layout style, inline layout style, outside-chain layout

2. CSS layout style

Inline layout style:

Format:< Tag Name style= "Property 1: Property value 1; Property 2: Property value 2" >...</tag name >

Example: <p style= "Font-size:20pt;color:red;text-align:center" > Typesetting style </p>

Inline layout style:

All style definitions in the inline layout must be in <style> </style> between, and <style> </style> must be in

And its function can be divided into three kinds,

1. Mark Definition Type

2.class definition Type

3.id definition Type

Tag-defined format:

After the CSS layout style is introduced .... Let's take a look at some of the powerful selectors in CSS.


1, wildcard selector, also known as the whole selector-(acting on the entire Web page)

*{font-size:13px; font-family: "Microsoft Jas Black", "Chinese italics";}

2. Element Selector

p,h1,h2,h3,a{font-size:13px;}

3. ID and Class


Selectors are styles used to control the design of a page. Contains the ID selector and class selector. All along, many developers often confuse IDs with classes, or do not use either selector correctly, or simply think of it as a substitute for another. This cognition is wrong.


(1). App ID


Each ID can be used only once in a page as a unique identifier for an element. In general, the ID is used only for the unique elements of the page, such as headers, main navigation bars, layout blocks, and so on.


Example: <p id= "Hightlight" >this paragraph has red text.</p>


The corresponding CSS code:


#hightlight {color: #FFFFFF;}


(2). Combine ID with selector


/* Suitable for all H2 titles */


h2{color: #333; font-size:16px;}


/* Only suitable for title's H2 title */


h2#title {color: #eee;}


The corresponding HTML code:



(3). Application of ID


For each ID, only one element per page can use the style, so the ID should be the only element that exists and is used only once per page.


(4). Avoid the use of IDs when you need to use the same CSS rule in more than one place, you should not use an ID.


(5). The Application class class can be used indefinitely, so it is a very flexible way to apply CSS.


<p class= "Hightlight" >his paragraph has red text.</p>


Related CSS code:

. hightlight {color:ffffff;}

(6). Combine multiple classes and ID examples:

<ul id= "Drinks" > <li class= "Mix" >Beer</li> <li class= "Mix" >Spirtis</li> <li class= " Hot ">Cola</li> <li class=" Hot ">Lemonade</li> </ul>

The corresponding CSS code:

ul#drinks {color:ff6600;}. Mix {color: #999999;}. Hot {color: #333333;} (7). Overriding the basic style with a class: P{color: #ff6600;}. Bleached {Color: #ccc;}

The corresponding HTML code:

<p>this paragraph has red text.</p> <p class= "Bleached" >this paragraph have red text.</p>

(8). Directly link the class to the element


p.bleached {color:red;}


The corresponding HTML code:

<p class= "Bleached" >this paragraph has red text.</p>

(9). For class, if you reuse it multiple times or use a subclass selector, select Class if it is a tag that defines uniqueness, such as layout, then use the ID.


4. Cascade


(1). external LINK Implementation Cascade


<link rel= "stylesheet" type= "Text/css" href= "http://www.php.cn/" >


<link rel= "stylesheet" type= "Text/css" href= "http://www.php.cn/" >


<link rel= "stylesheet" type= "Text/css" href= "http://www.php.cn/" >


(2). Import Style Implementation Cascade


@import url ("One.css")


@import url ("Two.css")


@import url ("Three.css")


Note: One rule must be kept in mind, the later the more important the rule.


5. Grouping

h1{font-family: Official script, song body, italics; 　　 　　line-height:140%; Color: #333; 　　 　　} h2{font-family: Official script, song body, italics; 　　 　　line-height:140%; Color: #333; 　　 　　} h3{font-family: Official script, song body, italics; 　　 　　line-height:140%; Color: #333; 　　 　　}/* After grouping */h1,h2.h3{font-family: Official script, song body, italics; 　　 　　line-height:140%; Color: #333; }/* Group exception */h1{font-style:italic;}

6. Inheritance

H1 {Color: #333;} 

7. Context Selector

h1{Color: #ccc;} I {Color: #000;}/* Use context selector */h1 I {Color: #000;}

8. Sub-class Selector

. box {color:red;}. box1 {font-weight:bold;}. box2 {font-style:italic;} <div class= "box" >BOX</DIV&G T <div class= "box box1" >Box1</div> <div class= "box Box2" >Box2</div>

9. Other selectors


(1). Element Selector


P{color:black;}


A{text-decoration:underline;}


H1{font-weight:bold;}


(2). Descendant Selector


H2 i{color:red;}


Li A{text-decoration:none;}


#main h1{color:red;}


(3). Pseudo-Class


A:link{color:blue;}


A:visited{color:green;}


a:hover,a:active{color:red;}


Input:focus{background-color:yellow;}


(4). Advanced Selector


Advanced selectors, which are not yet fully supported, should avoid using these advanced selectors on any element that is important for site functionality.


10, sub-selector and neighboring sibling selector


Child Selector

#nav > Li {background:url (bg.gif) no-repeat left top;} <ul id= "Nav" > <li>Home</li> <li > <ul> <li>Development</li> <li>Consultancy</li> & lt;/ul> </li> <li>contact us</li> </ul>

Neighboring sibling selector:

H1+p{font-weight:bold;} 

11. Attribute Selector

<strong title= "cascading Style Sheets" >CSS</strong> strong[title] {border-bottom:1px dotted #999;} strong[ Title]:hover {cursor:help;background: #ccc} 12, two pseudo-class selectors that are particularly useful for list items: OL li:first-child{/* Select OL under the first li*/} ol li: last-child{/* Select OL under the last li*/} CSS3 selector new feature a[href$= '. JSP ']{/* All the A tags in the href attribute are. JSP end of the selected */} a[href^= ' asd]{/* All a tags in hr The EF attribute is selected at the beginning of the ASD */} a[href*= ' asd]{/* All the A tags contain the selected */} of the ASD in the href attribute
Select the rows in the table:

Tr:nth-of-type (even) {background-color:red; 　　/* Select even lines */} tr:nth-of-type (odd) {background-color:red; 　　/* Select odd Line */} tr:nth-of-child (n) {background-color:red; /* Select all lines */}
 