您的位置：首页 > Web前端 > CSS

关于css选择器的一些细节

2017-08-07 00:00 435 查看
##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属性设置＞继承样式
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTML CSS 类选择器
相关文章推荐
新的分享
章节导航