3 html5之css新选择器和属性

要说css的变化那是发展比较快的，新增的选择器也很多，而且还有很多都是比较实用的。这里举出一些案例，看看你平时都是否用过。

1 新增的一些写法：

1.1 导入css

这个是非常好的一个变化。这样可以让我们将css拆分成公共部分或者多个模块化的css,然后在需要的地方按需导入实用。

<style>@import url("css/style.css");</style>

1.2 变量和函数

变量这个自然不用多说，大家用的可能比较多，但是大家也要注意变量的作用域问题。

函数这里重点谈一下。

attr函数：函数用于获取被选中元素的某个 HTML 属性值，并在样式文件中使用该值。

官方说主要是为了给伪类中content做内容使用，经过测试color属性使用attr我这里不生效。其余可以生效。

 <div class="btn2" data-color="red" width="200px">按钮</div>

...
 .btn2 {
        width: attr(width);
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        background-color: var(--parimaryColor);
        background-color: attr(data-color); /*这里的颜色不被支持*/
        cursor: pointer;
      }

rgb/rgba函数：这两个大家可能用的比较多。不过还能像大家在less或者这sass里面直接写十六进制值。

background-color: rgba(100, 1000, 100, 0.5);

background-color: rgba(red, 0.5); // 这样写不被支持
background-color: rgba(#f60, 0.5); // 这样写不被支持

计算类函数：这主要包括calc,min,max等

width : max ( 10vw , 4em , 80px );

渐变颜色类函数：这个后面专门出个文章再来写。

三角函数： sin/cos等用的不多。

counter()和counters(): 计数器

<style>
      article {
        counter-reset: paragraph; /* 初始化计数器 */
      }

      article p:before {
        content: counter(paragraph) ". "; /* 显示计数器值 */
        counter-increment: paragraph; /* 每个段落后计数器递增 */
      }
    </style>
  </head>

    <article>
      <p>这是第一段。</p>
      <p>这是第二段。</p>
      <p>这是第三段。</p>
    </article>

2 新的选择器

2.1 并集选择器(交集选择器)

这是我自己取得名字，写法就是必须没有空格连在一起，表示多个选择器同时存在才会生效的选择器。

<style>
    .style1{
      background-color: #f60;
      width: 100px;
      height: 100px;
    }
    .style2 {
      background-color: red;
      width: 100px;
      height: 100px;
    }
    .style1.style2 {
      background-color: green;
      width: 100px;
      height: 100px;
    }
  </style>
</head>

  <div class="style1">风格样式1</div>
  <div class="style2">风格样式2</div></div>
  <div class="style1 style2">两个风格同时存在</div>

2.2 伪类选择器

1 :root 选择文档的根元素，即<html>元素

2 :empty 选择没有子元素的元素（包括文本节点）。注意，空格和换行符也被视为子节点，因此这些元素不会被视为空。

3 :has() 它允许你选择包含特定子元素的父元素。这个选择器可以用于更精确地控制样式，而不需要改变HTML结构。

/* 选择包含有.child类的元素 */
.parent:has(.child) {
  /* 样式规则 */
}

4 :focus 选择获得焦点的元素
常用于表单输入元素（如文本框、单选按钮、复选框等）上，以指示当前哪个元素处于激活状态

5 :enabled和:disabled 分别选择启用和禁用的表单元素（如输入框、按钮等）
这对于提高表单的可用性和清晰度非常有用

6 :checked 选择被选中的<input type="radio">、<input type="checkbox">或<option>元素
这允许你为选中状态提供自定义样式

7 :read-only和:read-write 分别选择只读和可编辑的表单元素（如文本框）
这些伪类可以帮助你区分不同状态的表单元素，并相应地调整它们的样式

8 :valid和:invalid 分别选择通过验证和未通过验证的表单元素
这些伪类对于实现表单验证反馈非常有用，可以直观地告诉用户哪些字段需要更正
9 :required和:optional 分别选择被标记为必填和可选的表单元素
这些伪类可以帮助你为不同类型的表单字段提供不同的样式或提示

2.3 浏览器滚动条相关

::-webkit-scrollbar系列注意也支持相关伪类比如:hover，也可以通过父类约束范围。
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-button: 两端的按钮
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有 Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

::-webkit-scrollbar {
      // width: 0 !important;
      background: transparent;
      // height: 0 !important;
    }

    ::-webkit-scrollbar-button {
      // width: 0 !important;
      background-color: transparent;
      // height: 0 !important;
    }

    ::-webkit-scrollbar-corner {
      background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: #333; /* 滚动条颜色 */
      border-radius: 2px; /* 定义滑块的圆角 */
    }
    /* 设置滚动条轨道的颜色 */
    ::-webkit-scrollbar-track {
      background: transparent; /* 滚动条轨道颜色 */
    }
    /* 定义滚动条滑块悬停样式 */
    ::-webkit-scrollbar-thumb:hover {
       background-color: #333; /* 定义滑块在悬停状态下的颜色 */
    }

2.4 特殊伪元素选择器

1 ::before 和 ::after 这个和常见，可以在元素的内容前后插入生成的内容。

2 ::first-letter 和 ::first-line 可以选择文本的第一个字母或者第一行。

3 :focus-within 当元素本身或其后代元素获得焦点时， :focus-within 伪类的元素就会有效。

 <style>
      /* 定义表单样式 */
      .form-container {
        border: 2px solid #ccc;
        padding: 20px;
        margin: 20px;
      }

      /* 当表单内的任意元素获得焦点时，改变表单容器的边框颜色 */
      .form-container:focus-within {
        border-color: blue;
      }
    </style>

    <!-- HTML 结构 -->
    <div class="form-container">
      <label for="username">用户名:</label>
      <input type="text" id="username" name="username" />

      <label for="email">邮箱:</label>
      <input type="email" id="email" name="email" />

      <button type="submit">提交</button>
    </div>

4 :focus-visible 当元素通过键盘（例如 Tab 键）获得焦点时，显示不同的样式

<style>
      /* 定义表单样式 */
      .form-container {
        border: 2px solid #ccc;
        padding: 20px;
        margin: 20px;
      }

      /* 当表单内的任意元素获得焦点时，改变表单容器的边框颜色 */
      .form-container:focus-within {
        border-color: blue;
      }

      /* 当元素通过键盘获得焦点时，显示不同的样式 */
      [tabindex]:focus-visible,
      input:focus-visible,
      button:focus-visible {
        outline: 2px solid red;
        background-color: yellow;
      }
    </style>

    <!-- HTML 结构 -->
    <div class="form-container">
      <label for="username">用户名:</label>
      <input type="text" id="username" name="username" />

      <label for="email">邮箱:</label>
      <input type="email" id="email" name="email" />

      <button type="submit">提交</button>
    </div>

5 :target 是一个 CSS 伪类，用于选择当前 URL 中带有片段标识符（即锚点）的目标元素。当用户点击链接中的锚点时，该伪类可以选择并样式化目标元素。

6 :selection 是一个 CSS 伪元素，用于选择文档中被用户选中的文本。它可以用来定义选中文本的样式，如背景色和文字颜色。

3 新增的属性

css3 甚至后面的css4预案也新增了一些css属性：

其中flex 和grid后面开专题去讲。

1 gap

在CSS中，gap 属性主要用于Flexbox和Grid布局中，用于控制项目之间的空间。

`2 hyphens`

属性用于控制文本中的自动断字（即自动插入连字符）。这对于长单词或跨行的文字尤其有用，可以提高文本的可读性和排版质量。这个很有用。他有三个属性值：

p { hyphens: none; } // 不断行

p { hyphens: manual; } // 只在手动插入的连字符位置进行断字。

p { hyphens: auto; } // 自动在合适的位置插入连字符以实现断字。

 <style>
      p {
        hyphens: auto; /* 启用自动断字 */
        word-wrap: break-word; /* 允许长单词换行 */
      }
    </style>

  
    <p>
      This is a sample paragraph with a verylongwordthatshouldbebroken to
      demonstrate the hyphens property.
    </p>

会根据页面宽度自适应断行

3 `content-visibility`

这个属性可以延迟渲染非首屏内容，优化加载性能。

4 控制文本方向

unicode-bidi: 该属性用于控制文本在双向文本环境中的重写行为，它有多个值可以选择，比如 normal, isolate, isolate-override, embed, embed-override 等。

unicode-bidi 通常与 direction 属性一起使用，以更精细地控制文本的方向。
text-orientation: 它可以取值 mixed 或 upright。

writing-mode: 属性值有：

horizontal-tb: 水平书写模式，默认值。
vertical-rl: 从右向左的垂直书写模式。
vertical-lr: 从左向右的垂直书写模式。

5 文本相关

1 -webkit-line-clamp：多行文本溢出，但要注意其Webkit特性的局限性。

.flex-multi-line-ellipsis {
  display: flex;
  flex-direction: column;
  line-clamp: 3; /* 需要JavaScript支持 */
  overflow: hidden;
}

2 text-decoration属性这个属性以前就有，只不过多了很多修饰的属性：
text-decoration-line设置文本装饰线的位置
none：指定文字无装饰
underline ：指定文字装饰下划线
overline ：指定文字装饰上划线
line-through ：指定文字的装饰是贯穿线

text-decoration-style 文本装饰线条形状
solid ：实线
double ：双实线
dotted ：点状线条
dashed ：虚线
wavy ：波浪线

text-decoration-color 文本装饰线条颜色

3 文本描边(仅webkit内核浏览器能支持)

-webkit-text-stroke-width：设置文本描边的宽度，写长度值
-webkit-text-stroke-color ：设置文本描边的颜色，写颜色值
-webkit-text-stroke ：复合属性，设置文字描边的宽度和颜色值

4 shape-outside: 允许文本环绕不规则形状的元素，为文本布局和设计开辟了新的可能性。

5 text-align-last: Text-align-last 指定块或行的最后一行（强制换行符之前）如何在其容器内对齐。

6 outline 轮廓

outline-width ：外轮廓宽度
outline-color ：外轮廓颜色
outline-style ：外轮廓风格
none ：无轮廓
dotted ：点状轮廓
solid ：实线轮廓
double ：双实线轮廓
outline-offest：设置外轮廓与边框的距离，正负值都可设置

outline:50px solid blue；

7 bancground渐变色支持：

webkit-background-clip：text 背景呈现在文字上。

border-image: 实现描边效果,但是不支持圆角。

        border-image-source: linear-gradient(to right, red, #578aef);
        border-image-slice: 1; /* 可以调整以控制渐变重复的次数 */
        border-image-repeat: stretch; /* 控制边框图片的重复方式 */

    <style>
      .box2 {
        width: 400px;
        height: 100px;
        margin: 100px auto;
        border-radius: 10px;
        /* 去除之前的边框设置 */

        /* 添加 border-image 属性 */
        border: 5px solid;
        border-image-source: linear-gradient(to right, red, #578aef);
        border-image-slice: 1; /* 可以调整以控制渐变重复的次数 */
        border-image-repeat: stretch; /* 控制边框图片的重复方式 */
      }
    </style>

    <div class="box2"></div>

1. 线性渐变（Linear Gradients）
线性渐变是从一个方向到另一个方向的渐变效果。你可以指定一个起点和一个方向（或一个角度），并且至少定义两个颜色结点。
to right：从左到右。
to bottom right：从左上到右下。
角度：如 45deg 表示从45度方向开始渐变。

div {
  background-image: linear-gradient(to right, red, yellow);
}

多个叠加

<style>
      body {
        background-color: #f60;
      }
      .rectangle {
        width: 305px;
        height: 75px;
        background: linear-gradient(-45deg, transparent 52px, #ffffff 0) bottom
            right,
          linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="rectangle"></div>
  </body>

2 径向渐变（Radial Gradients）

径向渐变是从一个中心点向外扩散的渐变效果。

circle：圆形。
ellipse：椭圆形。
closest-side：形状大小直到最近的一边。
farthest-side：形状大小直到最远的一边。
closest-corner：形状大小直到最近的角落。
farthest-corner：形状大小直到最远的角落。

div {
  background-image: radial-gradient(circle, red, yellow, green);
}

3 圆锥渐变（Conic Gradients）

圆锥渐变是围绕一个中心点旋转的渐变效果。

div {
  background-image: conic-gradient(from 45deg, red, yellow, green, blue);
}

下面举几个例子：

1 渐变文字

.box {
        width: 400px;
        background-image: linear-gradient(red, yellow, green);
        font-size: 80px;
        text-align: center;
        line-height: 200px;
        font-weight: bold;
        color: transparent;
        font-size: 50px;
        -webkit-background-clip: text;
      }

2 渐变边框

<style>
      .box2 {
        position: relative;
        width: 400px;
        height: 100px;
        margin: 100px auto;
        border-radius: 10px;
        background: #fff;
        background-clip: padding-box;
        border: 5px solid transparent;
      }
      .box2::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: -1;
        margin: -5px;
        border-radius: 10px;
        background: linear-gradient(to right, red, #578aef);
      }
      .box1 {
        width: 400px;
        background-image: linear-gradient(to right, red, #578aef);
        font-size: 80px;
        text-align: center;
        line-height: 100px;
        font-weight: bold;
        color: transparent;
        -webkit-background-clip: text;
      }
    </style>
  </head>
  <body>
    <div class="box2">
      <div class="box1">渐变文字</div>
    </div>
  </body>

3 网格背景

8 css事件相关

1 pointer-events 控制事件响应

pointer-events: auto;：元素是鼠标事件的目标，事件会被正常处理。

pointer-events: none;：元素不是鼠标事件的目标，点击事件会穿过该元素并在其后面的元素上触发。

pointer-events: visiblePainted;：只适用于 SVG，类似于 auto，但不包括某些不可见的图形元素。

2 scroll-behavior 该属性定义了溢出元素的滚动行为，只需简单的声明即可实现平滑的滚动动画

3 user-select: 控制用户是否可以选择元素内的文本，从而更好地控制用户交互和界面设计

9 变形相关

1 Object-fit 指定如何调整元素内容的大小以适合其容器、保留纵横比并控制溢出行为1

2 Transform: 支持的函数也比较多，大家常用的有rotate旋转/scale缩放/translate移动等，通常结合动画的比较多。

transform垂直水平居中：

 .centered-element {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #f60;
      }