HTML5新增的Css选择器、伪类介绍

HTML5新增了一些CSS选择器和伪类，让我们能够更加方便地对选定的HTML元素进行样式的控制。

增强型属性选择器

HTML5新增了一些增强型属性选择器，可以根据属性值的匹配方式来选择相应的元素。

[attribute^=value]

查询属性值以value开头的元素，例如：

<div class="round corner"></div>
<div class="cornered"></div>

div[class^="round"] {
  color: red;
}

以上CSS代码会将class属性值以"round"开头的div元素文字颜色设为红色。

[attribute$=value]

查询属性值以value结尾的元素，例如：

<div class="flower red"></div>
<div class="red"></div>

div[class$="red"] {
  background: green;
}

以上CSS代码会将class属性值以"red"结尾的div元素背景色设为绿色。

[attribute*=value]

查询属性值包含value的元素，例如：

<div class="apple red"></div>
<div class="banana red_hot"></div>

div[class*="red"] {
  border: 1px solid blue;
}

以上CSS代码会将class属性值包含"red"的div元素边框设为蓝色。

伪类选择器

HTML5新增了一些伪类选择器，用于匹配特定的元素状态或位置。

:first-of-type

匹配同元素名称中的首个元素，例如：

<ul>
  <li>1st</li>
  <li></li>
  <li>2nd</li>
  <li>3rd</li>
</ul>

li:first-of-type {
  color: red;
}

以上CSS代码会将ul列表中的第一个li元素文字颜色设为红色。

:last-of-type

匹配同元素名称中的末个元素，例如：

<ul>
  <li></li>
  <li>1st</li>
  <li>2nd</li>
  <li>3rd</li>
</ul>

li:last-of-type {
  color: blue;
}

以上CSS代码会将ul列表中的最后一个li元素文字颜色设为蓝色。

以上是HTML5新增的一些CSS选择器和伪类，为我们提供了更多的样式控制选项，让我们的页面设计更加简洁明了。