css基础-选择器

一、基础选择器

通配符 *

类型选择器

1
2
3
span {
  color: red;
}

类名选择器

1
2
3
.test {
  color: red;
}

id 选择器

1
2
3
#test {
  color: red;
}

属性选择器

包含属性 [attr]

1
<span disabled></span>
1
2
3
span[disabled] {
  border: 1px solid red;
}

属性完全等于目标值 [attr=value]

1
<span name="username"></span>
1
2
3
span[name='username'] {
  border: 1px solid red;
}

属性值字符串包含 value [attr*=value]

1
<span name="1test12"></span>
1
2
3
span[name*='test'] {
  border: 1px solid red;
}

属性值字符等于 value 或者以 value 开头以-连接，多用来匹配语言的代码段 [attr|=value]

1
2
3
<span name="zh-CN"></span>

<span name="zh"></span>
1
2
3
span[name|='zh'] {
  border: 1px solid red;
}

属性值 中包含 value [attr~=value]

1
<span class="name test red"></span>
1
2
3
span[class~='test'] {
  border: 1px solid red;
}

属性值字符串以 value 开头 [attr^=value]

1
<span name="test111"></span>
1
2
3
span[name^='test'] {
  border: 1px solid red;
}

属性值字符串以 value 结尾 [attr$=value]

1
<span name="test_item"></span>
1
2
3
span[name$='item'] {
  border: 1px solid red;
}
属性操作符
  • i 忽略大小写
1
<span name="UserName"></span>
1
2
3
span[name='username' i] {
  color: red;
}
  • s 大小写敏感
1
<span name="username"></span>
1
2
3
span[name='username' s] {
  color: red;
}

二、关系选择器

兄弟选择器

同一个父级即可,无关元素顺序 A ~ B,匹配与 A 相同父级的所有 B

1
2
3
4
5
6
7
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span>
<span>And this is a red span!</span>
<code>More code...</code>
<div>How are you?</div>
<p>Whatever it may be, keep smiling.</p>
1
2
3
p ~ span {
  color: red;
}

同一父级且相邻的元素 A + B,匹配 A,B 同一父级且 A,B 相邻的 B

1
2
3
4
5
<ul>
  <li>One</li>
  <li>red</li>
  <li>Three</li>
</ul>
1
2
3
li:first-of-type + li {
  color: red;
}

后代选择器

直接子节点,A > B,匹配 A 的直接子节点 B

1
2
3
4
5
6
7
<div>
  <span
    >red
    <span>normal</span>
  </span>
  <span>red</span>
</div>
1
2
3
div > span {
  background-color: red;
}

任意子元素, A B,匹配 A 下面的所有 B

1
2
3
4
5
6
7
<div>
  <span
    >red
    <span>red</span>
  </span>
  <span>red</span>
</div>
1
2
3
div > span {
  background-color: red;
}

参考链接：CSS reference