1.如何区分一个html标签的不同样式
使用标签名.类名的方式解决
如果希望特别强调其中的某一个或几个元素,处理的方案有三个:
1.id选择器
2.class选择器
3.层级选择器
看下面的代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div>
<h1>床前明月光</h1>
<p>疑是地上霜</p>
<span>举头望明月</span>
<p>低头思故乡</p>
<p>李白</p>
</div>
</body>
</html>
刷新浏览器后,显示的效果如下:
现在想让李白这两个字变成红色斜体,可以有三种方法:
1.使用id选择器
代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#te1{
color:red;
font-style:italic;
}
</style>
</head>
<body>
<div>
<h1>床前明月光</h1>
<p>疑是地上霜</p>
<span>举头望明月</span>
<p>低头思故乡</p>
<p><span id="te1">李白</span></p>
</div>
</body>
</html>
刷新浏览器后的效果如下:
2.使用类选择器
代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.te1{
color:red;
font-style:italic;
}
</style>
</head>
<body>
<div>
<h1>床前明月光</h1>
<p>疑是地上霜</p>
<span>举头望明月</span>
<p>低头思故乡</p>
<!--<p>李白</p>-->
<p><span class="te1">李白</span></p>
</div>
</body>
</html>
刷新浏览器后的效果也是一样的.
3.使用层级选择器
代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div > p > span{
color:red;
font-style:italic;
}
</style>
</head>
<body>
<div>
<h1>床前明月光</h1>
<p>疑是地上霜</p>
<span>举头望明月</span>
<p>低头思故乡</p>
<!--<p>李白</p>-->
<p><span>李白</span></p>
</div>
</body>
</html>
刷新浏览器后的效果也是一样的.
可以看出css是非常灵活的,但是这样一来什么时候该用哪个选择器呢??
. 首先id选择器用的地方并不多,尽量不要使用id选择器
. 使用的时候优先选择用类选择器
. 再考虑用html标签选择器
. 再然后再考虑用组合选择器
. 最后才考虑会id选择器
. 使用后代选择器时,尽量使用标签选择器或者类选择器和标签选择器的组合,
. id选择器和类选择器的优先级
实例代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
color:red;
}
#p2{
color:blue;
}
</style>
</head>
<body>
<p class="p1" id="p2">hello world</p>
</body>
</html>
刷新浏览器,显示如下:
可以看到显示的字体颜色是蓝色的,说明id选择器的优先级高于类选择器.
得出结论:
. 一个元素可以同时有id选择器和类选择器,当id选择器和类选择器发生冲突时,id选择器的优先级高于类选择器
. 一个元素最多有一个id选择器,但是可以有多个类选择器.
. 当一个元素被多个类选择器修饰地,用空格隔开
2.如何使用多个类选择器来修饰同一个html元素??
代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.class1{
text-decoration:underline;
color:black;
}
.class2{
font-style:italic;
font-size:20px;
}
</style>
</head>
<body>
<p class="class1 class2">hello world</p>
</body>
</html>
刷新浏览器后显示的效果如下:
假如现在在class2这个选择器中设置字体颜色为红色,会怎么样呢?
代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.class1{
text-decoration:underline;
color:black;
}
.class2{
font-style:italic;
font-size:20px;
color:red;
}
</style>
</head>
<body>
<p class="class1 class2">hello world</p>
</body>
</html>
刷新浏览器显示的效果如下:
可以看到颜色变成红色.
结论如下:
. 多个类选择器在修饰同一个元素时,以写在后面的为准
. 当优先级相同的情况下,在发生冲突时,以写在style内容中的后面的那个为准
. 一个元素被多个选择器同时修饰时,优先级是:
!important设置 > 行内样式设定>id选择器>类(伪类)选择器>html选择器>通配符选择器>html属性设置>继承样式