[分享]css3所有选择器

CSS3中引入了许多新的选择器，让我们能够更加方便地定位和操作我们的元素。接下来我们就来了解一下CSS3中所有的选择器：/ 通用选择器 / { margin: 0; padding: 0; } / ...

CSS3中引入了许多新的选择器，让我们能够更加方便地定位和操作我们的元素。接下来我们就来了解一下CSS3中所有的选择器：

/* 通用选择器 */
* {
  margin: 0;
  padding: 0;
}

/* 元素选择器 */
p {
  color: red;
}

/* ID选择器 */
#myId {
  font-weight: bold;
}

/* 类选择器 */
.myClass {
  background-color: yellow;
}

/* 属性选择器 */
a[href="https://www.google.com"] {
  text-decoration: none;
}

/* 伪类选择器 */
a:hover {
  color: blue;
}

/* 相邻兄弟选择器 */
p + p {
  font-style: italic;
}

/* 子选择器 */
ul > li {
  list-style: none;
}

/* 后代选择器 */
div p {
  line-height: 1.5;
}

/* 通用兄弟选择器 */
p ~ ul {
  margin-top: 20px;
}

/* 伪元素选择器 */
p::first-line {
  font-size: 20px;
}

/* 结构伪类选择器 */
input:checked + label {
  background-color: green;
} 

这些选择器可以单独使用，也可结合使用，它们为我们的网页开发提供了更多的想象空间。相信经过学习，我们都能够灵活运用这些选择器来打造漂亮的界面。