选择器和伪元素

目标选择器

　　div > p：选择 div 的直接子代 p。

　　div + p：选择 div 后紧跟着的 p。

　　a[target]：通过 a 标签的 target 属性设置样式。

　　input[type="text"]：根据 input 的 type 属性值来设置样式，给 type 值是 text 的 input 设置样式

复制代码
<!DOCTYPE html>
<html lang="en">

<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>Document</title>
  <style>
    /* div > p 选择div的直接子代p */
    div>p {
      background: cyan;
    }

    /* div + p div后紧跟着的p 下一个兄弟元素 */
    div+p {
      background: gray;
    }

    /* 通过 a 标签的 target 属性来设置样式 */
    a[target] {
      background-color: red;
    }

    /* 根据 input 的 type 属性值来设置样式，给 type 值是 text 和 email 的 input 设置样式 */
    input[type="text"],
    input[type="email"] {
      width: 100%;
      margin-bottom: 5px;
    }
  </style>
</head>

<body>
  <div>
    <p>Lorem ipsum dolor sit amet.
    <ul>
      <li>Item 1</li>
      <li>
        <p>Item 2</p>
      </li>
      <li>Item 3</li>
      </p>
    </ul>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
  <br>
  <a href="#">第一页</a>
  <a href="#">第二页</a>
  <a href="http://www.baidu.com" target="_blank">百度</a>
  <form>
    <input class="input" type="text">
    <input class="input" type="email">
    <input class="input" type="submit">
  </form>
</body>

</html>
复制代码

结构性伪类选择器　

　　li:first-child：选择父元素的第一个子 li 元素。

　　li:last-child：选择父元素的最后一个子 li 元素。

　　li:nth-child(n)：选择第 n 个 li。

　　li:nth-child(nn)：选择 n 的倍数。

　　li:nth-child(nn+7)：从第 7 个开始按 n 的倍数。

　　li:nth-child(odd)：选择奇数

　　li:nth-child(even)：选择偶数

复制代码
<!DOCTYPE html>
<html lang="en">

<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>结构性伪类选择器 nth-child </title>
  <style>
    li {
      margin: 0.25rem;
      padding: 0.25rem;
      list-style: none;
    }

    /* 选择父元素的第一个子li元素 -- 需要有同一个父元素 */
    li:first-child {
      background-color: red;
    }

    /* 选择父元素的最后一个子li元素 -- 需要有同一个父元素 */
    li:last-child {
      background-color: red;
    }

    /* 选择第三个 li  !important：最高级 */
    li:nth-child(3) {
      background-color: purple !important;
    }

    /* 选择3的倍数 */
    li:nth-child(3n) {
      background-color: orange;
    }

    /* 从第七个开始按3的倍数 */
    li:nth-child(3n+7) {
      background-color: yellow;
    }

    /* 选择奇数 */
    li:nth-child(odd) {
      color: cyan;
    }

    /* 选择偶数 */
    li:nth-child(even) {
      color: blue;
    }
  </style>
</head>

<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
    <li>Item 15</li>
    <li>Item 16</li>
    <li>Item 17</li>
    <li>Item 18</li>
    <li>Item 19</li>
    <li>Item 20</li>
  </ul>
</body>

</html>
复制代码

befor & after 伪元素

　　before：在元素前面追加内容，追加的内容放到 content 里

　　after：在元素后面追加内容，追加的内容放到 content 里

　　伪元素是一个虚假的元素，但在表现形式上和真正的元素没有区别

复制代码
<!DOCTYPE html>
<html lang="en">

<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>before & after 伪元素</title>
  <style>
    /* ::after -- 在元素后面追加内容 */
    /* ::before -- 在元素前面追加内容 */
    /* 追加的内容放在 content 里 */
    .required::after {
      content: '*';
      color: red;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      background: #333;
      color: #FFF;
      margin: 0;
    }

    header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      height: 100vh;
    }

    header::before {
      content: '';
      background: url('./index3.jpg') no-repeat center center/cover;
      opacity: .5;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    header>h1 {
      font-size: 4rem;
      margin: 1rem;
    }
  </style>
</head>

<body>
  <!-- <label class="required" for="name">姓名</label>
  <input type="text"> -->
  <header>
    <h1>欢迎来到欧青辣少</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, eius.</p>
  </header>
  <section>
    <h3>Lorem, ipsum dolor.</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus amet sequi ut mollitia est velit impedit! Odio in
      nulla exercitationem dolorum vero quam, saepe dignissimos facere architecto, est repellat harum!</p>
  </section>
</body>

</html>
复制代码

 

posted @   RoddyBryce  阅读(24)  评论(0)  编辑  收藏  举报
相关博文：
·  DOM，创建元素和删除元素
·  CSS变量
·  选择器和伪元素
·  特殊选择器
·  伪类和伪元素
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示