02 CSS selector
By Kevin Song
- 02-01 Basic Selector
- 02-02 Extended Selector
- 02-03 CSS Comprehensive Demonstration
Definition: Specify the label that CSS will work on. The name of the label is the selector.
Selector name {
Attribute name: attribute value;
Attribute name: attribute value attribute value;
}Selector classification
- Basic selector
- html tag selector
- class selector
- id selector
- Extended selector
- Association selector
- Combination selector
- Pseudo-element selector
02-01 Basic Selector
- html tag name selector: html tag name used
- Class selector: Use the class attribute in the label
- id selector: use id attributes in Tags
Priority:
html tag name < class < ID < style
<div class="Group1" id="id1" style="backgroud-color:#F00"><>html tag name selector
div{
background-color:#09F;
color:#FFF;
}class selector
Define the class attribute in the html tag and assign the value. Style the tag by the tag name. class
<html>
<head>
<style type="text/css">
/*Change the Group1 style of div*/
div.Group1{
background-color:#FFF;
color:#09F;
}
/*Change all Group1 styles in div*/
.Group1{
background-color:#FFF;
color:#09F;
}
</style>
</head>
<body>
<div class="Group1">This is a div region</div>
<div class="Group2">This is a div region</div>
<span class="Group1">This is a span region</span>
<p class="Group1">This is a paragraph area.</p>
</body>
</html>id selector
Define id attribute in html tag and assign value. Style the tag by tag name # id
The difference between ID and lass is that the value of ID is unique in the page, because this attribute can be used by js in addition to css.
The role of id: Indicate specific areas in the page and do not recommend duplication
<html>
<head>
<style type="text/css">
/*Change div's id1 style*/
div#id1{
background-color:#FFF;
color:#09F;
}
/*Change all id1 styles: This is not recommended, IDS should be unique and should be used by js*/
#id1{
background-color:#FFF;
color:#09F;
}
</style>
</head>
<body>
<div id="id1">This is a div region</div>
<div id="id2">This is a div region</div>
<span id="id1">This is a span region</span>
<p id="id1">This is a paragraph area.</p>
</body>
</html>02-02 Extended Selector
- Extended selector
- Association selector
- Combination selector
- Pseudo-element selector
Association selector
Operation specifies the specified label in all labels
<html>
<head>
<style type="text/css">
/*Change the style of < U > </u > label in < div > < b > </b > label*/
div b u{
background-color:#09F;
color:#FFF;
}
</style>
<body>
<div>This is a<b>div<u>region</u></b></div>
<div>This is a div region</div>
<span>This is a span region</span>
<p>This is a paragraph area.</p>
</body>
</html>Combination selector
Operate the specified labels in several class es or labels at the same time
Operation specifies the specified label in the same set of labels
<html>
<head>
<style type="text/css">
/*Change the style of < U > </u > label in < div > Group1 and p < b > </b > label*/
.Group1,p b u{
background-color:#09F;
color:#FFF;
}
</style>
<body>
<div class="Group1">This is a<b>div<u>region</u></b></div>
<div class="Group1"><b>This is<u>One</u></b>div region</div>
<span>This is a span region</span>
<p>This is a paragraph area.</p>
</body>
</html>Pseudo-element selector
Some pre-defined selectors in html are called pseudo-elements
format
Tag Name: Pseudo Element {
Style definition
}Commonly used pseudoelements:
- a:link hyperlink not clicked
- a:visited state
- a:hover mouse hover status
- a:active click status
- P: The text of the first line of the first-line paragraph
- P: the first letter of the first-letter paragraph
- Focus has a focus element
The status of hyperlinks:
- Not visited
- a:link {}
- After visit
- a:visited {}
- Mouse hovering
- a:hover {}
- Mouse click
- a:active {}
Order: L - V - H - A
<html>
<head>
<style type="text/css">
/*Unaccessed Style*/
a:link{
background-color:#06F;
color:#FFF;
text-decoration:none;
font-size:18px;
}
/*Post-access style*/
a:visited{
background-color:#06F;
color:#FFF;
text-decoration:none;
font-size:18px;
}
/*Mouse Hover Style*/
a:hover{
background-color:#FFF;
color:#06F;
text-decoration:none;
font-size:36px;
}
/*Mouse Hover Style*/
a:active{
background-color:#06F;
color:#FFF;
text-decoration:none;
font-size:36px;
}
</style>
<body>
<a hred="http://www.baidu.com">Demonstration of Pseudo Element Selector</a>
</body>
</html>paragraph
<html>
<head>
<style type="text/css">
<!--Unaccessed Style-->
p:first-letter {
font-size:36px;
color:#F00;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>focus
<html>
<head>
<style type="text/css">
/*Unaccessed Style*/
input {
background-color:#09F;
}
<style>
</head>
<body>
<input type="text" />
<input type="text" />
</body>
</html>02-03 CSS Comprehensive Demonstration
<html>
<head>
<title>Kevin's Homepage</title>
<style tyle="text/css">
ul {
list-style-image:url(1.bmp);
}
table {
border-bottom:#0C0 double 1px;
border-left:#F00 solid 3px;
border-right:#F00 solid 3px;
border-top:#F00 solid 3px;
}
/*Association selector*/
table td {
border:0CF dotted 1px;
}
</style>
</head>
<body>
<ul>
<li>Unordered list</li>
<li>Unordered list</li>
<li>Unordered list</li>
<li>Unordered list</li>
</ul>
<hr />
<table>
<tr>
<td>Cell</td><td>Cell</td>
</tr>
<tr>
<td>Cell</td><td>Cell</td>
</tr>
</table>
</body>
</html>