一、 CSS选择符语法
选择符{
属性:属性值1,属性值2...;
属性:属性值；
......
}
-
当一个属性有多个属性值时，属性值之间不分先后顺序
-
标签内容包括空格换行等不影响属性显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ /*交换red 5px solid三个值的位置对属性显示没有影响*/ border: red 5px solid; height: 200px; width: 200px; } p{ /*body中p标签中增加空格、换行对属性显示没有影响*/ color: yellow; } </style> </head> <body> <div></div> <p>逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑 教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育<br>逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育</p> </body> </html>
二、CSS选择符
2.1 元素选择符
1.语法：
div{属性;属性值;}
2.应用范围：
当需要对不同的标签设置样式时，可以用元素选择符。在如下的案例中，定义了两个元素选择器（div元素选择器、p元素选择器）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
/*交换red 5px solid三个值的位置对属性显示没有影响*/
border: red 5px solid;
height: 200px;
width: 200px;
}
p{
/*body中p标签中增加空格、换行对属性显示没有影响*/
color: yellow;
}
</style>
</head>
<body>
<div></div>
<p>逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑 教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育<br>逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育逻辑教育</p>
</body>
</html>
2.2 id选择符
-
语法
#id名{属性;属性值;} -
适用范围：
当需要对多个相同的元素其中一个定义样式时，可以通过id选择符（#+id名）来实现。一个html文件中id值是唯一的，不可以重复。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* id选择符 '#+id值'*/
#p1{
color: yellow;
}
</style>
</head>
<body>
<p id="p1">逻辑教育1</p>
<p>逻辑教育2</p>
<p>逻辑教育3</p>
<p>逻辑教育4</p>
</body>
</html>
2.3 类选择符
-
语法
.class名{属性;属性值;} -
适用范围：
当不同元素标签需要定义相同的样式时，可以用类选择符（.+类名）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*通过类选择符（.box）为类名相同的div元素和p元素设置同样的样式*/
.box{
color: red;
}
</style>
</head>
<body>
<p id="p1">逻辑教育1</p>
<p class="box">逻辑教育2</p>
<p>逻辑教育3</p>
<p class="box">逻辑教育4</p>
<div class="box">哈哈哈哈哈哈</div>
</body>
</html>
2.4 通配符选择符
-
语法
*{属性:属性值;} -
适用范围：
当需要统一定义html文件中所有元素的样式时，可以用通配符选择符来实现。通常用来去除所有元素的margin和padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*通配符选择符*，删除所有元素的间隔*/
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p id="p1">逻辑教育1</p>
<p class="box">逻辑教育2</p>
<p>逻辑教育3</p>
<p class="box">逻辑教育4</p>
<div class="box">哈哈哈哈哈哈</div>
</body>
</html>
2.5 群组选择器
-
语法
选择符1,选择符2,选择符3{属性:属性值;} -
适用范围
当多个元素所使用的某些样式相同时，可以归为一组，使用群组选择器来简化代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1{
height: 100px;
width: 100px;
border: black solid 2px;
background-color: red;
}
.box2{
height: 100px;
width: 100px;
border: black solid 2px;
background-color: yellow;
}
.box3{
height: 100px;
width: 100px;
border: black solid 2px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
可以利用群组选择器将代码简化为如下格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1{
background-color: red;
}
.box2{
background-color: yellow;
}
.box3{
background-color: blue;
}
/*群组选择符 */
#box1,.box2,.box3{
height: 100px;
width: 100px;
border: black solid 2px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2.6 包含选择符
-
语法
父级元素名 子集元素名{属性:属性值;} -
适用范围：
当需要定义某个父级元素下的子集元素的样式时，可以使用包含选择符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*包含选择符*/
ul li{
list-style-type: disc;
}
ul .li2{
list-style-type: square;
}
</style>
</head>
<body>
<ul>
<li>1111</li>
<li class="li2">2222</li>
<li class="li2">3333</li>
</ul>
</body>
</html>
2.7 伪类选择器
-
适用范围：
当我们向某些选择器增加特殊效果时，可以用伪类选择器 -
语法（通常与a标签一起使用）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 未访问的链接*/ a:link{color: #FF0000} /*已访问的链接*/ a:visited{color: #00FF00} /*鼠标放上去的链接*/ a:hover{color: #FF00FF} /*按住鼠标左键不动*/ a:active{color: #0000FF} </style> </head> <body> <a href="#">点击一下</a> </body> </html>
样式太繁琐，通常用下面的代码代替
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{color:blue;}
a:hover{color:yellow;}
</style>
</head>
<body>
<a href="#">点击一下</a>
</body>
</html>
三、 选择符的优先级
行内样式>id选择符>类选择符>元素选择符
96
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
