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

1.3 伪元素选择器(★★★) ​

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

伪元素选择器说明示例
::before在元素内容前插入内容p::before { content: "→ "; }
::after在元素内容后插入内容p::after { content: " ←"; }
::first-letter选择元素内容的第一个字母p::first-letter { font-size: 2em; }
::first-line选择元素内容的第一行p::first-line { font-weight: bold; }
::selection选择用户选中的内容::selection { background: yellow; }

示例代码

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>
        div {
            height: 100px;
            width: 100px;
            background-color: pink;
        }
        div::before {
            content: '我';
        }
        div::after {
            content: '人';
        }
    </style>

</head>
<body>
    <div>是</div>
</body>
</html>

img_136.png

  • before 和 after 创建一个元素，但是属于行内元素，添加高度宽度不生效，可以转换成其他元素添加
  • 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
  • 语法: element::before {}
  • before 和 after 必须有 content 属性
  • before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样，权重为 1
  • content必须写，并且值要带''

1.3.1 应用场景一: 字体图标 ​

在实际工作中，字体图标基本上都是用伪元素来实现的，好处在于我们不需要在结构中额外去定义字体图标的标签，通过content属性来设置字体图标的编码 img_137.png

步骤:

  • 结构中定义div盒子
  • 在style中先申明字体 @font-face
  • 在style中定义after伪元素 div::after
  • 在after伪元素中 设置content属性，属性的值就是字体编码
  • 在after伪元素中 设置font-family的属性
  • 利用定位的方式，让伪元素定位到相应的位置；记住定位口诀：子绝父相
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>
        @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?9ahkcb');
  src:  url('fonts/icomoon.eot?9ahkcb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?9ahkcb') format('truetype'),
    url('fonts/icomoon.woff?9ahkcb') format('woff'),
    url('fonts/icomoon.svg?9ahkcb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
        div {
            position: relative;
            height: 35px;
            width: 200px;
            border: 1px solid red;
        }
        div::after {
            position: absolute;
            top: 5px;
            right: 10px;
            font-family: 'icomoon';
            content: '';
            font-size: 20px;
            color: red;
        }
        
    </style>
</head>
<body>
    <div></div>
</body>
</html>

img_138.png

1.3.2 应用场景二: 仿土豆效果 ​

把之前的代码进行了改善

步骤：

  • 找到之前写过的仿土豆的结构和样式，拷贝到自己的页面中
  • 删除之前的mask遮罩
  • 在style中，给大的div盒子(类名叫tudou的)，设置 before伪元素
  • 这个伪元素充当的是遮罩的角色，所以我们不用设置内容，但是需要设置content属性，属性的值为空字符串
  • 给这个遮罩设置宽高，背景颜色，默认是隐藏的
  • 当鼠标移入到 div盒子时候，让遮罩显示，利用 hover 来实现
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>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 0 auto;
        }
        .tudou img {
            height: 100%;
            width: 100%;
        }
        .tudou::before {
            content: '';
            position: absolute;
            display: none;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3) url(arr.png) no-repeat center;
        }

        .tudou:hover::before {
            display: block;
        }
        
    </style>
</head>
<body>
    <div class="tudou">
        <img src="tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="tudou.jpg" alt="">
    </div>
</body>
</html>

1.3.3 应用场景三: 清除浮动 ​

回忆一下清除浮动的方式:

  • 额外标签法也称为隔墙法，是 W3C 推荐的做法。
  • 父级添加 overflow 属性
  • 父级添加after伪元素
  • 父级添加双伪元素

额外标签法也称为隔墙法，是 W3C 推荐的做法 img68.png

注意: 要求这个新的空标签必须是块级元素
后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化img69.pngimg70.png

Released under the MIT License.

Copyright © 2024-present gqk