JQiue's notes

选择器

发布于 2021-06-28

选择器简单来说就是 CSS 通过某一种特征来选中 HTML 元素的工具，并应用相关样式

基本选择器

基本选择器有：

  • 标签
  • id
  • 类
  • 通配符
  • 属性

通过 HTML 标签名称匹配元素，选中当前页面上所有此类型的元素，无论藏的有多深，但是不能选中某一个：标签名 {样式声明}

::: normal-demo 标签选择器

<p>标签选择器<p>
<ul>
  <li>
    <ul>
      <li>
        <p>标签选择器</p>
      </li>
    </ul>
  </li>
</ul>

p {
  color: red;
}

:::

由于元素的id属性是唯一的，也可以通过id选择器来选中具体的元素，#id属性值 {样式声明} = [id=属性值] {样式声明}（属性选择器）

::: normal-demo id 选择器

<p>id 选择器<p>
<ul>
  <li>
    <ul>
      <li>
        <p id="identity">id 选择器</p>
      </li>
    </ul>
  </li>
</ul>

#identity {
  color: red;
}

:::

如果想要设置某些元素的样式，但是又不能全部选中，因此标签选择器和 id 选择器是不适合的，但是元素的类名是可以重复的：.类名 {样式声明} = [class~=类名] {样式声明}

::: normal-demo 类选择器

<p>类选择器<p>
<p class="p-red">类选择器<p>
<ul>
  <li>
    <ul>
      <li>
        <p class="p-red">类选择器</p>
      </li>
    </ul>
  </li>
</ul>

.p-red {
  color: red;
}

:::

一个 HTML 元素的class属性也可以有多个取值

::: normal-demo 类选择器

<p>类选择器<p>
<p class="p-red">类选择器<p>
<ul>
  <li>
    <ul>
      <li>
        <p class="p-red p-font">类选择器</p>
      </li>
    </ul>
  </li>
</ul>

.p-red {
  color: red;
}
.p-font {
  font-size: 18px;
}

:::

::: tip id 和 class id 是唯一的，一个 HTML 标签只能绑定一个 id 值，class 并不是唯一的，可以绑定多个值，一般情况下 id 是配合 JavaScript 使用的，否则不要使用 id 设置样式。合理的利用 class 设置样式，可以减少一些冗余的代码，这很能看出一个人的水平 :::

*就是一个通配符选择器，匹配页面上所有的元素：* {样式声明}

::: normal-demo 通配符选择器

<p>通配符选择器</p>
<ul>
  <li>通配符选择器</li>
  <li>通配符选择器</li>
</ul>

* {
  color: green;
}

:::

属性选择器是根据已存在的属性名或属性值匹配元素

/* 存在 title 属性的元素 */
[title] {
  color: purple;
}

/* 存在 title 属性并且属性值是 "https://jinqiu.wang" 的元素 */
[title="https://jinqiu.wang"] {
  color: green;
}

/* 存在 id 属性并且属性值子串包含 "jinqiu" 的元素 */
[id*="jinqiu"] {
  color: blue;
}

/* 存在 id 属性并且属性值结尾是 ".wang" 的元素 */
[id$=".wang"] {
  color: red;
}

/* 存在 class 属性并且属性值是多个，包含"logo"的元素 */
[class~="logo"] {
  color: pink;
}

::: normal-demo 属性选择器

<div title="foo">foo<div>
<div title="https://jinqiu.wang">bar<div>
<div id="wjq">quz<div>
<div data-suffix="https://jinqiu.wang">qux<div>
<div class="header logo">class<div>

[title] {
  color: purple;
}
[title="https://jinqiu.wang"] {
  color: green;
}
[id*="wjq"] {
  color: blue;
}
[data-suffix$=".me"] {
  color: red;
}
[class~="logo"] {
  color: pink;
}

:::

关系选择器

由多个选择器构成的复合选择器，通过元素在其位置的上下文关系来选中，至少需要两个选择器构成

选择器关系选择的元素
A E（后代）元素 A 的任意后代元素 E (后代节点指 A的 子节点，子节点的子节点，以此类推)
A>E（直接子元素）元素 A 的任意子元素 E (也就是直系后代)
B+E（相邻兄弟）元素 B 的任意下一个兄弟元素 E
B~E（相同兄弟）B 元素的之后的所有同级元素 E
AB（相交）A 元素和 B 元素相交的元素
A,B（并集）元素 A 和元素 B 并集的元素

后代选择器匹配指定元素的所有后代元素，无论有多深

::: normal-demo 后代选择器

<p>后代元素</p>
<div class="parent">
  <p>后代元素</p>
  <p>后代元素</p>
  <div>
    <p>后代元素</p>
    <p>后代元素</p>
  </div>
</div>
<p>后代元素</p>

.parent p {
  color: red;
}

:::

直接子元素选择器匹配指定元素的直接子元素，而不是所有的1后代元素

::: normal-demo 子元素选择器

<p>子元素</p>
<div class="parent">
  <p>子元素</p>
  <p>子元素</p>
  <div>
    <p>子元素</p>
    <p>子元素</p>
  </div>
</div>
<p>子元素</p>

.parent>p {
  color: red;
}

:::

交集选择器匹配指定元素之间的相交元素

::: normal-demo 交集选择器

<p>交集元素</p>
<p class="foo">交集元素</p>
<p class="foo">交集元素</p>
<p>交集元素</p>

p.foo {
  color: red;
}

:::

并集选择器匹配指定选择器中所有的并集元素

::: normal-demo 并集选择器

<p class="foo">并集元素</p>
<p class="bar">并集元素</p>
<p class="foo">并集元素</p>
<p class="bar">并集元素</p>

.foo,.bar {
  color: red;
}

:::

相邻兄弟选择器选中紧跟在指定元素后面的元素，一定是相邻的

::: normal-demo 相邻兄弟选择器

<div>相邻兄弟选择器</div>
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
<div>相邻兄弟选择器</div>
<p>相邻兄弟选择器</p>

div+p {
  color: red;
}

:::

通用兄弟选择器选中指定元素后面的元素，不一定相邻

::: normal-demo 通用兄弟选择器

<div>通用兄弟选择器</div>
<p>通用兄弟选择器</p>
<span>通用兄弟选择器</span>
<p>通用兄弟选择器</p>
<div>通用兄弟选择器</div>
<p>通用兄弟选择器</p>
<p>通用兄弟选择器</p>

div~p {
  color: red;
}

:::

序号选择器

根据元素在文档中所处的位置来选中，看起来和伪类一样，其实不一样

  • :first-child：同级第一个元素
  • :last-child：同级最后一个元素
  • :first-of-type：同级中同类型第一个元素
  • :last-of-type：同级中同类型最后一个元素
  • :nth-child(an+b)：同级别第 n 个元素，从前往后
  • :nth-last-child(an+b)：同级别第 n 个元素，从后往前
  • :nth-of-type(an+b)：同级中同类型第 n 个元素
  • :nth-last-of-type(an+b)：同级中同类型第 n 个元素，从后往前

::: tip a 和 b 是用户自定义的取值，而 n 是一个计数器，从 0 开始递增，如果取值为odd，则选中所有的奇数元素，even则选中所有的偶数元素 :::

嵌套选择器

::: normal-demo 嵌套选择器

<p class="parent">
  <span class="child">red</span>
  <p>normal</p>
  <p>normal</p>
  <p>normal</p>
</p>

.parent {
  & .child {
    color: red;
  }
}

:::

伪类

伪类一般反映的是无法在 CSS 中可以轻松可靠检测到的元素的状态或者属性，同一个标签，根据不同的状态，有不同的样式

  • 静态伪类：只能用于超链接的样式
    • :link：超链接点击之前
    • :visited：超链接点击之后
  • 动态伪类：所有的标签都适用
    • :hover：鼠标放到元素上
    • :active：鼠标长按元素，没有松开
    • :focus：某个元素获得了焦点（比如输入框）
    • :empty：选中空标签
    • :enabled：选中有效的表单元素
    • :disabled：选中无效的表单元素
    • :checked：选中已勾选的单选按钮或复选框
    • :root：选择根元素
    • :not(selector)：选择不符合指定选择器的元素

::: normal-demo 伪类

<a href="www.taobao.com">淘宝</a>

a:link {
  color: red;
}

a:visited {
  color: green;
}

a:hover {
  color: blue;
}

a:active {
  color: purple;
}

:::

::: tip 超链接的四种状态 <a>标签有四种伪类：link,visited,hover,active

必须按照”爱恨原则“顺序进行书写，即：love hate，否则有的不会生效 :::

伪元素

伪元素即是虚拟的元素，是一个附加到选择器末尾的关键词，在 CSS2 中伪元素通常用一个:来表示，但是为了区分和伪类的关系，在 CSS3 中引入了::来表示

  • ::before：成为匹配选中元素的第一个子元素
  • ::after：成为匹配选中元素的最后一个子元素
  • ::first-letter：选中元素（必须是块级）的第一个字母
  • ::first-line：选中元素（必须是块级）的首行
  • ::selection：选中被高亮的部分

使用::before或::after的选择器，通过content属性来为这个伪元素添加内容

::: normal-demo 伪元素

<span>内容</span>

span::before {
  content: "♥";
}

span::after {
  content: "→";
}

:::

content 属性可以插入内容，也可以不插入，也可以插入图片，也可以通过attr()获取元素的属性插入

::: normal-demo 通过 attr() 获取属性内容

<span id="1">内容</span>

span::before {
  content: attr(id);
}

:::