首页
开源之旅
朋友们
标签
分类
实验室
GitHub

目录

---------

代码仓库：Plumbiu/css_review_selector

基本选择器

类型选择器

类型选择器也叫做“标签名选择器”或者是“元素选择器”，是由于在文档中选择了一个 HTML 标签/元素：

css
PlainText
h1 {
  color: red;
}
div {
  margin: 0;
}
/* ... */

类选择器

当 HTML 标签/元素设置 class 属性时，我们可以通过类选择器(.)选择：

html
PlainText
<div class="box">class=box</div>
css
PlainText
.box {
  color: red;
}

ID 选择器

当 HTML 标签/元素设置 id 属性时，我们可以通过 ID 选择器(#)选择：

html
PlainText
<div id="box">id=box</div>
css
PlainText
#box {
  color: red;
}

全局选择器

全局元素器由一个 * 代指，表示文档中所有内容

css
PlainText
* {
  margin: 0;
}

属性选择器

存否和值选择器

这些选择器允许我们基于元素某个属性(例如 href)是否存在，来匹配对应的元素

选择器示例示例描述
[attr]a[title]匹配一个带有 attr 属性的元素
[attr=value]a[href=“https://blog.plumbiu.club”]匹配一个带有属性 attr 且属性 attr 值为 value 的元素
[attr~=value]a[class=“special”]匹配一个带有属性 attr 且 attr 中含有 value 的值(因为像是 class 类名可以用空格分隔多个值)
[attr|=value]div[lang|=“zh”]匹配一个带有 attr 属性 且 attr 值正为 value，或者开始为 value，后面紧跟一个连字符的元素

注：连字符为 -

代码示例：

html
PlainText
<style>
  li[class] {
    background-color: skyblue;
    margin: 20px 0;
  }
  li[class='a'] {
    color: white;
  }
  li[class~='a'] {
    background-color: orange;
  }
  li[class|='a'] {
    color: yellow;
  }
</style>
<body>
  <ul>
    <li class>11111</li>
    <li class="a">11111</li>
    <li class="a b">11111</li>
    <li class="a-b">11111</li>
  </ul>
</body>

效果：

子字符串匹配选择器

选择器示例描述
[attr^=value]li[class^=“box-”]匹配一个 class 以 box- 开头的 li 标签
[attr$=value]li[class$=“-box”]匹配一个 class 以 -box 结尾的 li 标签
[attr*=value]li[class*=“box”]匹配一个 class 含有 value 的 li 标签
css
PlainText
<style>
    li[class^="a"] {
      	background-color: skyblue;
    }
    li[class$="a"] {
      	background-color: orange;
    }
    li[class*="a"] {
      	color: white;
    }
</style>
<body>
  	<ul>
    	<li class="a-">11111</li>
    	<li class="cba">11111</li>
    	<li class="b-a">11111</li>
    	<li class="app">11111</li>
  	</ul>
</body>

效果：

大小写不敏感

如果想在大小写不敏感的情况下，匹配属性值，可以在闭合括号之前，使用 i 值。

css
PlainText
li[class='a' i] {
  color: red;
}

关系选择器

后代选择器

格式如下，相当于选择 class 为 box 的所有后代的 p 标签

css
PlainText
.box p {
  color: red;
}

子代关系选择器

格式如下，相当于选择 class 为 box 的子代所有 p 标签

css
PlainText
.box > p {
  color: red;
}

相邻兄弟选择器

格式如下，相当于选择 class 为 box 的子代所有 p 标签的相邻兄弟标签 span

注：选择的是 span 标签

css
PlainText
.box > p + span {
  color: red;
}

通用兄弟选择器

如果我们想要选中一个兄弟元素(即同级元素)，即使他们不相邻，可以使用通用兄弟选择器，格式如下：

css
PlainText
.box > p ~ span {
  color: red;
}