[分享]css不能修改外观还是内容

在CSS中，存在着两种属性：外观属性和内容属性。相信很多初学者在学习CSS时经常会混淆这两者的含义，导致在实际应用中出现问题。首先说一下外观属性。所谓外观属性，就是指改变元素显示效果的样式属性，比如c...

在CSS中，存在着两种属性：外观属性和内容属性。相信很多初学者在学习CSS时经常会混淆这两者的含义，导致在实际应用中出现问题。

首先说一下外观属性。所谓外观属性，就是指改变元素显示效果的样式属性，比如color、font-size、background-color等等。这些属性可以改变元素的颜色、大小、位置等，但是它们并不能改变元素的实际内容。

/* 例如： */
p {
  color: red; /* 改变文字颜色 */
  font-size: 16px; /* 改变文字大小 */
  background-color: yellow; /* 改变背景颜色 */
} 

这些CSS属性只是改变了元素的外观效果，并没有改变元素本身的内容。就算将上述样式全部应用在一段文本上，它的内容仍然是一段文字。

接下来说一下内容属性。所谓内容属性，就是指变更元素本身内容的样式属性，包括content、quotes、counter-reset、counter-increment等等。

/* 例如： */
p:before {
  content: "序号"; /* 给p元素前面添加序号 */
} 

上述样式中的content属性，可以让我们在p元素的前面添加一段文字。所以可以说，这一属性是改变元素本身内容的样式属性。

总结一下，CSS中的外观属性只是改变元素的显示效果，但不能改变元素的实际内容。而内容属性则是可以改变元素本身内容的样式属性。在实际应用中，我们要根据需要来选择使用哪种属性，以达到最佳的效果。