CSS
-
(Cascading Style Sheets)
<!--<link rel="stylesheet" href="mycss.css">-->
<!--<style>-->
<!-- p {-->
<!-- color: red;-->
<!-- }-->
<!--</style>-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种方式</title>
<style>
#d9 {
color: black;
}
p{
color:orangered;
}
</style>
</head>
<body>
<p style="color: fuchsia;">你们一定努力啊!</p>
<!--<link rel="stylesheet" href="mycss.css">-->
<p style="color: blue">你们</p>
<p id="d9" >???没了</p>
<hr>
</body>
</html>
结果:
The tag selector: name tag
P {
Color: Red;
}
class selector: Point class name +
.c1 {
Color: Yellow;
}
ID Selector: # + id value
# {D1
Color: Green;
}
general / global selector
{*
Color: Blue;
}
1. Under the same selector: The principle of proximity
2. Selector different cases:
inline> id selector> class selector> tag selector
Combined selector:
Descendant selectors
div span {
Color: Red;
}
son selector
div> span {
Color: Aqua;
}
adjacent selector: immediately following a
div + span {
Color: Orange;
}
brother selector: the same level of all of the following labels
div ~ span {
Color: Brown;
}
Attribute selectors
Packet
When a plurality of elements CCTV same time, we do not need to repeat elements for each pattern set, we can use a comma-separated packet to selector element disposed uniform pattern between a plurality of selectors.
For example div, p, a {
color : red ;}
Nesting
# A1, .b1, span i.e. the various selectors link using commas
/ * Connected state * /
A: Link {
Color: Pink;
}
/ * mouse suspended state * /
A: hover {
Color: Red;
}
/ * mouse click state * /
A: Active {
Color: Purple;
}
/ * access after the state * /
a: visited {
Color: dimgrey;
}
/ * INPUT box is clicked to obtain a focus state is referred * /
INPUT: focus {
background-Color: Orange;
}
INPUT: hover {
background-Color: Red;
}
Pseudo class selector
a:link{
color:red
}
a :hover{
color : yello
}
to: vistied {
color:blue
}
input :focus{
outline:none;
background-color:#eee}
Show
Example : first-child instance of the effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-child {
font-weight: bold;
color: gold
}
li:first-child {
text-transform: uppercase;
color: red
}
</style>
</head>
<body>
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
</body>
</html>
Demonstrate the following results can be seen only the first element to be changed
<head>
<style type="text/css">
p > i:first-child {
font-weight:bold;
color: gold;
}
</style>
</head>
<body>
<p>some <i>text1</i>. some <i>text2</i>.</p>
<p>some <i>text1</i>. some <i>text2</i>.</p>
<p>some <i>text1</i>. some <i>text2</i>.</p>
<p>some <i>text1</i>. some <i>text2</i>.</p>
</body>
</html>
Where p> i i i representative of all belonging to a first p will be selected as a class.
Pseudo-element selector
first-letter
p:first-letter{
font-size:48px;
color:red;
}
Common and set a special style to the first letter
before
Inserts gkd before each <p> element
p:before{
content:'gkd'
color:'bule'}
after
Useful in solving the problem of floating, can be used to increase the content at the end of
p:after{
content: "??? summary"
color : red}
Priority Illustration:
>>>> >>>> >>>>>
>>>> >>>> >>>>>