Css提高——Css3的新增选择器

在CSS3中，新增了一些选择器，以下是一些常用的CSS3选择器：

1. 属性选择器：用于选择包含特定属性的元素，或者属性值满足特定模式的元素。

/* 选择所有具有data-info属性的元素 */
[data-info] {
  color: blue;
}
 
/* 选择所有name属性为"john"的元素 */
[name='john'] {
  background-color: yellow;
}
 
/* 选择所有name属性值开始为"john"的元素 */
[name^='john'] {
  border: 1px solid black;
}

2. 结构性伪类选择器：用于选择基于文档结构的元素，如：父子关系、兄弟关系等。

/* 选择每个<p>的第一个子元素 */
p > :first-child {
  font-style: italic;
}
 
/* 选择每个<p>的最后一个子元素 */
p > :last-child {
  text-transform: uppercase;
}
 
/* 选择每个<ul>的第2个子元素 */
ul > :nth-child(2) {
  color: red;
}
 
/* 选择每个<ul>的最后一个子元素 */
ul > :last-child {
  color: green;
}

3. UI元素状态选择器：用于选择基于用户界面状态的元素，如：焦点、悬停、访问等。

/* 选择获得焦点的<input>元素 */
input:focus {
  border: 2px solid red;
}
 
/* 选择被鼠标悬停的<a>元素 */
a:hover {
  text-decoration: underline;
}
 
/* 选择被访问的<a>元素 */
a:visited {
  color: purple;
}

4. 伪元素选择器：用于选择一些选择器所生成的内容，或者某些元素的特殊部分。

/* 选择每个<p>元素生成的内容之前 */
p::before {
  content: '[';
}
 
/* 选择每个<p>元素生成的内容之后 */
p::after {
  content: ']';
}
 
/* 选择每个<p>的第一个字母 */
p::first-letter {
  font-size: 200%;
}

这些选择器可以帮助您更精确地选择和样式化您的网页元素，从而创建更复杂和响应式的设计。