【Web前端开发基础】CSS的结构伪类选择器、伪元素、浮动

作者：System 时间：2024年08月18日分类：所有,css 字数：735

CSS的结构伪类选择器、伪元素和浮动是前端开发中非常重要的概念。

例如，:first-child选择器可以选择父元素的第一个子元素，:last-child选择器可以选择父元素的最后一个子元素。




/* 选择每个<p>元素，该元素是其父元素的第一个子元素 */
p:first-child {
  color: red;
}
 
/* 选择每个<p>元素，该元素是其父元素的最后一个子元素 */
p:last-child {
  color: blue;
}

例如，::before伪元素可以在元素内容的前面插入内容，::after伪元素可以在元素内容的后面插入内容。




/* 在每个<p>元素内容前插入内容 */
p::before {
  content: "【";
  color: green;
}
 
/* 在每个<p>元素内容后插入内容 */
p::after {
  content: "】";
  color: purple;
}




/* 使所有<div>元素浮动到左边 */
div {
  float: left;
}

注意：由于浮动可能导致布局问题，建议使用更现代的布局技术，如Flexbox或Grid布局系统。