css三种选择符优缺点

CSS选择符是CSS中最基础的概念之一，可以用来选取HTML页面中具有特定属性的元素。常见的CSS选择符有三种：元素选择符、类选择符和ID选择符。每一种选择符都有优缺点，以下分别进行介绍。

元素选择符

p {
  color: red;
} 

元素选择符是最常见的选择符，它能够选取页面上所有的HTML元素。使用元素选择符时，会将所有匹配的元素都应用相同的样式，具有一定的通用性和重复利用性。但是，使用元素选择符时，容易影响到网页的性能。当CSS规则被写得非常具体时，会有大量元素被选择，这会让网站变得缓慢。

类选择符

.button {
  background-color: #f2f2f2;
  color: #333;
  padding: 10px;
} 

类选择符是为HTML元素加上类（class）属性来进行选择的。使用类选择符时，可以选取页面上具有相同类名的元素，并对它们进行相同的样式定义。这种方式使得样式的复用率更高，能够更方便地对页面进行维护。但是，如果在给元素添加类名时不谨慎，就会出现重名的情况，进而影响CSS的应用效果。

ID选择符

#header {
  background-color: #333;
  color: #fff;
  padding: 20px;
} 

ID选择符基于HTML元素的ID属性进行选择。每个ID属性只能被使用一次，所以ID选择符只能为一个元素进行单一样式定义。ID选择符具有可读性高、指定目标明确等优点，可以用来为网站的核心部分设置样式。但是，由于只能用一次，重复利用性较差，当页面需要大量应用ID选择符时，可能会造成CSS代码冗长且难以维护。

综上所述，当选择CSS选择符时，应根据自己的实际需求进行判断。常规情况下，元素选择符和类选择符应用得比较频繁，而ID选择符相对较少使用。