css常用的选择器

CSS选择器及示例

• 元素选择器：

p {
  color: blue;
}

• 类选择器：

.example {
  background-color: yellow;
}

• ID选择器：

#header {
  font-size: 36px;
}

• 后代选择器：

ul li {
  list-style-type: disc;
}

• 子元素选择器：

ul > li {
  font-weight: bold;
}

• 相邻兄弟选择器：

h1 + p {
  font-style: italic;
}

• 通用选择器：

* {
  font-family: Arial, sans-serif;
}

CSS3选择器及示例

• 属性选择器：

input[type="email"]{
  border-radius: 5px;
}

• 伪类选择器：

a:hover {
  color: red;
}

• 伪元素选择器：

p::before {
  content: "Note: ";
  font-style: italic;
}

• 结构化伪类选择器：

li:nth-child(even) {
  background-color: #f2f2f2;
}

• 组合选择器：

a:hover, a:active{
  text-decoration: underline;
}

• 属性操作符：

a[href^="https"]{ 
  color: green;
}