首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用nth-child/type-of根据用户输入改变背景颜色?

模型出错了,请稍后重试~

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

今日援助 | 给新手前端的5段救命css代码

不同像素密度比的设备都可以兼容(pc/手机), 还支持任意数量圆角. /** * 真.1px边框 * {List}: 多个方向边框, 默认值为bottom, 你可以根据需要传入(top, left, bottom..., right) 4个方向; * {Color} 边框的颜色, 默认#ccc; * {List} 4个圆角半径, 默认0; * {String} 一个高级设置, 一般都不需要改动, 由于细边框的实现使用了...如果你做的页面就是个简单的活动页, 引入"饿了么"一类的ui就有些大材小用了, 借助"三角形"你可以自己做一个简单的. /** * 等边三角形 * @param {String} 尺寸 * @param {Color} 颜色...animation: rotate 0.6s linear infinite; vertical-align: middle; } 棋盘 如果你做一些界面生成器工具(类易企秀)你会用到. /** * 棋盘背景...* @param {Color} 背景色 */ @mixin bgChessboard($color: #aaa) { background-image: linear-gradient(

32610

CSS selectors level 4

在这篇文章中,我会根据截至 2019 年 1 月的草案规范,和你一起过一遍下一代选择器(第四级),主要有以下分类: 逻辑组合 属性选择器 语言伪类 位置伪类 用户操作伪类 输入伪类 树结构伪类 网格结构伪类...这类选择器包括那些使用语言相关设置的选择器。 :dir(ltr) 浏览器支持 它选择那些具有从左到右方向性的元素,其中文档语言指定如何确定方向性。...例如: p:lang("*-CH") { background-color: red; } 这会给所有被标记为使用瑞士语言的p元素添加一个背景色为红色的背景色。...在 Codepen 上试试 输入伪类 这类选择包括那些应用于接受用户输入的元素的选择器。...例如:对于一个输入类型为email的元素: input:invalid { color: red; } input:valid { color: green; } 这会根据元素里面输入的电子邮件是否有效为依据去为元素的文本设置不同颜色

67620
  • Sass 基础(六)

    (#0000ff,#ff0000,#eeffff,#08000,#ffa500)    但当第一个列表中只有一个列表项,那么 join() 函数合并的列表项    目中每个列表项目这间使用的分隔符号会根据第二个列表项中使用...string 为字符串类型     bool为布尔类型     color为颜色类型     >> type-of(100)       “number”     >>type-of..."     >>type-of(true)       "bool"     >>type-of(false)       "bool"     >>type-of(#fff)       ...unit()函数主要是用来获取一个值所使用的的单位,碰到复杂的计算时,其能根据运算得到一个“多单位组合”     的值,不过只许乘除运算     >>unit(100)       ""     ...如果使用 map-has-key($map,$key) 函数就可以改变这一状态。

    795100

    灵活运用CSS开发技巧

    :nth-child()选择指定元素 要点:通过:nth-child()筛选指定的元素设置样式 场景:表格着色、边界元素排版(首元素、尾元素、左右两边元素) 兼容::nth-child() 代码:在线演示...在线演示 Color Skill 使用color改变边框颜色 要点:border没有定义border-color时,设置color后,border-color会被定义成color 场景:边框颜色与文字颜色相同...在线演示 使用::selection改变文本选择颜色 要点:通过::selection根据主题颜色自定义文本选择颜色 场景:主题化 兼容:::selection 代码:在线演示 ?...在线演示 使用caret-color改变光标颜色 要点:通过caret-color根据主题颜色自定义光标颜色 场景:主题化 兼容:caret-color 代码:在线演示 ?...在线演示 使用linear-gradient描绘方格背景 要点:使用linear-gradient绘制间断颜色的彩带进行交互生成方格 场景:格子背景、占位图 兼容:gradient 代码:在线演示 ?

    4.6K20

    css基础

    CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率...掌握基础选择器:重点 #id选择器: 根据元素的id属性选中某个元素 .class: 根据元素的class属性值选中一组元素,可以添加多个元素名,选择其一即可 元素选择器: 根据元素名选择一组元素...} div:nth-child(even){/*偶数,斜体*/ font-style:italic; } 使用: 我是div1...background:背景复合属性 background:背景颜色 背景图片 是否平铺,位置; 列表: List-style:none; 去除列表项标记 display: 修改元素特性 inline...position:relative,那就相对于父集定位 相对窗体定位:如果父集身上没有position:relative,那相对于窗体绝对定位 fixed 固定定位 相对于窗体定位一个位置,永远不改变

    1.3K30

    CSS 预处理器中的循环

    我们通过循环一个简单的颜色列表来看看它是如何工作的。...下面我们遍历 36 个 div 元素,使用 :nth-child 给每一项添加编号及背景色。...值得注意的是 CSS 也可以实现 nth-child– 编号,不需要预处理器。然而 CSS 并没有循环结构,它提供了一个 counter() 方法,根据 DOM 的数量递增,可以用于生成内容。...最后,我们只设计了 9 个独特的图标,使用循环生成 1296 个不同的头像,所以大部分用户不会看到重复的头像。...如果您需要访问同一个循环,只是输入值不同,尝试递归函数。 对于其它情况(几乎从来没有),使用 while 循环。 如果你使用 Less… 祝你好运! 尽情的享受循环吧!

    4.4K60

    实现3D环绕效果的图片展示技术探索

    摘要:本文将介绍如何使用现代前端技术实现3D环绕效果的图片展示。我们将通过详细的步骤和代码示例,探索如何实现这种富有创意和吸引力的视觉效果,从而提升用户体验和网站互动性。...transform: rotateY(1turn); } }JavaScript交互增强为了增加交互性,我们可以使用JavaScript来监听用户的鼠标事件,并根据鼠标位置动态调整图片的旋转角度...这里简单演示如何使用JavaScript实现这一功能。...背景与边框:为了增强视觉效果或区分内容,容器可能有一个背景颜色(background-color)、边框(border)或阴影(box-shadow)。...四、总结本文介绍了如何使用CSS3和JavaScript实现3D环绕效果的图片展示。通过这种方法,我们可以为网站添加富有创意和吸引力的视觉效果,提升用户体验和互动性。

    32810

    谁说不能用代码实现酷炫的文字特效?

    如果不需要阴影模糊可以将Blur值设置为0; 4、Color是指阴影的颜色,可以使用rgba、颜色单词等方式来书写。...这个效果只需要改变不同的模糊值即可制作。如下: .wrap div:nth-child(1) { text-shadow: 0 0 20px red; } 效果如下: ?...通过上述实例,制作内陷文本只需要把文字的颜色设置得比背景色暗,阴影颜色给的比背景稍微亮一点点即可。...7)复古风格 复古风格的文字也是需要考虑颜色搭配的一种制作方式,主要是为了阴影与背景的一个展示,如下: .wrap div:nth-child(11) { color: #eee; text-shadow...复古风格的文字效果是由两个文本阴影合成的,这里需要注意的是:第一个阴影色和背景色相同;文本颜色和第二个阴影色相同。

    2.4K30

    更多伪类选择器,丰富你的 CSS 工具箱

    示例: p:last-of-type { background-color: yellow; } 这会将页面中最后一个元素的背景颜色设置为黄色。...(五)nth-child 作用:选中父元素中的第 n 个子元素。可以使用具体的数字来指定特定的子元素,也可以使用表达式来选择特定模式的子元素。...li:nth-child(even) { background-color: gray; } 这会将列表中的偶数位置的元素的背景颜色设置为灰色。...可以根据需要灵活运用这些选择方式来实现不同的布局效果。 (六)nth-of-type 作用:选中同类型元素中的第 n 个元素。与nth-child类似,但只针对同类型的元素进行选择。...示例: ::selection { background-color: pink; } 当用户在页面上选择文本时,被选中的文本背景颜色会变为粉色。

    9310

    HTML5新特性

    先去匹配E ,然后再根据E 找第n个孩子 小结 结构伪类选择器一般用于选择父级里面的第几个孩子 nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配...先去匹配E ,然后再根据E 找第n个孩子 关于 nth-child(n) 我们要知道 n 是从 0 开始计算的,要记住常用的公式 如果是无序列表,我们肯定用 nth-child 更多 类选择器、属性选择器...style中,给大的div盒子(类名叫tudou的),设置 before伪元素 这个伪元素充当的是遮罩的角色,所以我们不用设置内容,但是需要设置content属性,属性的值为空字符串 给这个遮罩设置宽高,背景颜色...语法: transition: 要过渡的属性 花费时间 运动曲线 何时开始; 属性 : 想要变化的 css 属性, 宽度高度 背景颜色 内外边距都可以 。...进度条.png 步骤: 创建两个div的盒子,属于的嵌套关系,外层类名叫 bar,里层类名叫 bar_in 给外层的bar 这个盒子设置边框,宽高,圆角边框 给里层的bar_in 设置 初试的宽度,背景颜色

    2.3K41

    【 前端相关 网页样式 】总结CSS3中“伪类”与“伪元素”

    下面分别对伪类和伪元素进行解释: 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。...下面是根据用途分类的伪类总结图和根据冒号分类的伪元素总结图: image.png image.png 某些伪类或伪元素仍然处于试验阶段,在使用前建议先在Can I Use等网站查一查其浏览器兼容性...如下例,input输入框和富文本框获取焦点时,背景变成黄色。...该伪元素不是CSS的标准,它的实现可能在将来会有所改变,所以要决定使用时必须谨慎。 在一些浏览器中(IE10和Firefox18及其以下版本)会使用单冒号的形式。...18 and below */ input:-moz-input-placeholder { color:#666; } 7 ::backdrop(处于试验阶段) ::backdrop用于改变全屏模式下的背景颜色

    3.1K70

    寒假提升 | Day8 CSS 第六部分

    如果我们进一步, 将另外三边的颜色去除呢? 如果我们将这个盒子旋转呢?..., 字体文件会被一起下载下来; 浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体; 在浏览器中使用对应的字体显示内容; 使用Web Fonts 课堂上为了给大家演示,通过如下的方式获取到了字体文件...精灵图如何使用呢?...精灵图的原理是通过只显示图片的很小一部分来展示的; 通常使用背景: ✓ 1.设置对应元素的宽度和高度 ✓ 2.设置精灵图作为背景图片 ✓ 3.调整背景图片的位置来展示 如何获取精灵图的位置 http...比如根据文本和非文本切换指针样式 default:由操作系统决定,一般就是一个小箭头 pointer:一只小手,鼠标指针挪动到链接上面默认就是这个样式 text:一条竖线,鼠标指针挪动到文本输入框上面默认就是这个样式

    58220

    Sass控制命令及函数知识整理

    简单示例:用来批量制作icon图标引用或者背景图引用等。...如果使用 map-has-key($map,$key) 函数就可以改变这一状态。如下: B).map-has-key($map,$key) 函数将返回一个布尔值。...A).rgb($red,$green,$blue):根据红、绿、蓝三个值创建一个颜色,   输入的是三个0-255之间的数字值,分别是红绿蓝三个颜色的值,然后得到一个16进制的颜色值,比如#293849...B).rgba($red,$green,$blue,$alpha):根据红、绿、蓝和透明度值创建一个颜色   函数主要用来将一个颜色根据透明度转换成rgba颜色。...可实际上任何颜色的亮度值都在 0~100% 之间,如此一来,Sass 的 lighten() 和 darken() 函数又将会如何处理呢? 上面的例子说明了一切问题。

    3.4K60
    领券