The CSS selector

The 1 element selectors

Selector

Explain

Usage

Css version

*

Universal selector matches any HTML tag

*{}

Css2

.classname

The class property contains the classname E objects as the selector

.classname{}

Css1

#idname

The unique identifier of the ID property is equal to idname E objects as the selector

#idname{}

Css1

E

In the document language types (effective HTML label) as selectors

h1{},div{},p{}Etc.

Css1

To illustrate several element selectors

1 General wildcard provisions for the default browser and margins (margin, padding), so that more accurate positioning of elements

In common usage:

*{

margin:0;

padding:0

}

The 2 element selectors priority

The general #idname>.classname>E>*

2 selector

Selectors

Selector

Name

Name

CSS Version

Edition

Description

Introduction

E F

Contains the selector

CSS1

Select all the E element contains F elements.

E>F

Child selectors

CSS2

Select all as a child of a E element F.

E+F

The adjacent selector

CSS2

Choose to E element, F element.

E~F

Sibling selector

CSS3

Select all the brothers E element F.


The relationship between the selector notes

1.E>F is chosen as the E child element of all elements of the F, pay attention to is the sub elements instead of descendant elements (grandparents don't work)

For example


The 1 is red, 2 is not a red effect



<style>
div[id='mystyle1']>strong{

color:red;

}
</style>
<div id='mystyle1'>

<strong>1</strong>

<p><strong>2</strong></p>

</div>

Effect:

1

2



The 3 attribute selectors

Selector

css

Edition

Introduction

E[att]

CSS2

Select the E element with the att attribute.

E[att="val"]

CSS2

Choose a att attribute and attribute value is equal to the E element val.

E[att~="val"]

CSS2

Choose a att attribute and the attribute values are separated by spaces, a list of words, one is equal to the Val E element.

E[att^="val"]

CSS3

Choose a att attribute and the attribute values are in the E element string at the beginning of the val.

E[att$="val"]

CSS3

Choose to have a att attribute E elements to a Val terminated string.

E[att*="val"]

CSS3

Choose to have a att attribute for the E element containing the string val.

E[att|="val"]

CSS2

Select a att attribute and the attribute values are beginning to Val and use a hyphen "-" separated string E elements.



Note that the E[att~= "Val"] and E[att|= "Val"] difference

E[att~="val"]For a property with a ATT and the attribute as a space separated list of words

For example

Div[class~=’a’]Can the corresponding

<div class=’b c1 a ’></div>

E[att|="val"]

Div[class|=’a’] Corresponding

<div class=’a-b-c’></div>

Attention must begin with a

 

4 pseudo class selectors

Selector

CSS 

Edition

Description

Introduction

E:link

CSS1

Set the hyperlink a in has not been visited before style.

E:visited

CSS1

Set the hyperlink a in the link has been visited outdated style.

E:hover

CSS1/2

Element set in the mouse hover style.

E:active

CSS1/2

Element set in user activation (between click and release the mouse events) of style.

E:focus

CSS1/2

Set the elements in the input focus (become the elements of the onfocus event occurs when the style).

E:lang()

CSS2

Matched E elements using special language.

E:not(s)

CSS3

Matching does not contain a s selector element E.

E:root

CSS3

Matched E elements in the root element of the document.

E:first-child

CSS2

The first sub elements E matching of the parent element.

E:last-child

CSS3

The last child element matches the E of the parent element.

E:only-child

CSS3

Matching parent a child element only E.

E:nth-child(n)

CSS3

The N child element matches the E of the parent element.

E:nth-last-child(n)

CSS3

The penultimate n sub elements E matching of the parent element.

E:first-of-type

CSS3

The first sibling sibling element E matching of the same type in.

E:last-of-type

CSS3

The last sibling brother elements of the same type in E match.

E:only-of-type

CSS3

Only one of the brothers of the same type in the E matching elements.

E:nth-of-type(n)

CSS3

Matching the same type in the N sibling sibling element E.

E:nth-last-of-type(n)

CSS3

The matching of the same type in the penultimate n sibling sibling element E.

E:empty

CSS3

Match without any sub element (including text nodes) elements E.

E:checked

CSS3

Matching the user interface in the selected state of the element E. (for input  type for radio and checkbox)

E:enabled

CSS3

Matching the user interface in a usable state element E.

E:disabled

CSS3

Matching the user interface in the disabled state of the element E.

E:target

CSS3

Matched E elements related to URL.

@page:first

CSS2

Set the page the first page styles used container. Only for @page rules

@page:left

CSS2

The settings page container is located on the left side of the binding line for all pages style. Only for @page rules

@page:right

CSS2

The settings page container in binding line right for all pages style. Only for @page rules



E: The focus instance:

Code:

<style><!--
h1{font-size:16px;}
input{
    border-radius:7px;
    }
ul{list-style:none;margin:0;padding:0;}
input:focus{background:#f6f6f6;color:#f60;border:1px solid #f60;outline:none;}
input[value='search']:focus{
    background:gray;color:white;border:1px solid black;
    width:400px;
}
--></style>
<h1>Please focus to the following input box</h1>
<form action="#">
<ul>
<li><input type="text" value="Full name" /></li>
<li><input type="text" value="Company" /></li>
<li><input type="text" value="search" /></li>
</ul>
</form>

Effect:

Please focus to the following input box

Negative pseudo class selectors E:not()

Negative pseudo class selectors E:not()

Negative pseudo class selectors E:not()

Negative pseudo class selectors E:not()

Posted by Upton at November 12, 2013 - 8:11 PM