CSS选择器
2018-06-03 本文已影响0人
玄非氪命
1.语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css语法</title>
<style type="text/css">
/*css的注释*/
/*css的语法 选择器 声明块*/
p{
color: chartreuse;
font-size: 40px;
}
</style>
</head>
<body>
<p>天上白玉京</p>
<p>天上白玉京</p>
</body>
</html>
2.内联样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css内联样式</title>
</head>
<body>
<!--style 内联样式-->
<p style="color: blue;font-size: 40px">泣血蝇虫笑苍天</p>
<p>泣血蝇虫笑苍天</p>
<p>泣血蝇虫笑苍天</p>
</body>
</html>
3.内部样式表:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css内部样式表</title>
<!--style 内部样式表-->
<style type="text/css">
p{
color: blueviolet;
font-size: 35px;
}
</style>
</head>
<body>
<p>孤帆叠影锁白链</p>
<p>孤帆叠影锁白链</p>
<p>孤帆叠影锁白链</p>
</body>
</html>
4.引用外部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css外部样式表</title>
<link rel="stylesheet" type="text/css" href="样式表.css">
</head>
<body>
<h1>李白</h1>
<p>孤帆远影碧空尽</p>
<p>孤帆远影碧空尽</p>
<p>孤帆远影碧空尽</p>
</body>
</html>
样式表：
p{
color: aqua;
font-size: 30px;
}
h1{
font-size: 20px;
color: beige;
}
5.块和内联:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块和内联</title>
</head>
<body>
<!--块元素 独占一行 div p h1~h6 li-->
<!--内联元素 （行内元素） 只占自身大小span a img iframe-->
<!--a 可以包含任意元素 除了本身-->
<!--p 不可以包含其他块元素-->
<div style="background-color: blue;width: 40px">D D D</div>
<div style="background-color: palegreen;width: 45;">D D </div>
<p>唯见长江天际流</p>
<span style="color: red">S S S</span>
<span style="color: red">S S S</span>
<span style="color: red">S S S</span>
<a href="#">
<div style="color: blueviolet;width: 35px">
一个DIV
</div>
</a>
<a href="">超链接</a>
<!-- p不可以包含其他块元素 -->
<p><span>SPAN</span></p>
</body>
</html>
6.伪元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style type="text/css">
p:first-letter{
color: blue;
}
p:first-line{
background-color: red;
}
p:before{
content: "A";
color: chartreuse;
}
p:after{
content: "B";
}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aa</p>
</body>
</html>
7.否定伪类:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>否定伪类</title>
<style type="text/css">
/*:not （选择器）{}*/
/*p:not(.P){
background-color: red;
}*/
p:not(#p1):not(.P){
background-color: chartreuse;
}
</style>
</head>
<body>
<p>月落乌啼霜满天</p>
<p id="p1">月落乌啼霜满天</p>
<p class="P">月落乌啼霜满天</p>
<p>月落乌啼霜满天</p>
</body>
</html>
8.元素选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style type="text/css">
/*元素选择器：标签名{}*/
p{
color: red;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1>江枫渔火对愁眠</h1>
<p>江枫渔火对愁眠</p>
<p>江枫渔火对愁眠</p>
<p>江枫渔火对愁眠</p>
<span>江枫渔火对愁眠</span>
</body>
</html>
9.类选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
/*类选择器： .class的值{}*/
.p2{
color: red;
}
.p3{
font-size: 45px;
}
</style>
</head>
<body>
<h1>江枫渔火对愁眠</h1>
<p id="p1">江枫渔火对愁眠</p>
<p id="p2">江枫渔火对愁眠</p>
<p class="p2 p3">江枫渔火对愁眠</p>
<p class="p3">JFYHDCM</p>
<span>江枫渔火对愁眠</span>
</body>
</html>
10.ID选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
/*id选择器：#id的值*/
#p2{
font-size: 45px;
}
#p1{
color: red;
}
</style>
</head>
<body>
<h1>江枫渔火对愁眠</h1>
<p id="p1">江枫渔火对愁眠</p>
<p id="p2">江枫渔火对愁眠</p>
<p class="p2 p3">江枫渔火对愁眠</p>
<p class="p3">JFYHDCM</p>
<span>江枫渔火对愁眠</span>
</body>
</html>
11.属性选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
/*/*p[title]*!有title属性的*/
/*[属性名] = ‘属性值’：选取含有指定属性的元素*/
/*[属性名^="属性值"]选取开头；$：选区结尾；*：包含指定内容*/
p[title="hello"]{
background-color: chartreuse;
}
p[title^="a"]{
background-color: aqua;
}
p[title$="d"]{
color: blueviolet;
}
p[title*="a"]{
color: blue;
}
</style>
</head>
<body>
<p title="hello">title大段落</p>
<p title="ab">title大段落</p>
<p title="ac">title大段落</p>
<p>title大段落</p>
<p title="world">title大段落</p>
<p title="ad">title大段落</p>
<p>title大段落</p>
<p>title大段落</p>
</body>
</html>
12.复合选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复合选择器</title>
<style type="text/css">
/*复合选择器：选择器1.选择器2.选择器{}*/
p.p3{
color:blue;
}
</style>
</head>
<body>
<h1>江枫渔火对愁眠</h1>
<p id="p1">江枫渔火对愁眠</p>
<p id="p2">江枫渔火对愁眠</p>
<p class="p2 p3">江枫渔火对愁眠</p>
<p class="p3">JFYHDCM</p>
<span class="p3">江枫渔火对愁眠</span>
</body>
</html>
13.子元素和后代元素选择器
<!--<!DOCTYPE html>-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>exercise</title>
<style>
.p3{
color: purple;
font-size: 34px;
}
p#p2 {
color: #aaffaa;
}
</style>
<style>
p#p2{
background-color: chartreuse;
}
</style>
</head>
<body>
<h1>静夜思</h1>
<p id="p1">床前明月光</p>
<p id="p2">床前明月光</p>
<p class="p3">床前明月光</p>
<p class="p3">床前明月光</p>
<p>床前明月光</p>
</body>
</html>
14.兄弟元素选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟元素选择器</title>
<style type="text/css">
span + p{
font-size: 40px;
}
span ~ p{
background-color: red;
}
</style>
</head>
<body>
<p>brother</p>
<p>brother</p>
<p>brother</p>
<span>BROTHER</span>
<p>brother</p>
<p>brother</p>
<p>brother</p>
</body>
</html>
