2-01 基本选择器
标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
div{
font-size: 30px;
color: red;
}
p{
color: blue;
font-weight: 600;
}
</style>
</head>
<body>
<div>我要自学网</div>
<header>
<div>我要自学网2</div>
<p>我要自学网p</p>
</header>
<div>我要自学网3</div>
<p>我要自学网p1</p>
</body>
</html>
ID选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
#one,#two{
color: red;
}
#three{
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<li id="one">我要自学网</li>
<li id="two">我要自学网</li>
<li id="three">我要自学网</li>
<li id="four">我要自学网</li>
<li id="five">我要自学网</li>
<li id="six">我要自学网</li>
</ul>
</body>
</html>
2-02 高级选择器
后代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
#enj ul .ww{
color: red;
}
</style>
</head>
<body>
<div id="ynj">
<ul class="yb">
<li class="zs">张三</li>
<li class="ls">李四</li>
<li class="ww">王五</li>
<li class="zl">赵六</li>
</ul>
</div>
<div id="enj">
<ul class="sb">
<li class="zs">张三</li>
<li class="ls">李四</li>
<li class="ww">王五</li>
<li class="zl">赵六</li>
</ul>
</div>
</body>
</html>
并集选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style type="text/css">
header #one,div,.abc{
color: purple;
}
</style>
</head>
<body>
<div>我要自学网1</div>
<header>
<p id="one">我要自学网2</p>
</header>
<p class="abc">我要自学网3</p>
</body>
</html>
交集选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style type="text/css">
.one.abc{
color: red;
}
</style>
</head>
<body>
<div>我要自学网1</div>
<div class="abc one">我要自学网2</div>
<p class="abc">我要自学网3</p>
</body>
</html>
2-03 序列选择器
第一子元素和最后元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一子元素和最后元素选择器</title>
<style type="text/css">
h3:first-child{
color: red;
}
div:last-child{
color: blue;
}
</style>
</head>
<body>
<h3>我要自学网1</h3>
<h3>我要自学网2</h3>
<p>我要自学网3</p>
<p>我要自学网4</p>
<div>我要自学网5</div>
<div>我要自学网6</div>
</body>
</html>
nth-child选择器1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>nth-child选择器1</title>
<style type="text/css">
li:nth-child(2n){ color: blue; }
</style>
</head>
<body>
<ul>
<li>我要自学网1</li>
<li>我要自学网2</li>
<li>我要自学网3</li>
<li>我要自学网4</li>
<li>我要自学网5</li>
<li>我要自学网6</li>
<li>我要自学网7</li>
<li>我要自学网8</li>
<li>我要自学网9</li>
<li>我要自学网10</li>
</ul>
</body>
</html>
nth-child选择器2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>nth-child选择器2</title>
<style type="text/css">
li:nth-child(3n+1){ color: red; }
</style>
</head>
<body>
<ul>
<li>我要自学网1</li>
<li>我要自学网2</li>
<li>我要自学网3</li>
<li>我要自学网4</li>
<li>我要自学网5</li>
<li>我要自学网6</li>
<li>我要自学网7</li>
<li>我要自学网8</li>
<li>我要自学网9</li>
<li>我要自学网10</li>
<li>我要自学网11</li>
<li>我要自学网12</li>
<li>我要自学网13</li>
<li>我要自学网14</li>
</ul>
</body>
</html>
css特性及优先级
css继承性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css继承性</title>
<style type="text/css">
body{
color: blue;
}
</style>
</head>
<body>
<div>
我是div中的文字 <br />
<span>我是div中的span元素</span>
</div>
</body>
</html>
css优先级1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css优先级1</title>
<style type="text/css">
div{ color: red; }
*{ color: green; }
a{ color: blue;}
.abc{color: purple;}
#one{color: brown;}
</style>
</head>
<body>
<div>
<a href="" class="abc" id="one">听谁的1</a>
<br />
<span>听谁的2</span>
</div>
</body>
</html>
css优先级2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css优先级2</title>
<style type="text/css">
.abc{color: purple;}
a{ color: blue;}
*{ color: green; }
div{ color: red; }
div .abc{color: yellow;}
div .abc{color: darkcyan;}
</style>
</head>
<body>
<div>
<a href="" class="abc" id="one" style="color: chartreuse;">听谁的1</a>
<br />
<span>听谁的2</span>
</div>
</body>
</html>
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
