OmniStack Lab

Appearance

1.CSS3新增选择器 ​

1.1 属性选择器(★★) ​

属性选择器，按照字面意思，都是根据标签中的属性来选择元素

选择器示例描述
[attr][target]选择带有target属性的元素
[attr=value][target=_blank]选择target="_blank"的元素
[attr~=value][title~=flower]选择title属性包含单词"flower"的元素
[attr|=value][lang|=en]选择lang属性值以"en"开头的元素
[attr^=value]a[href^="https"]选择href属性值以"https"开头的元素
[attr$=value]a[href$=".pdf"]选择href属性值以".pdf"结尾的元素
[attr*=value]a[href*="w3school"]选择href属性值包含"w3school"的元素

示例代码

html
<!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>
        input[value^=请] {
            color: blue;
        }
    </style>
</head>
<body>
    <input type="text" value="请ba输入用户名">
    <input type="text" value="a请输入">
</body>
</html>

img_130.png

  • 属性选择器，按照字面意思，都是根据标签中的属性来选择元素
  • 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器
  • 属性选择器也可以选择出来自定义的属性
  • 注意: 类选择器、属性选择器、伪类选择器，权重为 10。

1.2 结构伪类选择器 ​

结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素

选择器示例描述
:first-childp:first-child选择属于父元素中第一个子元素的p元素
:last-childp:last-child选择属于父元素中最后一个子元素的p元素
:nth-child(n)li:nth-child(2)选择属于父元素中第2个子元素的li元素
:first-of-typep:first-of-type选择属于父元素中第一个p元素
:last-of-typep:last-of-type选择属于父元素中最后一个p元素
:nth-of-type(n)p:nth-of-type(2)选择属于父元素中第2个p元素
:nth-last-child(n)li:nth-last-child(2)选择属于父元素中倒数第2个子元素的li元素
:only-childp:only-child选择属于父元素中唯一子元素的p元素
:nth-last-of-type(n)p:nth-last-of-type(2)选择属于父元素中倒数第2个p元素
:only-of-typep:only-of-type选择属于父元素中唯一类型的p元素

1.2.1 E:first-child/last-child ​

匹配父元素的第一个子元素E

html
<!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>
        ul li:first-child {
            background-color: plum;
        }
        ul li:last-child {
            background-color: plum;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

img_131.png

1.2.2 E:nth-child(n)(★★★) ​

匹配到父元素的第n个元素

  • 匹配到父元素的第2个子元素 ul li:nth-child(2){}
html
<!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>
        ul li:nth-child(2) {
            background-color: plum;
        }
        
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

img_132.png

  • 匹配到父元素的序号为奇数的子元素 ul li:nth-child(odd){} odd 是关键字 奇数的意思(3个字母)
html
<!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>
        ul li:nth-child(odd) {
            background-color: plum;
        }
        
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

img_133.png

  • 匹配到父元素的序号为偶数的子元素 ul li:nth-child(even){} even(4个字母)
html
<!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>
        ul li:nth-child(even) {
            background-color: plum;
        }
        
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

img_134.png

  • 匹配到父元素的前3个子元素ul li:nth-child(-n+3){}
    选择器中的 n 是怎么变化的呢？
    因为 n是从 0 ，1，2，3.. 一直递增
    所以 -n+3 就变成了
    • n=0 时 -0+3=3
    • n=1时 -1+3=2
    • n=2时 -2+3=1
    • n=3时 -3+3=0
    • ...
html
<!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>
        ul li:nth-child(-n+3) {
            background-color: plum;
        }
        
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

img_135.png

一些常用的公式： 公式不是死的，在这里列举出来让大家能够找寻到这个模式，能够理解代码，这样才能写出满足自己功能需求的代码

公式说明示例
nth-child(n)选择第n个子元素li:nth-child(2)
nth-child(odd)选择所有奇数子元素li:nth-child(odd)
nth-child(even)选择所有偶数子元素li:nth-child(even)
nth-child(-n+3)选择前3个子元素(包含第三个)li:nth-child(-n+3)
nth-child(n+3)选择第3个开始之后的子元素(包含第三个)li:nth-child(-n+3)
nth-child(2n)选择所有偶数子元素li:nth-child(2n)
nth-child(2n+1)选择所有奇数子元素li:nth-child(2n+1)
nth-child(3n)选择每第3个子元素li:nth-child(3n)
nth-child(3n+1)选择从第1个开始的每第3个子元素li:nth-child(3n+1)

1.2.3 E:nth-child 与 E:nth-of-type 的区别 ​

这里只讲明 E:nth-child(n) 和 E:nth-of-type(n) 的区别 剩下的 E:first-of-type E:last-of-type E:nth-last-of-type(n) 同理做推导即可

html
<!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>
    ul li:nth-child(2){
      /* 字体变成红色 */
        color: red;
    }

    ul li:nth-of-type(2){
      /* 背景变成绿色 */
      background-color: green;
    }
  </style>

</head>
<body>
    
  <ul>
    <li>列表项一</li>
    <p>乱来的p标签</p>
    <li>列表项二</li>
    <li>列表项三</li>
    <li>列表项四</li>
  </ul>
</body>
</html>

img67.png

也就是说:

  • E:nth-child(n) 匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配
  • E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子

1.2.4 总结 ​

  • 结构伪类选择器一般用于选择父级里面的第几个孩子
  • nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配
  • nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
  • 关于 nth-child（n） 我们要知道 n 是从 0 开始计算的，要记住常用的公式
  • 如果是无序列表，我们肯定用 nth-child 更多
  • 类选择器、属性选择器、伪类选择器，权重为 10

Released under the MIT License.

Copyright © 2024-present gqk