----
Selector type:
A tag selector:
Weight: 1;
Want to check the kind of label, put the tag name is written out on a brace, will play a role in this type of tag:
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
2 Wildcard selector:
Weight 1;
Symbols *
*{
margin:0;padding:0;
}
Class Selector 3:
Weight: 10
To whom a name: it is written on the class = "name" in whose start tag; when to choose the style, with the symbol + name.
example:
<style> .box{ background-color: lightgreen; } </style> <body> <p class="box">p1</p> <p class="box">p2</p> <p class="box">p3</p> <p>p4</p> <p>p5</p> <p>p6</p> </body>
Attribute selector 4:
Weight: 10;
You want to make a class of elements with specific attribute function, when we selected, by the symbol [Properties]} + {
Want to make with specific attributes, and attribute values of elements acting as a class, when selected, [property value]} + {
<style>
[index]{
background-color:lightsteelblue;
}
[index="a1"]{
background:red;
}
</style>
<body>
<p index="a1">p1</p>
<p index="a1" >p2</p>
<p index="b1" >p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</body>
5 id selector
Weight: 100;
Usage: to whom a name, give the label which is written "id = name" when selected, with the symbol "# name + {}"
Note: A page name ID can not be the same
example:
<style> #p4{ background-color:mediumaquamarine; } </style> <p id="p4">p4</p>
6 child selector:
Weight: selectors consisting of the sum of:
Popular to say: that is. 'Son selector', connector ">" For example: ul> li {} son all the elements is represented by the selected ul li below;
Note: Only look down.
.box>h1{
background:red;
}
div>h1{
background:green;
}
<div class="box">
<p>p1</p>
<span>span</span>
<h1>h1</h1>
<h1>h1</h1>
<h1>h1</h1>
</div>
<h1>h1</h1>
7 descendant selectors:
Weight: selection and combination of:
Children and grandchildren, as long as future generations, are in line.
example:
<style> .box p{ background:mediumaquamarine; } </style> <body> <div class="box"> <p>p1</p> <div> <p>p2</p> </div> </div> <p>p3</p> </body>
Bank selector 8:
Weight: Selector sum of:
The elements have the same style, can be extracted, and then use "," separated, then their styles are shared.
Joiner:,
example:
h1, p {
text-align:center;
height:30px;
line-height: 30px;
background:green;
}
9 intersection selector:
Weight: selector sum
The element has multiple names at the same time, you can select, for example, the following code, and select h1 and is div;
.red.current{
font-size:28px;
color:gold;
}
<h1 class="red current" >h1</h1>
<p class="red">p</p>
<div class="red current">div</div>
10 adjacent sibling selector:
Weight: All selectors sum of:
h1 + p {} on behalf of the meaning of this is to first go to the h1 tag, h1 tag next sibling, and next to the h1 tag must be consistent with the rules of the p tag
Only down.
Connector: +
<style>
h1 + p {
background:lightgreen;
}
</style>
<h1>h1</h1>
<p>p</p>
<p>p</p>
<h1>h1</h1>
<div>div</div>
<p>p</p>
General sibling selectors 11:
Weight: the sum of all selectors
h1 ~ p {} meaning represented by all of the following elements h1 is the P-tag.
Hyphen -
<style>
h1 ~ p {
background:lightgreen;
}
</style>
<P> p </ p> // this option is not in the
<P> p </ p> // this option is not in the
<h1>h1</h1>
<p>p</p>
<p>p</p>
<h1>h1</h1>
<div>div</div>
<p>p</p>
Pseudo-class selectors 12:
There is a certain order, but just remember to comply ,, a: hover () can be, and several other less common, there are compatibility issues.
<style>
/ * Default text color of a label * /
a:link{
color:red;
}
/ * Text color Access after the * /
a:visited{
color:blue;
}
/ * Text color on mouse slide * /
a:hover{
color:gold;
}
/ * Text color when clicked * /
a:active{
color:navajowhite;
}
</style>
13
Full table 1: comprising: thead, tbody, tfoot, not represented by a row of cells with td tr
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<Meta name = 'keywords' content = 'Image'>
<Meta name = 'description' content = 'text description apos>
<title>table</title>
</head>
<body>
<table border="1">
<Caption> results table: </ caption>
<thead>
<tr>
<Th> Language </ th>
<Th> mathematics </ th>
<Th> Western </ th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<Td> Total: </ td>
<Td> Total: </ td>
<Td> Total: </ td>
</tr>
</tfoot>
</table>
</body>
</html>
12 table shorthand:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<Meta name = 'keywords' content = 'Image'>
<Meta name = 'description' content = 'text description apos>
<Title> table merging line: rowspan </ title>
<style>
table{
width:500px;
height:300px;
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1">
<tr>
<Th> Language </ th>
<Th> mathematics </ th>
<Th> Western </ th>
</tr>
<tr>
<td rowspan="2">100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table> </body> </html>
15 table several common attributes:
Border: border = "1"
The cell fill cellpadding = "10px" (the distance between the content and the border line)
The spacing between the cell and the cell, cellspacing = "20px"
Merge Rows: rowspan
Merge column: colspan