当前位置: 首页 > news >正文

选择器css

1.a标签选择

// 选中所具有herf 的元素
[herf] {color: skyblue;
}
// 选中所具有herf=https://fanyi.youdao.com/ 的元素
[herf$="youdao.com"] {color:pink;
}
//   按此顺序书写 link  visited  hover  active
// 未访问状态
a:link {color:orange
}
// 访问状态
a:visited {color:pink
}
// 鼠标按下时状态
a:active {color:red
}
  <span>皮囊</span>
span::before{content: "<<";color: red;
}
span::after{content: ">>";color: red;
}

效果
在这里插入图片描述
2.相邻的兄弟元素 选择器

 <ul><li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum quis cum, quam tempore harum officiis, facere eveniet necessitatibus quas libero aspernatur at exercitationem assumenda quia distinctio similique adipisci hic explicabo.</li><li>Vero necessitatibus, ipsum illo esse explicabo totam consectetur odio sit repudiandae a perspiciatis ab saepe hic ducimus voluptatem. Quos molestias mollitia iure deserunt pariatur? Quos, voluptas possimus! Dolore, perspiciatis laborum?</li><li>Libero, quasi temporibus! Sapiente, dolorem perspiciatis explicabo iusto sed natus a eius sequi corporis! Pariatur sit laborum atque quasi unde eligendi incidunt, exercitationem asperiores tempora consequuntur quod voluptatem quis aliquid?</li><li class="special">Rerum eum dignissimos eos nobis eaque error placeat tempora aperiam. Harum architecto soluta rerum ut veniam earum officiis suscipit ad quia aspernatur. Nihil sunt aliquam, optio accusamus quos deleniti exercitationem.</li><li>Natus, consequatur at fugit sed vero iusto sapiente odio deserunt dolor placeat dicta aliquam accusantium illo mollitia et perferendis totam, minus ullam magni ex dolorum. Neque consequuntur consectetur fugiat reprehenderit.</li><li>Nesciunt vel cumque non omnis molestias, est deleniti officia! At, numquam! Quasi ipsum molestias totam. Porro eos, sed deserunt, quos ipsam ad iste vel blanditiis praesentium vero pariatur enim ipsum.</li><li>Vitae aliquid necessitatibus velit ipsam tenetur expedita harum. Eveniet aliquam saepe inventore, obcaecati ex iure, et similique magnam odio quia nam perferendis, itaque quaerat neque qui excepturi nulla. Quod, eius.</li></ul>
.special{color: aquamarine;
}
// 相邻的兄弟元素
.special+li {color: pink;
}
//所有兄弟选择器
// .special~li {
//   color: olivedrab;// }

效果
在这里插入图片描述

http://www.lryc.cn/news/518857.html

相关文章:

  • 全方位解读消息队列:原理、优势、实例与实践要点
  • JavaScript运算符与控制结构
  • 2030年中国AI人才缺口或达400万,近屿智能助力AI人才储备增长
  • 如何设计一个注册中心?以Zookeeper为例
  • ubuntu 20.04 安装docker--小白学习之路
  • 【大厂面试AI算法题中的知识点】方向涉及:ML/DL/CV/NLP/大数据...本篇介绍 密集行人检测的遮挡问题怎么解决?
  • Tableau数据可视化与仪表盘搭建-可视化原则及BI仪表盘搭建
  • TensorFlow Quantum快速编程(基本篇)
  • ELK日志分析实战宝典之ElasticSearch从入门到服务器部署与应用
  • git 转移文件夹
  • C#,图论与图算法,输出无向图“欧拉路径”的弗勒里(Fleury Algorithm)算法和源程序
  • 计算机网络之---OSI七层模型
  • mysql的mvcc理解
  • leetcode 面试经典 150 题:两数之和
  • nexus搭建maven私服
  • 理解 Tomcat 架构
  • python3GUI--大屏可视化-传染病督导平台 By:PyQt5
  • 如何选择适合的证件照制作软件,让您的照片制作更轻松
  • 工作效率提升:使用Anaconda Prompt 创建虚拟环境总结
  • Python自动化实战 —— 使用Selenium进行Web自动化
  • 【前端】【HTML】入门基础知识
  • PHP获取局域网ip(192.168)
  • 点击底部的 tabBar 属于 wx.switchTab 跳转方式,目标页面的 onLoad 不会触发(除非是第一次加载)
  • 基于PLC的酒店热水供应控制系统设计
  • 博客内所有项目均可在面包多平台进行购买
  • 《Mcal》--MCU模块
  • C语言:枚举类型
  • spring boot 多数据源集成mysql、postgresql、phoenix、doris等
  • USB基础 -- USB 控制传输(Control Transfer)的重传机制
  • 云计算基础,虚拟化原理