正常情况下,使用多类选择器时类名选择器的内容不冲突,但是当内容产生冲突时就要考虑到应用的先后顺序。
第一:样式的应用遵循被替代原则,也就是说后出现的同类属性会替代已有属性,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Try</title>
</head>
<style>
.first{
color:red;
}
.second{
color:blue;
}
</style>
<body>
<p class="first second">看看我到底是什么颜色的</p>
</body>
</html>
该情况下,“看看我到底是什么颜色的”是蓝色的,可以理解为先应用成红色字体,再改成蓝色字体,即被second中的color属性替代。
第二:样式的应用与类选择器的名称先后顺序无关,与样式结构顺序有关,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Try</title>
</head>
<style>
.first{
color:red;
}
.second{
color:blue;
}
</style>
<body>
<p class="second first">看看我到底是什么颜色的</p>
</body>
</html>
该情况下,文中的“看看我到底是什么颜色的”仍然为蓝色,虽然改变了class下类选择器的名称顺序,但是样式在应用时看的是style标签中或者外链CSS中的样式顺序,即先“.first”再“.second”。