制作css选择器

CSS选择器基础语法

元素选择器直接使用HTML标签名匹配元素：

p {
  color: blue;
}

类选择器通过.前缀匹配class属性：

.className {
  font-size: 16px;
}

ID选择器通过#前缀匹配id属性：

#header {
  background: #fff;
}

复合选择器

后代选择器用空格分隔匹配嵌套关系：

div p {
  line-height: 1.5;
}

子元素选择器用>匹配直接子元素：

ul > li {
  list-style: none;
}

相邻兄弟选择器用+匹配紧接元素：

h1 + p {
  margin-top: 0;
}

属性选择器

匹配特定属性存在：

a[target] {
  color: red;
}

精确匹配属性值：

input[type="text"] {
  border: 1px solid #ccc;
}

部分匹配属性值：

img[src*="logo"] {
  width: 100px;
}

伪类选择器

链接状态伪类：

a:hover {
  text-decoration: underline;
}

结构伪类：

li:nth-child(odd) {
  background: #f5f5f5;
}

表单伪类：

input:focus {
  outline: 2px solid blue;
}

伪元素选择器

插入内容：

p::before {
  content: "→";
}

文本修饰：

p::first-line {
  font-weight: bold;
}

选择器组合

群组选择器用逗号分隔：

h1, h2, h3 {
  font-family: sans-serif;
}

链式选择器连续使用：

button.primary.large {
  padding: 12px 24px;
}