不常见css属性和html标签

原创已于 2025-09-07 17:05:07 修改 · 1.1k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

于 2025-09-07 17:01:49 首次发布

html标签

sup

显示的是3的6次方

<span>3<sup>6</sup></span>

pre

保留标签内所有空格和换行

 <pre>pre标签     
    酷酷酷</pre>

q

给文字加双引号

<q>p标签</q>

mark

给文字进行颜色标记

<mark>mark标签</mark>

ins

下划线

<ins>ins标签</ins>

¥

人民币符号￥

语义化标签

都是块级元素独占一行,如果网站需要更好的SEO，尽可能的使用语义化标签!

  <header>header</header>
  <aside>aside</aside>
  <section>section</section>
  <footer>footer</footer>
  <main>main</main>
  <article>article</article>
  <nav>nav</nav>

css选择器

~ 通用兄弟选择器

选中指定元素后面的所有兄弟元素，前提必须拥有相同的父元素（代码中的div）。

  <style>
    h1~p,
    h1~aside {
      color: red;
    }
  </style>

<body>
  <div>
    <h1>h1</h1>
    <p>p1</p>
    <p>2</p>
    <aside>aside</aside>
  </div>
</body>

+ 相邻兄弟选择器

选择指定元素最近的后面那一元素，前提必须拥有相同的父元素

  <style>
    h1+aside {
      color: pink;
    }
  </style>

<body>
  <div>
    <h1>h1</h1>
    <aside>aside1</aside>
    <p>p</p>
    <aside>aside2</aside>
  </div>
</body>

:focus-within

该元素或者该元素后代获得焦点时会触发

 <style>
    input {
      outline: none;
      border: #ccc 1px solid;
      width: 200px;
      height: 30px;
    }
    
    /*input聚焦后设置边框1px颜色为红色*/
    div:focus-within {
      border: 1px solid red;
      width: fit-content;
    }
  </style>

<body>
  <div>
    <input type="text" placeholder="请输入">
  </div>
</body>

::first-letter

选中文、字母首个字符

  <style>
    div::first-letter {
      color: red;
      font-size: 40px;
    }
  </style>

::selection

设置用鼠标选中的文字的样式

  <style>
    div::selection {
      background-color: red;
      color: white;
    }
  </style>
<body>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa molestiae porro nihil, aperiam quos omnis voluptatum
    reprehenderit fugit illo minus consectetur quibusdam unde sequi modi voluptas nulla aliquam facere? Ex.
  </div>
</body>

::marker

用于选中列表项（<li>）或其他具有标记的元素（如使用 list-item 显示类型的元素）前面的标记符号（如项目符号、编号等），并对其进行样式设置。

  <style>
    ul li::marker {
      color: #ff6b6b;
      font-size: 1.5em;
      content: "→ ";
    }
  </style>

伪类选择器

:is

简化多个选择器的组合，匹配括号内任意一个选择所在的元素，优先级由括号内最高的选择器决定

  <style>
    /* 传统写法 */
    header h1,
    header h2,
    header h3 {
      color: #333;
    }

    /* 使用 :is() 简化 */
    header :is(h1, h2, h3) {
      color: #333;
    }
  </style>

:where

与 :is() 功能类似，同样用于匹配括号内任意选择器的元素。

  <style>
    /* :where() 优先级为 0，最终优先级由 .container 决定 */
    .container :where(h1, h2) {
      color: blue;
    }

    /* 即使类选择器优先级低，也能覆盖上面的样式 */
    h1 {
      color: red; /* 生效，因为 :where() 不提升优先级 */
    }
  </style>

:not

匹配不满足括号内条件的元素（否定匹配）。

<style>
    button:not(.active) {
      color: red;
    }

    p:not(.p1, .p2) {
      color: blue;
    }
  </style>

<body>
  <button>button</button>
  <button class="active">button1</button>
  <p>00000</p>
  <p class="p1">11111</p>
  <p class="p2">22222</p>
</body>

:has

根据元素是否包含特定子元素或兄弟元素来匹配该元素（“父元素选择器” 能力）。

  <style>
    div:has(h1),
    ul:has(li) {
      background-color: red;
    }
  </style>
<body>
  <div>
    <h1>h1</h1>
  </div>
  <div>
    <h2>h2</h2>
  </div>
  <ul>
    <li>li1</li>
    <li>li2</li>
  </ul>
</body>

:empty

选中该元素内容为空的元素

  <style>
    div:empty {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
<body>
  <div></div>
  <div>div</div>
</body>

:valid & :invalid

input为必填，当没有内容的时候则invalid匹配，有内容则valid匹配

  <style>
    input {
      outline: none;
    }

    input:invalid {
      border: 2px solid red;
    }

    input:valid {
      border: 2px solid green;
    }
  </style>

<body>
  <input type="text" required>
</body>

css属性

direction

用于设置文本、表格列和水平溢出的方向，主要用于支持从右到左（RTL，Right-to-Left）书写的语言，如阿拉伯语、希伯来语等。

  <style>
    div {
      /* 默认 ltr */
      direction: rtl;
    }
  </style>
<body>
  <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio voluptatum recusandae nesciunt provident
    excepturi ullam, magni aliquid debitis at ipsam omnis eum culpa modi quaerat quisquam facilis quasi libero sapiente.
  </div>
</body>

caret-color

修改输入框光标的颜色

  <style>
    input {
      caret-color: red;
    }
  </style>

accent-color

修改复选框选中时的颜色

  <style>
    input[type="checkbox"] {
      accent-color: red;
    }
  </style>

text-transform

设置字母大小写 capitalize:首字母大写; uppercase全部大写 lowercase全部小写

  <style>
    /* capitalize:首字母大写; uppercase全部大写 lowercase全部小写*/
    div {
      text-transform: capitalize;
    }
  </style>

aspect-ratio

设置元素的宽高比,其适用于图片、视频、卡片等需要固定比例的元素

  <style>
    div {
      aspect-ratio: 16/9; 
      background-color: red;
    }
  </style>

shape-outside & float

属性用于定义元素的浮动区域形状，使其他内容（如文本）能够围绕不规则形状排列，而不仅仅是矩形。它主要用于实现文本环绕图片或其他元素的复杂排版效果,必须搭配float:left | right使用!

  <style>
    img {
      width: 100px;
      height: 100px;
      float: left;
      shape-outside: circle(50%);
    }
  </style>
<body>
  <div>
    <img src="test.png" alt="">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque dignissimos, explicabo nihil, fugiat ipsa enim
    assumenda facere nam quas fuga asperiores iure ipsum in molestiae? Incidunt natus aut eius atque!
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam ratione mollitia rerum provident autem et enim
    optio temporibus? Laboriosam ea eveniet assumenda, obcaecati aperiam iure! Reiciendis perspiciatis aperiam
    distinctio minima!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam inventore doloribus voluptas, optio facilis tempore!
    Dolores, debitis amet numquam voluptatibus sed fugit corrupti, at necessitatibus est nostrum dicta quidem facere?
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum quos, soluta aliquam consequuntur laudantium eveniet
    labore qui voluptatibus. Enim aut velit ullam! Explicabo sint soluta, laborum nostrum itaque deleniti ex.
  </div>
</body>

background-clip:text

用于将元素的背景（背景图片或渐变）限制在文本的轮廓范围内，实现 “文字渐变” 或 “文字填充图片” 的视觉效果。

  <style>
    div {
      height: 300px;
      background: linear-gradient(90deg, #3498db, #e74c3c);
      font-size: 60px;
      font-weight: bold;
      color: transparent;
        /*兼容处理*/
      -webkit-background-clip: text; 
      background-clip: content-box;
      text-align: center;
    }
  </style>

  <div>hello world</div>

filter

grayscale(100&%) // 灰度
.blur(3px) // 模糊度
brightness(100%) // 亮度
contrast(100%) // 对比度
drop-shadow(16px 16px 10px black); // 沿图像的轮廓生成阴影效果
hue-rotate(100deg) // 色相旋转。值为 0deg，则无变化。
opacity(100%) // 透明度
sepia(100%) // 转换为深褐色
saturate(100%) // 饱和度

box-reflect

是一个非标准的 CSS 属性（主要由 WebKit 内核浏览器支持），用于创建元素的镜像反射效果，类似于镜子反射的视觉效果。它可以让元素在指定方向上生成一个反向的副本。

-webkit-box-reflect: 方向:below/above/left/right [偏移量(可选)] [遮罩图片(用渐变或图片作为遮罩，使反射效果逐渐消失（类似淡出效果）可选)]

  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      -webkit-box-reflect: below 5px linear-gradient(transparent, rgba(0, 0, 0, 0.5));
    }
  </style>

clip-path

用于裁剪元素的可视区域，只显示元素在指定路径内的部分，路径外的内容会被隐藏。它支持多种形状定义方式，能实现圆形、多边形、自定义路径等复杂的裁剪效果，是实现不规则元素外观的核心工具。

circle([半径] at [圆心坐标]) 圆形裁剪，
ellipse([x轴半径] [y轴半径] at [圆心坐标]) 椭圆形裁剪
inset([上] [右] [下] [左] round [圆角]) 矩形裁剪类似 border-radius 的用法
polygon([坐标1], [坐标2], ..., [坐标n]) 多边形裁剪

  <style>
    div {
      background-color: red;
      width: 100px;
      height: 100px;
      clip-path: circle(10px at 50% 50%);
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      clip-path: ellipse(30px 10px at 100% 50%);
      clip-path: inset(30px 10px round 8px);
    }
  </style>

实现瀑布流布局

  <style>
    section {
      /* 列间距 */
      column-gap: 10px;
      /* 分为3列 */
      column-count: 3;
    }

    div {
      /* 防止项目被分割到不同列 */
      break-inside: avoid;
      background-color: red;
      margin-bottom: 10px;
    }
  </style>

  <section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    ...
  </section>