文章/答案/技术大牛

发布

社区首页 >专栏 >CSS选择器

CSS选择器

赤蓝紫

发布于 2023-01-02 05:16:13

1.2K00

代码可运行

文章被收录于专栏：clzclz

运行总次数：0

代码可运行

CSS 选择器

1. 标签选择器

<div></div>

div {
  width: 100px;
  height: 100px;
  background-color: pink;
}

2. ID 选择器

<div id="box"></div>

#box {
  width: 100px;
  height: 100px;
  background-color: pink;
}

3. 类选择器

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: pink;
}

4. 通配符选择器*

匹配任何标签。页面标签越多，效率越低

<h3>Hello</h3>
<span>World</span>
<div>!</div>

* {
  color: red;
}

5. 后代选择器

<div class="father">
  Father
  <div>
    Son
    <div>孙子</div>
  </div>
</div>

.father div {
  color: red;
}

6. 子元素选择器

<div class="father">
  Father
  <div>
    Son1
    <div>孙子</div>
  </div>
</div>

div {
  color: blue;
}

.father > div {
  color: red;
}

7. 交集选择器

<h3>h3</h3>
<div class="test">.test</div>
<h3 class="test">h3.test</h3>

h3.test {
  color: red;
}

8. 并集选择器

<h3>h3</h3>
<div class="box">box</div>
<span>span</span>
<h2>h2</h2>

h3,
.box,
span {
  color: red;
}

9. 属性选择器

<a href="javascript:;" title="aa hh" class="a b">aa</a>
<a href="javascript:;" class="b a c">bb</a>
<a href="javascript:;" title class="a">cc</a>
<a href="jsvascript:;" title="ac" class="a-test">ac</a>
<a href="jsvascript:;" title="ca">ca</a>

[attr]

选择存在 attr 属性的元素, attr 属性没有值也会选中

a[title] {
  /** 选择存在title属性的<a>元素, title属性没有值也会选中**/
  color: red;
}

[attr=value]

选择存在 attr 属性且属性值为 value 的元素

a[title="aa"] {
  /** 选择存在title属性且属性值为aa的<a>元素**/
  color: red;
}

[attr*=value]

选择存在 attr 属性且属性值中包含 value 值的元素

a[title*="a"] {
  /** 选择存在title属性且属性值中有a的<a>元素**/
  color: red;
}

[attr^=value]

选择存在 attr 属性且属性值中以 value 值开头的元素

a[title^="a"] {
  /** 选择存在title属性且属性值以a为开头的<a>元素**/
  color: red;
}

[attr$=value]

选择存在 attr 属性且属性值中以 value 值结尾的元素

a[title$="a"] {
  /** 选择存在title属性且属性值以a为结尾的<a>元素**/
  color: red;
}

[attr~=value]

选择存在 attr 属性，且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value 的元素

a[class~="a"] {
  /** 选择存在class属性,且属性值是以空格作为分隔的值一系列值，其中至少有一个属性值是a**/
  color: red;
}

[attr|=value]

选择存在 attr 属性，且属性值为“value”或是以“value-”为前缀的元素

a[class|="a"] {
  /** 选择存在class属性，且属性值为“a”或是以“a-”为前缀的元素**/
  color: red;
}

10. 伪类选择器

伪类：同一个元素，有不同的状态，有不同的样式

可分为两种。

静态伪类：只能用于超链接的样式

:link：超链接点击之前
:visited：超链接被访问之后

<a href="http://www.xxx.com">xxx</a>

a:link {
  color: red;
}

a:visited {
  color: pink;
}

动态伪类：所有标签都使用的样式

:hover：鼠标悬停在标签上的时候
:active：鼠标点击标签，但是还没松手的时候
:focus：标签获得焦点时的样式

<input type="text" value="获得焦点变色(:focus)" />
<p>悬停变色(:hover)</p>
<div class="box">按住变色(:active)</div>

input:focus {
  color: red;
}

p:hover {
  color: blue;
}

.box:active {
  color: purple;
}

超链接的四个状态

:link
:visited
:hover
` :active

在 css 中，超链接的四个状态必须按固定的顺序写： :link -> :visited -> :hover -> :active，否则可能会失效

按顺序一切正常：

<a href="http://www.com">www</a>

a:link {
  color: red;
}

a:visited {
  color: blue;
}

a:hover {
  color: purple;
}

a:active {
  color: pink;
}

:active 换到最前面去：按住链接时，不会变粉色了

a:active {
  color: pink;
}

a:link {
  color: red;
}

a:visited {
  color: blue;
}

a:hover {
  color: purple;
}

原因：

css 样式是由权重的，上面的权重都相同，所以 a:hover 的样式会覆盖掉前面的 a:active 的样式，因为链接被激活时，鼠标也是悬停在链接上方的，所以效果是什么样，就看谁没有被覆盖了。

知道原理后，就可能会提出，这样的话，就没有必要一定要按照顺序了，只需要提高权重就行了。如下：

a:active {
  color: pink !important;
}

a:link {
  color: red;
}

a:visited {
  color: blue;
}

a:hover {
  color: purple;
}

虽然这样子确实可以，但是按照代码规范就可以避免的问题，为什么要绕弯路呢？这样做以后也可能会引发出大问题。

11. 相邻兄弟选择器

相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

<div>
  <p>上</p>
  <h2>相邻兄弟选择器</h2>
  <p>下1</p>
  <p>下2</p>
</div>

h2 + p {
  color: red;
}

12. 通用兄弟选择器

a~b：a 和 b 同级，选择 a 元素之后所有同级的 b 元素

<div>
  <p>上</p>
  <h2>通用兄弟选择器</h2>
  <p>下1</p>
  <p>下2</p>
</div>

<p>不同级</p>

h2 ~ p {
  color: red;
}

13. :nth-child() 选择器

:nth-child()这个伪类选择器会先找到当前元素的兄弟元素，然后按位置先后顺序从 1 开始排序

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Myself</title>
    <style>
      p:nth-child(2) {
        color: red;
        /* 先把p的兄弟元素找出来，排序，因为h2也是p的兄弟元素，所以h2的序号是1,所以p-1会变红 */
      }

      /* ele:nth-child()选择器是用来选择符合条件的ele元素的，所以p:nth-child(1)不会选择到任何元素，因为没有序号为1的p元素 */
    </style>
  </head>

  <body>
    <h2>h2-1</h2>
    <p>p-1</p>
    <p>p-2</p>
    <p>p-3</p>
    <p>p-4</p>
    <p>p-5</p>
    <p>p-6</p>
    <p>p-7</p>
    <p>p-8</p>
  </body>
</html>

其他用法：

如果:nth-child()括号中不是数字而是表达式，如 2n + 1，n 是从零开始整数，所以会选择序号为 1, 3, 5, … , 2n+1 的元素。

p:nth-child(2n + 1)  /* 表示选中序号为奇数的p元素,这里的n是从零开始的 */
p:nth-child(2n)  /* 表示选中序号为偶数数的p元素 */

p:nth-child(odd)	/* 表示选中序号为奇数的p元素 */
p:nth-child(even)	/* 表示选中序号为偶数的p元素 */

p:nth-child(n + 3)	/* 表示选中序号大于等于3的p元素 */
p:nth-child(-n + 3)	/* 表示选中序号小于等于3的p元素 */

:nth-last-child()和:nth-child()用法类似，不同的是它从结尾开始排序。

14. :nth-of-type()选择器

用法和:nth-child()选择器类似。

不同的是：:nth-of-type()选择器是把要选择的元素按先后顺序排序。如下面的例子，p:nth-of-type(2)会先把所有的 p 标签排序，而不是把 p 标签的兄弟元素进行排序，所以变红的就是 p-2

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Myself</title>
    <style>
      p:nth-of-type(2) {
        color: red;
      }
    </style>
  </head>

  <body>
    <h2>h2-1</h2>
    <p>p-1</p>
    <p>p-2</p>
    <p>p-3</p>
    <p>p-4</p>
    <p>p-5</p>
    <p>p-6</p>
    <p>p-7</p>
    <p>p-8</p>
  </body>
</html>