CSS1 defined selector
Type Selector
For selecting the specified type of element (in fact, he is the html tag selector), commonly used as follows:
body {
/*对 body 元素定义样式*/
}
body,div {
/*同时选择多种标签元素*/
}ID selector
For selecting a specified ID html elements, common use is as follows:
<div id="nav">
</div>
<style>
#nav {
/*定义 ID 为 nav 的元素的样式*/
}
</style>因为 CSS 的渲染顺序是从右往左进行渲染的，而 ID 则是全唯一的，那么就可以省略掉前面的类型选择器。
Class selector
For selecting html element by class name, common use is as follows:
<div class="nav">
</div>
<style>
.nav {
/*定义 class 为 nav 的元素的样式*/
}
</style>It includes a selector
A selection level nested elements, the common use is as follows:
<div class="nav">
<div class="nav-tools">
</div>
</div>
<div class="nav">
<div>
<div class="nav-tools">
</div>
</div>
</div>
<style>
.nav .nav-tools {
/*定义元素的父级元素 class 包含 nav，且子元素class 包含 nav-tools 的元素*/
}
</style>需要注意的是：包含选择器不关心层级，只要后面的选择器是被包含在前一个元素中的即可。如上述例子，两个 nav-tools 都会被选择器选中！
Pseudo class selector
: Link-- link pseudo class selector
Used to define the state of the link is not accessible style, common use is as follows:
<div class="nav">
<div class="nav-tools">
<ul>
<li><a href="#"></a></li>
</ul>
</div>
</div>
<style>
a:link {
text-decoration: none;
color: blue;
}
</style>: Visited-- link pseudo class selector
Links are used to define the style has been accessed, the common use is as follows:
<style>
a:visited {
text-decoration: none;
color: red;
}
</style>: Active-- user operates the pseudo-class selector
Is used to define the style element is activated, the common use is as follows:
<style>
a:active {
text-decoration: none;
color: green;
}
</style>: Hover-- user operates the pseudo-class selector
After the mouse is used to define the style elements are of common use is as follows:
<style>
a:hover {
text-decoration: none;
background-color: #F4F4F4;
}
</style>: Focus-- user operates the pseudo-class selector
Is used to define the style element obtaining focus, the common use is as follows:
<style>
input:focus {
text-decoration: none;
background-color: #F4F4F4;
}
</style>::first-line
Style common to use a first line for the text elements defined as follows:
<div class="doc">
<p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</div>
<style>
.doc {
width: 360px;
}
.doc>p::first-line {
color: red;
}
</style>::=first-letter
Style for the first character in the definition of elements common use is as follows:
<style>
.doc {
width: 360px;
}
.doc>p::first-letter {
font-size: 2em;
color: red;
}
</style>Defined in CSS2 selector
* - Wild selector
Common style for all elements of the common use of the DOM is defined as follows:
<div class="nav">
<div>
<div class="nav-tools">
</div>
</div>
</div>
<style>
.nav * {
margin: 0;
}
</style>如果要重置默认样式的话，不建议使用通配选择器
[Attribute] - attribute selector
Attribute is used to define the style attribute element contains elements common use is as follows:
<div class="nav">
<div>
<div class="nav-tools">
<ul>
<li active>Menu</li>
<li>Index</li>
</ul>
</div>
</div>
</div>
<style>
li[active] {
color: red;
}
</style>[Attribute = "value"] - attribute selector
Value of the style property is used to define the element designated common use is as follows:
<div class="nav">
<div>
<div class="nav-tools">
<ul>
<li active="active">Menu</li>
<li active>Index</li>
</ul>
</div>
</div>
</div>
<style>
li[active="active"] {
color: red;
}
</style>[Attribute ~ = "value"] - attribute selector
Includes the specified attribute to define values separated by spaces and properties of elements to common use is as follows:
<div class="nav">
<div>
<div class="nav-tools">
<ul>
<li active="test active">Menu</li>
<li active="active-test">Index</li>
</ul>
</div>
</div>
</div>
<style>
li[active~="active"] {
color: red;
}
</style>As described above, only the first li foreground color red is defined!
[Attribute | = "value"] - attribute selector
Attribute is used to define the specified value and contains a hyphen (-) linked attribute values, commonly used as follows:
<div class="nav">
<div>
<div class="nav-tools">
<ul>
<li active="test active">Menu</li>
<li active="active-test">Index</li>
</ul>
</div>
</div>
</div>
<style>
li[active|="active"] {
color: red;
}
</style>As described above: the second li only the foreground color is defined as a red!
: First-child-- structure pseudo class selector
The first element of style for defining the elements of common use is as follows:
<div class="nav">
<div>
<div class="nav-tools">
<ul>
<li active="test active">Menu</li>
<li active="active-test">Index</li>
</ul>
</div>
</div>
</div>
<style>
li:first-child {
color: red;
}
</style>注意 :first-child 是作用于同级，且相同标签的第一个元素。如上所示，如果要定义第一个 li 的样式，那么久需要使用 li:first-child，而不是 ul:first-child!
: Long (one)
Attribute is used to define lang = "en" style elements, commonly used as follows:
<div>
<p lang="en">Hello World</p>
</div>
<style>
p:lang(en) {
color: red;
}
</style>::before
For defining element before the content and style, common use is as follows:
<div>
<a>World</a>
</div>
<style>
a::before {
content: "Hello ";
}
</style>::after
After the element is used to define the content and style, common use is as follows:
<div>
<a>Hello</a>
</div>
<style>
a::after {
content: "World";
}
</style>div > p
Form of the first level sub-element for defining the elements, a common method as follows:
<div class="nav">
<div>
<div class="nav-tools">
<ul>
<li active="test active">Menu</li>
<li active="active-test">Index</li>
</ul>
</div>
</div>
</div>
<style>
.nav-tools > ul {
background-color: red;
}
.nav-tools > li {
/*这个不会生效，因为 li 不是 ul 的直接子元素*/
}
</style>h1 + p
Element is used to define the style of the adjacent elements, the common use is as follows:
<div>
<h1>CSS</h1>
<p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
</div>
<style>
h1 + p {
color: red;
}
</style>New CSS3 attribute selectors
[foo^="bar"]
Style attribute is used to define the elements to the beginning of the bar elements
<div>
<a href="http://www.betterde.com">Betterde Inc.</a>
<a href="https://www.betterde.com">Betterde Inc.</a>
</div>
<style>
a[href^="https"] {
color:green;
}
</style>As described above, the link labeled https green.
[foo$="bar"]
Element attributes to define the style for the end of the bar element
<div>
<a href="http://www.betterde.com/logo.png">logo.png</a>
<a href="http://www.betterde.com/style.css">style.css</a>
<a href="http://www.betterde.com/main.js">main.js</a>
</div>
<style>
a[href$="png"] {
background: url(system/filetype/png.png) no-repeat left center;
padding-left: 18px;
}
a[href$="css"] {
background: url(system/filetype/css.png) no-repeat left center;
padding-left: 18px;
}
a[href$="js"] {
background: url(system/filetype/js.png) no-repeat left center;
padding-left: 18px;
}
</style>As indicated above, the identification of hyperlinks linked file format, file type icon and add the front!
[foo*="bar"]
Style definitions for element attributes contain elements of the bar, it is necessary to note that this is included, which means that no matter what kind of combination, as long as the property value there is this bar three consecutive letters will be selected!
<div>
<h1 class="title big full-right"></h1>
<h2 class="title big full-right"></h1>
<h1 class="big-title"></h1>
</div>
<style>
a[class*="title"] {
color: red;
}
</style>As shown above: all three elements within the div will be rendered in red font!
虽然 CSS3 中任然保留 CSS2 中定义的属性选择器，但是建议使用 CSS3 的属性选择器来替代！
Structure pseudo class selector
:root
Html tag is used to define the elements of style
:nth-child(n)
Style definitions for the sub-elements, n is the first showing several sub-elements. n can be a number or keyword odd, even or formulas. Common use is as follows:
<table>
<tbody>
<tr>
<td>name</td>
<td>gender</td>
<td>age</td>
</tr>
<tr>
<td>George</td>
<td>Male</td>
<td>23</td>
</tr>
<tr>
<td>Kevin</td>
<td>Male</td>
<td>28</td>
</tr>
<tr>
<td>Angule</td>
<td>Male</td>
<td>23</td>
</tr>
</tbody>
</table>
<style>
tr:nth-child(even) {
background-color: red;
}
</style>:nth-last-child(n)
And: nth-child (n) use the same, but is back to front ordering!
:nth-of-type(n)
Identical elements is used to define the style of n elements, commonly used as follows:
<table>
<tbody>
<tr>
<td>name</td>
<td>gender</td>
<td>age</td>
</tr>
<tr>
<td>George</td>
<td>Male</td>
<td>23</td>
</tr>
<tr>
<td>Kevin</td>
<td>Male</td>
<td>28</td>
</tr>
<tr>
<td>Angule</td>
<td>Male</td>
<td>23</td>
</tr>
</tbody>
</table>
<style>
tr:nth-of-type(even) {
background-color: red;
}
</style>:nth-last-of-type(n)
And: nth-of-type (n) use the same, but is back to front ordering!
:last-child
Style for the last element of the definition of common use is as follows:
<table>
<tbody>
<tr>
<td>name</td>
<td>gender</td>
<td>age</td>
</tr>
<tr>
<td>George</td>
<td>Male</td>
<td>23</td>
</tr>
<tr>
<td>Kevin</td>
<td>Male</td>
<td>28</td>
</tr>
<tr>
<td>Angule</td>
<td>Male</td>
<td>23</td>
</tr>
</tbody>
</table>
<style>
tr:last-child {
background-color: red;
}
</style>:first-of-type
The first element defines a pattern of elements of the same type, and: nth-of-type (1) the same effect
:last-of-type
Style definitions last element of the same type of element, commonly used as follows:
<table>
<tbody>
<tr>
<td>name</td>
<td>gender</td>
<td>age</td>
</tr>
<tr>
<td>George</td>
<td>Male</td>
<td>23</td>
</tr>
<tr>
<td>Kevin</td>
<td>Male</td>
<td>28</td>
</tr>
<tr>
<td>Angule</td>
<td>Male</td>
<td>23</td>
</tr>
</tbody>
</table>
<style>
tr:last-of-type {
background-color: red;
}
</style>:only-child
Only a sub-element for defining and developing the element with the same tag, the common use is as follows:
<div>
<h1>Hello</h1>
</div>
<style>
h1:only-child {
/*如果 div 中还有其他任何元素，则h1不会按照该选择器中定义的样式渲染*/
}
</style>:only-of-type
It contains only labels used to define the elements of a developed style, common use is as follows:
<div>
<h1>Hello</h1>
</div>
<style>
h1:only-of-type {
/*如果 div 中还有其他任何元素，则h1不会按照该选择器中定义的样式渲染*/
}
</style>:empty
Is used to define a style element does not contain any element, the common use is as follows:
<div>
</div>
<style>
div:empty {
display: none;
}
</style>Other new CSS3 selectors
E ~ F
Style, using common methods for defining sibling elements are as follows:
<div>
<p>Hello</p>
</div>
<p>CSS</p>
<style>
div ~ p {
color: red;
}
</style>div 元素中的 p 不会被渲染为红色字体，只有跟 div 是同级的 p 才会被渲染为红色！
:not(s)
It is used to define the specified element, designated by s and the filter element selector, commonly used as follows:
<div>
<p class="red">Hello</p>
<p class="blue">World</p>
<p>Welcome!</p>
</div>
<style>
p:not(.red) {
color: blue;
}
</style>注意：s 是一个简单的结构选择器，不能使用复合选择器，该选择器只匹配第一个复合条件的元素。如上所示，最后一个 p 不会被渲染为蓝色！
:target
Is used to define style chain is accessed, the common use is as follows:
<div>
<div id="text-one">
<p>这是第一个文本段</p>
</div>
<div id="text-two">
<p>这是第二个文本段</p>
</div>
</div>
<style>
div:target {
color: red;
}
</style>注意：当我们激活锚链时（url中包含 #text-one 或 #text-two），对应的 div 内的元素字体会被渲染为红色！
CSS3 UI pseudo-class status selector element
:enabled
When enabled for defining style elements, common use is as follows:
<div>
<input type="text">
</div>
<style>
input:enabled {
background: #ffff00;
}
</style>注意：元素默认状态为 enabled
:disabled
Element is used to define the style disabled state, the common use is as follows:
<div>
<input type="text" disabled="disabled"/>
</div>
<style>
input:disabled {
background: #dddddd;
}
</style>:checked
Style, use common definition of when the element is selected for the following:
<div>
<form>
<input type="checkbox" />
</form>
</div>
<style>
input:checked {
color: green;
}
</style>