Home > List of blog posts > css选择器的属性与用法以及伪类选择器的用法讲解

Blogger Information

Blog 9

fans 0

comment 0

visits 6852

Special Recommendation

More>

Related recommendations

1 简单选择器

1.1 种类

序号	选择器	描述	举例
1	元素选择器	根据元素标签名称进行匹配	`div {...}`
2	群组选择器	同时选择多个不同类型的元素	`h1,h2,h3{...}`
3	通配选择器	选择全部元素,不区分类型	`* {...}`
4	属性选择器	根据元素属性进行匹配	`*[...]`
5	类选择器	根据元素 class 属性进行匹配	`*.active {...}`
6	id 选择器	根据元素 id 属性进行匹配	`*#top {...}`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简单选择器</title>
    <style>
      /* 类选择器:选择一类元素,也属于属性选择器一种,对应着元素中的class */
      .container {
        width: 300px;
        height: 300px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }
      /* 类选择器 */
      .item {
        font-size: 2rem;
        /* background-color: lightskyblue; */
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /* 简单元素选择器 */
      /* 改不了的原因是因为在上面的时候设置的所以类为item的颜色 */
      /* 标签 < class < id */
      /* 当然再用一次同等级的也可以修改设置过的 */
      /* .container {
        background-color: black;
      } */
      *#bl.item {
        background-color: #fff;
      }
      .item#bl {
        background-color: black;
      }
      /* 类选择器, class 权重 大于 标签 */
      .item#first {
        background-color: lightpink;
      }
      /* id的权重大于class */
      *#first.item {
        background-color: violet;
      }
      /* 类选择器
      .item {
        background-color: gold;
      }
      /* 多类选择器 */
      /* .item.center {
        background-color: red;
      }
      /* id选择器 */
      /* #bl {
        background-color: hotpink;
      } */
      /* 所有元素选择器 */
      /* *.item {
        background-color: indigo;
      }   */
      /* 群组选择器 */
      .item1,
      .item2,
      .item3 {
        background-color: red;
      }
      /* 属性值选择器 */
      /* 下面的写法都可以 */
      /* 在这里我改了class的值所以678作用不到上面写的css样式 */
      .item[title] {
        background-color: lightcoral;
      }
      .item[title="5"] {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="container" id="qb">
      <p class="item" id="bl">1</p>
      <div class="item" id="bl">2</div>
      <div class="item">3</div>
      <div class="item center">4</div>
      <div class="item" title="5">5</div>
      <div class="item1">6</div>
      <div class="item2">7</div>
      <div class="item3">8</div>
      <div class="item">9</div>
    </div>
  </body>
</html>

总结要注意选择器的优先级标签 < class< id。
当多个选择器同时和单个选择器选择同一个元素是多个选择器的内容会覆盖单个选择器的内容。
id 和 css 都属于属性选择器只是用的比较多说以专门分出来了。

2 上下页选择器

2.1 一个元素的四种角色

序号	角色	描述
1	祖先元素	拥有子元素,孙元素等所有层级的后代元素
2	父级元素	仅拥有子元素层级的元素
3	后代元素	与其它层级元素一起拥有共同祖先元素
4	子元素	与其它同级元素一起拥有共同父级元素

2.2 四种上下文选择器

序号	选择器	操作符	描述	举例
1	后代选择器	`空格`	选择当前元素的所有后代元素	`div p`, `body *`
2	父子选择器	`>`	选择当前元素的所有子元素	`div > h2`
3	同级相邻选择器	`+`	选择拥有共同父级且相邻的元素	`li.red + li`
4	同级所有选择器	`~`	选择拥有共同父级的后续所有元素	`li.red ~ li`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>上下文选择器</title>
    <style>
      /* 类选择器:选择一类元素,也属于属性选择器一种,对应着元素中的class */
      .container {
        width: 300px;
        height: 300px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }
      /* 类选择器 */
      .item {
        font-size: 2rem;
        background-color: lightskyblue;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /* 上下文选择器 */
      /* 后代选择器 */
      /* 受到上面类选择器的影响这里看不到 */
      div p {
        background-color: red;
      }
      /* 用同等级或高以及优先级的选择器进行调整背景色。 */
      .container p {
        background-color: #fff;
      }
      /* 父子选择器 */
      /* 受到上面类选择器的影响这里的标签父子选择器看不到 */
      div > p {
        background-color: blue;
      }
      /* 这个可以 */
      .container > p {
        background-color: blue;
      }
      /* 使用后代选择器模拟父子选择器 */
      div div#bl {
        background-color: brown;
      }
      /* 同级相邻选择器 */
      /* 选择与第4个相邻的,即后面的"一个"元素 */
      /* 但要注意这里用类选择器只能选择+后面类一样的标签 */
      /* .item.center + .item {
        background-color: lightgreen;
      } */
      /* 同级所有选择器 */
      /* 选择与第4个后面的,有共同父级的所有兄弟元素 */
      /* 但要注意这里用类选择器只能选择~后面类一样的标签 */
      .item.center ~ .item1 {
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div class="container" id="qb">
      <p class="item" id="bl">1</p>
      <div class="item" id="bl">2</div>
      <div class="item">3</div>
      <div class="item center">4</div>
      <div class="item" title="5">5</div>
      <div class="item">6</div>
      <div class="item1">7</div>
      <div class="item">8</div>
      <div class="item1">9</div>
      <p class="item">10</p>
      <strong class="item">11</strong>
    </div>
  </body>
</html>

在文档中每一个元素都有自己的位置,即上下文关系所以, 完全可以根据元素的上下文关系,来获取到它们。

3 伪类选择器

场景	描述
结构伪类	根据子元素的位置特征进行选择
表单伪类	根据表单控件状态特征进行选择

*伪类最重要的应用场景:

3.1 结构伪类

3.1.1 不分组匹配

序号	选择器	描述	举例
1	`:first-child`	匹配第一个子元素	`div :first-child`
2	`:last-child`	匹配最后一个子元素	`div :last-child`
3	`:only-child`	选择元素的唯一子元素	`div :only-child`
4	`:nth-child(n)`	匹配任意位置的子元素	`div :nth-child(n)`
5	`:nth-last-child(n)`	匹配倒数任意位置的子元素	`div :nth-last-child(n)`

3.1.2 分组匹配

序号	选择器	描述	举例
1	`:first-of-type`	匹配按类型分组后的第一个子元素	`div :first-of-type`
2	`:last-of-type`	匹配按类型分组后的最后一个子元素	`div :last-of-type`
3	`:only-of-type`	匹配按类型分组后的唯一子元素	`div :only-of-type`
4	`:nth-of-type()`	匹配按类型分组后的任意位置的子元素	`div :nth-of-type(n)`
5	`:nth-last-of-type()`	匹配按类型分组后倒数任意位置的子元素	`div :nth-last-of-type(n)`

允许使用表达式来匹配一组元素,表达式中的”n”是从”0”开始计数,且必须写到前面
“-n”表示获取前面一组元素,正数表示从指定位置获取余下元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 类选择器:选择一类元素,也属于属性选择器一种,对应着元素中的class */
      .container {
        width: 300px;
        height: 300px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }
      /* 类选择器 */
      .item {
        font-size: 2rem;
        background-color: lightskyblue;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /* body , 第一个单元格都 变了 */
      /* 为了防止递归,应该在具体的父元素上调用伪类 */
      /* :nth-child(1) === :first-child */
      .container > :first-child {
        /* background-color: wheat; */
      }
      /* 匹配最后一个 */
      .container > :last-child {
        /* background-color: lightpink; */
      }
      /* 匹配任何一个 */
      /* 索引是从1开始计算 */
      .container > :nth-child(3) {
        /* background-color: lightgreen; */
      }
      /* :nth-child(n)　n: 支持表达式 */
      /* 当n在表达式中的时, 从0开始 */
      .container > :nth-child(2n) {
        /* background-color: magenta; */
      }
      /* even: 代表偶数 */
      .container > :nth-child(even) {
        /* background-color: magenta; */
      }
      /* 选择奇数 */
      .container > :nth-child(2n-1) {
        /* background-color: lightsalmon; */
      }
      /* odd: 代表奇数 */
      .container > :nth-child(odd) {
        /* background-color: lightsalmon; */
      }
      /* 只选择前三个 */
      /* n: 0开始 */
      /* -0 + 3 = 3
      -1 +3 = 2
      -2 +3 = 1 */
      .container > :nth-child(-n + 3) {
        /* background-color: lightgreen; */
      }
      /* 选择倒数第2个 */
      .container :nth-last-child(2) {
        /* background-color: lime; */
      }
      /* 从第4个开始,选择剩下的所有元素 */
      .container > :nth-child(n + 4) {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="container" id="qb">
      <p class="item" id="bl">1</p>
      <div class="item" id="bl">2</div>
      <div class="item">3</div>
      <div class="item center">4</div>
      <div class="item1" title="5">5</div>
      <div class="item1">6</div>
      <div class="item1">7</div>
      <div class="item1">8</div>
      <div class="item">9</div>
    </div>
  </body>
</html>

伪类选择器分为结构伪类: 不分组匹配和结构伪类: 分组匹配。
伪类选择器任然属于类选择器的一种。
运用伪类选择器时要注意应该在具体的父元素上调用伪类。否则会造成递归。

3.3 其它伪类

序号	选择器	描述
1	`:active`	向被激活的元素添加样式
2	`:focus`	向拥有键盘输入焦点的元素添加样式
3	`:hover`	当鼠标悬浮在元素上方时，向元素添加样式
4	`:link`	向未被访问的链接添加样式
5	`:visited`	向已被访问的链接添加样式
5	`:root`	根元素,通常是`html`
5	`:empty`	选择没有任何子元素的元素(含文本节点)
5	`:not()`	排除与选择器参数匹配的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>其他伪类</title>
  <style>
      a:link {
        background-color: darkblue;
      }
  </style>
</head>
<body>
  <!-- <a href="http://www.php.cn" style="background-color: white;">php</a> -->
  <!-- 当用到行内样式的时候就不用在使用伪类了他们作用一样。 -->
  <a href="http://www.php.cn" >php</a>
</body>
</html>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：很好

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

HTML5基础

2020-04-03 17:56:11