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 中带有片段标识符(即锚点)的目标元素。当用户点击链接中的锚点时,该伪类可以选择并样式化目标元素。 

: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 todemonstrate the hyphens property.</p>

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

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 :复合属性,设置文字描边的宽度和颜色值

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) bottomright,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;}

10 css滤镜

filter:系列支持的函数有:blur模糊/grayscale灰度这个大家应该用的比较多(重大祭奠会用)

backdrop-filter: 此属性将图形效果(例如模糊或色移)应用于元素内容后面的区域。它非常适合创建磨砂玻璃效果或为元素添加微妙的视觉增强效果。

mix-blend-mode:此属性控制元素的内容与其背景混合的方式,提供与图形设计软件中类似的各种混合模式

11 css动画部分

这部分我后面会出专题来讲。包括前面提到的flex弹性盒子,grid布局等,这些相关内容都会分专题来讲。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/419088.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率

介绍 随着互联网数据的爆炸式增长&#xff0c;爬虫技术成为了获取信息的重要工具。在实际应用中&#xff0c;如何提升浏览器自动化的效率是开发者常常面临的挑战。Chrome DevTools Protocol&#xff08;CDP&#xff09;与Selenium WebDriver相结合&#xff0c;为浏览器自动化提…

还不会剪音乐?试试这四款在线音频剪辑

音频剪辑很多人都没有接触过。其实这并不是一个难事&#xff0c;我们甚至可以用一些简单的工具来给自己做个简单的BGM&#xff0c;最近我尝试了几款不同的音频剪辑工具。今天就来跟大家分享一下我的使用体验&#xff0c;看看哪款工具更适合你的需求。 一、福昕音频剪辑 网址&…

Oracle rman 没有0级时1级备份和0级大小一样,可以用来做恢复 resetlogs后也可以

文档说了 full backup 不能 用于后续的level 1&#xff0c;没说level 1没有level 0 是不是level 1就是level 0&#xff1f; GOAL What are incremental backups? Why are archivelogs still required to recover a database from an online incremental backup? Discuss th…

python学习13:对excel格式文件进行读写操作

读取excel的话需要下载第三方库&#xff1a; 常用的库:xlrd(读),xlwt(写),xlutils,openpyxl[-----pip install xxx-------] 这里推荐openpyxl pip install openpyxl excel读取的基本操作 # 2)基本操作: # 2.1)打开文件,获取工作簿 filename rD:\stdutyZiLiao\pythoneProje…

动态化-鸿蒙跨端方案介绍

一、背景 &#x1f449; 华为在2023.9.25官方发布会上宣布&#xff0c;新的鸿蒙系统将不再兼容安卓应用&#xff0c;这意味着&#xff0c;包括京东金融APP在内的所有安卓应用&#xff0c;在新的鸿蒙系统上将无法运行&#xff0c;需要重新开发专门适用于新鸿蒙系统的专版APP。 …

日语输入法平假名和片假名切换

在学日语输入法的时候&#xff0c;我们在使用罗马音输入的时候&#xff0c;在进行平假名和片假名切换&#xff1a; 1、使用电脑在打字&#xff0c;日语输入法切换的时候使用 Shift Alt 如果日语输入法显示为 A 需要切换为 あ的话可以按Caps Lock键 。&#xff08;相当于中文…

zblog自动生成文章插件(百度AI写作配图,图文并茂)

最近工作比较忙&#xff0c;导致自己的几个网站都无法手动更新&#xff0c;于是乎也想偷个懒把&#xff0c;让AI帮忙打理下自己的网站。我接触chatgpt等AI工具还是比较早了&#xff0c;从openai推出gpt3.5就一直在用&#xff0c;说实话&#xff0c;开始的时候用AI自动更新网站还…

「C++系列」日期/时间

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff1a;人工智能教程 文章目录 一、日期/时间1. C标准库&#xff08;C20之前&#xff09;<ctime>库中的关键组件&#xff1a; 2…

lnmp - tp6.0的安装和简单使用

概述 使用了很长时间的Mac M2芯片的电脑在之前使用虚拟机之前总有一些bug不是那么好用&#xff0c;周末之余重新安装了一下centos虚拟机&#xff0c;搭建了lnmp环境&#xff0c;打算自己挤时间&#xff0c;做一点应用&#xff0c;作为一次新的小小的尝试。 安装&更新 ce…

OCC开发_变高箱梁全桥建模

概述 上一篇文章《OCC开发_箱梁梁体建模》中详细介绍了箱梁梁体建模的过程。但是&#xff0c;对于实际桥梁&#xff0c;截面可能存在高度、腹板厚度、顶底板厚度变化&#xff0c;全桥的结构中心线存在平曲线和竖曲线。针对实际情况&#xff0c;通过一个截面拉伸来实现全桥建模显…

算法复杂度 —— 数据结构前言、算法效率、时间复杂度、空间复杂度、常见复杂度对比、复杂度算法题(旋转数组)

目录 一、数据结构前言 1、数据结构 2、算法 3、学习方法 二、 算法效率 引入概念&#xff1a;算法复杂度 三、时间复杂度 1、大O的渐进表示法 2、时间复杂度计算示例 四、空间复杂度 计算示例&#xff1a;空间复杂度 五、常见复杂度对比 六、复杂度算法题&…

《JavaEE进阶》----12.<SpringIOCDI【扫描路径+DI详解+经典面试题+总结】>

本篇博客主要讲解 扫描路径 DI详解&#xff1a;三种注入方式及优缺点 经典面试题 总结 五、环境扫描路径 虽然我们没有告诉Spring扫描路径是什么&#xff0c;但是有一些注解已经告诉Spring扫描路径是什么了 如启动类注解SpringBootApplication。 里面有一个注解是componentS…

【学习笔记】3GPP WG SA5 Rel-19标准化工作管理和编排

3GPP WG SA5 Rel-19标准化工作涵盖了管理和编排要求、管理阶段2和管理流程&#xff0c;以及阶段3 OpenAPI和YANG解决方案集&#xff0c;以在多供应商环境中为5G网络提供完整的管理互操作性能力。 SA5以WG SA1通过紧密跟踪其他3GPP工作组的进展&#xff0c;这些工作组产生新的网…

如何使div居中?CSS居中终极指南

前言 长期以来&#xff0c;如何在父元素中居中对齐一个元素&#xff0c;一直是一个让人头疼的问题&#xff0c;随着 CSS 的发展&#xff0c;越来越多的工具可以用来解决这个难题&#xff0c;五花八门的招式一大堆&#xff0c;这篇博客&#xff0c;旨在帮助你理解不同的居中方法…

【机器人工具箱Robotics Toolbox开发笔记(二)】Matlab中机器人工具箱的下载与安装

Matlab机器人工具箱(Robotics Toolbox)可从Peter Corke教授提供的网站上免费下载。网址为:http://www.petercorke.com/Robotics_Toolbox.html。 图1 网站所提供的机器人工具箱版本 在Downloading the Toolbox栏目中单击here按钮进入下载页面,然后在该页面中填写国家、组织…

Qt多语种开发教程

Qt作为跨平台的开发工具&#xff0c;早已应用到各行各业的软件开发中。 今天讲讲&#xff0c;Qt开发的正序怎么做多语言开发。就是说&#xff0c;你设置中文&#xff0c;就中文显示&#xff1b;设置英语就英文显示&#xff0c;设置繁体就繁体显示&#xff0c;设置发育就显示法语…

京东物流查询|开发者调用API接口实现

快递聚合查询的优势 1、高效整合多种快递信息。2、实时动态更新。3、自动化管理流程。 聚合国内外1500家快递公司的物流信息查询服务&#xff0c;使用API接口查询京东物流的便捷步骤&#xff0c;首先选择专业的数据平台的快递API接口&#xff1a;物流快递查询API接口-单号查询…

【C语言】详解结构体(下)(位段)

文章目录 前言1. 位段的含义2. 位段的声明3. 位段的内存分配&#xff08;重点&#xff09;3.1 存储方向的问题3.2 剩余空间利用的问题 4. 位段的跨平台问题5. 位段的应用6. 总结 前言 相信大部分的读者在学校或者在自学时结构体的知识时&#xff0c;可能很少会听到甚至就根本没…

win10不用anaconda安装tensorflow-cpu并导入pycharm

记录一下防止忘了 一、前提&#xff1a;已经安装了python3.6.4,想用tensorflow的包 二、在pycharm中File-Settings-Project Interpreter点“”号导入很慢&#xff0c;所以直接在cmd中使用 pip install -i https://mirrors.aliyun.com/pypi/simple tensorflow-cpu下载好&#x…

2024AI绘画工具排行榜:探索最受欢迎的AI绘图软件特点与选择指南

AI绘画工具各有优势&#xff0c;从开放性到对特定语言和文化的支持&#xff0c;以及对图像细节和艺术性的不同关注点&#xff0c;根据具体需求选择合适的工具 MidJourney 图片品质卓越&#xff0c;充满独特创意&#xff0c;初期能够免费获取数十账高质量图片&#xff0c;整个生…