基本语法：选择器名称{
属性：属性值；
属性：属性值；
}
Ⅰ 选择器：通配符选择器*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础</title>
<style>
/* 通配符选择器 */
*{
color:red;
}
</style>
</head>
<body>
<p>hell word 1</p>
<p>hell word 2</p>
<h3>hell word 3</h3>
</body>
</html>
Ⅱ 标签名称选择器
.标签名名{
属性：属性值；
...
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础</title>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>hell word 1</p>
<p>hell word 2</p>
<h3>hell word 3</h3>
</body>
</html>
Ⅲ 类选择器
.类名{
属性：属性值；
...
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础</title>
<style>
.nnn{
color:red;
}
</style>
</head>
<body>
<p class="nnn">hell word 1</p>
<p class="aaa">hell word 2</p>
<h3>hell word 3</h3>
</body>
</html>
Ⅳ id选择器
#id名称{
属性：属性值；
...
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础</title>
<style>
#qaz{
color:red;
}
#wsx{
color:green;
}
</style>
</head>
<body>
<p id="qaz">hell word 1</p>
<p id="wsx">hell word 2</p>
<h3>hell word 3</h3>
</body>
</html>
Ⅴ 属性选择器
1）基本选择器[属性]{
属性：属性值；
...
}
2）基本选择器[属性名=值]{
属性：属性值；
...
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础</title>
<style>
p[name]{
color:red;
}
p[name="bbb"]{
color:green;
}
</style>
</head>
<body>
<p id="qaz" name=caaa">hell word 1</p>
<p id="wsx" name="bbb">hell word 2</p>
<h3>hell word 3</h3>
</body>
</html>
Ⅵ 包含选择器
1）选择器1 选择器2{
属性：属性值；
...
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础</title>
<style>
/* 包含选择器 */
div p{
color:red;
}
</style>
</head>
<body>
<p> hello word </p>
<div>
<p> 第一个P标签 </p>
<span>
<p> 第二个P标签 </p>
</span>
</div>
<div>
<p> 第三个P标签 </p>
</div>
</body>
</html>
2）选择器1 > 选择器2{
属性：属性值；
...
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础</title>
<style>
/* 包含选择器 */
div>p{
color:red;
}
</style>
</head>
<body>
<p> hello word </p>
<div>
<p> 第一个P标签 </p>a
<span>
<p> 第二个P标签 </p>
</span>
</div>
<div>
<p> 第三个P标签 </p>
</div>
</body>
</html>
两者区别，第一种只要是在div下的P标签，样式生效，第二种div与P标签必须是父子关系时，样式生效。
Ⅶ 伪类选择器
基本选择器：选项{
属性：属性值；
...
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础</title>
<style>
/* 伪类选择器 */
#first:before{
content:"head";
color:red;
}
#first:after{
content:"tail";
color:blue;
}
#first:first-letter{
font-size:50px;
}
#first:first-line{
text-decoration:underline;
}
#first:hover{
background-color:yellow;
}
</style>
</head>
<body>
<p id="first"> 练习题1 </p>
<p > 练习题2 </p>
<p > 练习题3 </p>
</body>
</html>
Ⅷ 结构选择器
包含选择器：选项{
属性：属性值；
...
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础</title>
<style>
/* 结构选择器 */
ul li:first-child{
color:red;
}
ul li:last-child{
color:blue;
}
/* 正数第三个*/
ul li:nth-child(3){
color:yellow;
}
/* 倒数第三个 */
ul li:nth-last-child(3){
color:bisque;
}
</style>
</head>
<body>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li id="abc" >ddd</li>
</ul>
</body>
</html>
Ⅸ 组合选择器
选择器1，选择器2，...{
属性：属性值；
...
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础</title>
<style>
/* 组合选择器 */
.header,#first,span{
color:blue;
}
</style>
</head>
<body>
<h1 class="header"> 毒鸡汤 </h1>
<p id="first"> 练习练习 </p>
<span> 熟悉熟悉 </span>
</body>
</html>
扫一扫
2583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
