[分享]css3新增选择器包括哪些

CSS3是CSS的升级版本，引入了很多新特性，其中就包括新增了一些选择器。这些选择器在实际开发中可以帮助我们更方便、高效地操作文档节点，以下是CSS3新增的选择器：/ 属性选择器 / / 匹配所有包含...

CSS3是CSS的升级版本，引入了很多新特性，其中就包括新增了一些选择器。这些选择器在实际开发中可以帮助我们更方便、高效地操作文档节点，以下是CSS3新增的选择器：

/* 属性选择器 */
/* 匹配所有包含class属性的元素 */
[class] {
  color: red;
}

/* 匹配所有class属性为"btn"的元素 */
[class="btn"] {
  background-color: green;
}

/* 匹配所有class属性值以"btn-"开头的元素 */
[class^="btn-"] {
  border: 1px solid black;
}

/* 匹配所有class属性值以"btn-"结尾的元素 */
[class$="-btn"] {
  padding: 10px;
}

/* 匹配所有class属性值包含"btn"的元素 */
[class*="btn"] {
  font-size: 16px;
}

/* 伪类选择器 */
/* 匹配第一个子元素 */
li:first-child {
  font-weight: bold;
}

/* 匹配最后一个子元素 */
li:last-child {
  font-style: italic;
}

/* 匹配奇数子元素 */
li:nth-child(odd) {
  text-decoration: underline;
}

/* 匹配偶数子元素 */
li:nth-child(even) {
  text-decoration: line-through;
}

/* 匹配鼠标指针移到元素上时的状态 */
a:hover {
  color: blue;
}

/* 匹配选中的元素 */
input:checked {
  background-color: yellow;
} 

以上便是CSS3新增的部分选择器，它们的特殊特性可以帮助开发者更方便地选择和操纵文档节点，提高开发效率。