C3踩坑2--css选择器
css的选择器可能大家都懂,可是有一些知识点我们往往会忽略,接下来po一些以前我经常没去看的point
兄弟选择器
废话不多说,po代码
<div class="a"><div class="b"></div><div class="c"></div><div class="d">111</div><div class="d">222</div></div>
*{margin: 0;padding: 0}.a{width:100px;height:100px;border:1px solid red}.c+.d{width:30px;height: 30px;background-color: green}
实现图
在这里,.c+.d的意思就是选择一个名为d的类,并且这个类的前面"邻居"有个类c这样就找到我们要求的类了,如果前面的类不是c那么d类就不符合要求(看包裹"222"的类就不符合要求).
再po一段代码
*{margin: 0;padding: 0}.a{width:100px;height:100px;border:1px solid red}.c~.d{width:30px;height: 30px;background-color: green}
这时候我们把+号换成~就变成这样
为什么会这样呢,因为.c~.d的意思就是找到名为d的类,并且在d类前面能找到c类.
如果用集合表示的话".c+.d"是包含在".c~.d"的
子选择器
<div class="a"><div class="b"></div></div>***<div class="q">qqqq<div class="w">www<div class="e">eee<div class="r">rrr</div></div></div></div>
*{margin: 0;padding: 0}.a{width: 100px;height: 100px;border: 1px solid red;}.a > .b{width: 30px;height: 30px;background-color: green}
这是子选择器基础语法,接下来做个改动
*{margin: 0;padding: 0}.a{width: 100px;height: 100px;border: 1px solid red;}div > div{width: 30px;height:30px;background-color: green}
在这里div>div可以嵌套,也就是说只要满足这个关系就可以嵌套,所以w,e,r类满足这个条件样式就可以改变样式
伪类:没想到有这么多分类...
c3的伪类分为6种 -->动态伪类选择器,目标伪类选择器,语言伪类选择器,UI状态伪类选择器,结构伪类选择器,否定伪类选择器
伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。
伪类写法:E : pseodu { property : value }, E -->选择器,pseodu -->伪类名字,property -->属性,value -->值
1.动态伪类选择器分为2种:
a. 链接伪类选择器 : E:link-->已经链接未访问 E:visited-->已经链接已经访问
b. 用户行为伪类选择器 : E:active-->目标被激活 E:hover-->目标被鼠标悬停E:focus目标获得焦点
2.目标伪类选择器
写法:E:target,意思是匹配E元素并且E元素被相关uri(也就是a标签)指向
<style>
p:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
</head>
<body><h1>这是标题</h1><p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p><p>请点击上面的链接,:target 选择器会突出显示当前活动的 HTML 锚。</p><p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
3.语言伪类选择器-->根据元语言编码匹配元素
<style>
p:lang(en)
{
background:yellow;
}
</style>
</head><body><p>我是555。</p>
<p lang="en">I live in 555.</p>
4.UI状态选择器 -->form表单元素状态的筛选
E:checked -->被选中的元素
E:enable -->启用状态的选择器
E:disable -->禁用状态的选择器
<style media="screen">*{margin: 0;padding: 0}input:checked{margin-right: 30px}input:disabled{margin-left: 30px}</style></head><body><form action=""><input type="radio" name="sex" value="male" checked>Male<br><input type="radio" name="sex" value="female" disabled>Female</form></body>
5.结构伪类选择器 -->通过文档树结构进行匹配
参数n为整数,当小于0表示不选择元素,当变形为4-n或者是2n+1时,n的取值范围是0,1,2,3....,当n为even表示偶数,odd表示奇数,废话不多说,po一些经常用到的代码
<style media="screen">*{margin: 0;padding: 0}ul{display:flex;}ul>li{width: 30px;height: 30px;border: 1px solid red;list-style: none;border-radius: 15px;display: flex;align-items: center;justify-content: center;}</style></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></body>
效果如下:
现在添加如下
li:first-child{background-color: red}li:last-child{background-color: blue}li:nth-child(2){background-color: green}li:nth-last-child(2){background-color: black}
关于奇数偶数
li:nth-child(even){background-color: red}li:nth-of-type(odd){background-color: green}
效果等同于
li:nth-child(2n){background-color: red}li:nth-of-type(2n+1){background-color: green}
在这里我么注意到关于n的减法n不能被减只能转换为负数相加
li:nth-child(-n+5){background-color: red}
下面是错误示范
li:nth-child(5-n){background-color: red}
6.否定伪类选择器 -->可以起过滤作用
<style media="screen">*{margin: 0;padding: 0}ul{display:flex;}ul>li{width: 30px;height: 30px;border: 1px solid red;float: left;list-style: none;border-radius: 15px;display: flex;align-items: center;justify-content: center;}li:not([class=demo]){background-color: red}</style></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li class="demo">5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></body>
伪元素(惊呆了,原来平时审查元素的时候经常能看到这个以前就很粗心的pass了~~)
伪元素用于定位文档中包含的文本,但无法在文档树种定位,我们可以这样理解,伪类元素和伪元素的区别是单冒号和双冒号的区别
1 ::first-letter -->用来选择文本的第一个字母
<style media="screen">*{margin: 0;padding: 0}p::first-letter{color:red}</style></head><body><p>i am tony</p></body>
2 ::first-line -->用于选择第一行文本
<style media="screen">*{margin: 0;padding: 0}div{/* width: 150px */}div::first-line{color:red}</style></head><body><div>关于inline-block可能很多人都不熟悉,布局这方面很多人用的都是flex或者浮动,flex很强大毋庸</div></body>
3 ::before和::after,这两个非常常见的伪元素
<style media="screen">*{margin: 0;padding: 0}p{color: red}p::before{content:"before"}p::after{content:"after"}</style></head><body><p>------</p></body>
4 ::selection -->我们右键按下鼠标时文本的样式
<style media="screen">*{margin: 0;padding: 0}p{color: red}p::before{content:"before"}p::after{content:"after"}p::selection{color: yellow;background-color: red}</style></head><body><p>------</p></body>
如图,我们用鼠标选择文本的样式就变了
接下来是属性选择器(终于本文章可以终结了)
顾名思义,属性选择器就是过滤选择器嘛~
接下来就看图po代码吧
1,
*{margin: 0;padding: 0}ul>li{width: 30px;height: 30px;border: 1px solid red;list-style: none;border-radius: 15px;display: flex;align-items: center;justify-content: center;}li[id]{background-color: blue}</style></head><body><ul><li>1</li><li>2</li><li class="three-eee">3</li><li id="four">4</li><li title="i am programmer">5</li><li title="iamyou">6</li><li title="youami">7</li><li title="hellocss3">8</li><li>9</li></ul></body>
2,
li[class=three-eee]{background-color: blue}
3,
li[class|=three]{background-color: blue}
4,
li[title~=am]{background-color: blue}
5,
li[title^=iam]{background-color: green}
li[title$=ami]{background-color: green}
li[title*=llo]{background-color: green}
最后补充下
C3踩坑2--css选择器相关推荐
- 踩坑~CSS~8 位16 进制颜色
踩坑-CSS-8 位16 进制颜色 背景 初步结论 网页颜色 16 进制数字表示方法 十进制"函数"表示 支持度与最终结论 背景 我在开发 webview 环境下的 H5 小应用( ...
- 原生Javascript 操作 css类名 - 踩坑篇
文章目录 原生Javascript 操作 css类名 效果图示下: 案例 · 代码如下: 重要代码提示: 其他无关参考: 官方参考: 原生Javascript 操作 css类名 不建议用 .class ...
- 【踩坑笔记】animate.css无效【非版本问题】
之前看前端杂志了解到animate.css动画库,于是决定去学习一下.谁知道遇到了非常多的坑,也很少有博客记录了我这种问题,在此留下笔记,希望能帮到遇到同样问题的人. 初识 首先是animate.cs ...
- Vue 踩坑笔记: 引入 ElementUI 时打包失败修复记录(ERROR in ./node_modules/element-ui/lib/theme-chalk/index.css)
Vue 踩坑笔记: 引入 ElementUI 时打包失败修复记录(ERROR in ./node_modules/element-ui/lib/theme-chalk/index.css Module ...
- python爬虫多久能学会-不踩坑的Python爬虫:如何在一个月内学会爬取大规模数据...
原标题:不踩坑的Python爬虫:如何在一个月内学会爬取大规模数据 Python爬虫为什么受欢迎 如果你仔细观察,就不难发现,懂爬虫.学习爬虫的人越来越多,一方面,互联网可以获取的数据越来越多,另一方 ...
- Vue+Element el-table属性row-class-name用法及踩坑
el-table属性row-class-name用法及踩坑 需求前提:想要给表格的某一行加上不同的background,用来区分当前行的状态 根据官方给出的文档官方文档 在el-table中绑定自定义 ...
- CSS选择器-优先级-性能
首先说下曾经踩过的坑,p:nth-child(1) 匹配的是任何元素的第一子元素p ,(之前把它理解成p下的一个元素) p:nth-of-type(1) 匹配的是任何元素的所有子元素的第一 ...
- 【Vue】Vue1.0+Webpack1+Gulp项目升级构建方案的踩坑路
最近半年在维护公司的一个管理后台项目,搭建之初的技术栈比较混乱,构建方案采用了Gulp中调用Webpack的方式,Gulp负责处理.html文件,Webpack负责加载.vue..js等.而在这一套构 ...
- Antd Vue range-picker 日期初始值设置 与 重置日期踩坑总结
一.业务场景: 1.用form表单包裹,用的是 Antd Vue range-picker链接 2.创建时间初始值设置为当天的 00:00:00-23:59:59:如下截图: 2.日期选择器如下截图: ...
最新文章
- 面试必过之Mongdodb数据库面试题总结大全!
- Web云笔记--CSS
- 【NLP】中文BERT上分新技巧,多粒度信息来帮忙
- mysql 执行sql error 2,Mysql:执行source sql脚本时,出现:error 2
- (29)Gulp组合任务
- Activity、View、Window的理解一篇文章就够了
- 2000条你应知的WPF小姿势 基础篇57-62 依赖属性进阶
- 解决在编程方式下无法访问Spark Master问题
- 天地图卫星地图_一起看地图谷歌地图高清卫星地图在线_世界这么大,用地图去看看!...
- 端口扫描之FTP反弹扫描
- 简述前端MVVM框架
- python用tkinter做简易计算器_基于python tkinter的简单计算器(v1.0)
- 免费域名注册 freenom
- 毕业设计超市进销存管理系统源码
- NAS HomeAssistant
- ipa 修改服务器地址,iOS重签名 – ipa包(服务器适用)
- Converting circular structure to JSON
- docker 问题集
- 3.数据仓库之确定粒度
- 201421410039鹿永润实验二第一部分
热门文章
- 考研政治小程序使用注意事项!(含测评)
- kernel crash kernel tried to execute NX-protected page
- 入门到精通的Excel提升技巧new(上)
- Matplotlib:sin函数图像
- 自己选择的路,跪着走完吧——一个兔纸的话
- PortSwigger 点击劫持(Clickjacking)
- [CF145E]Lucky Queries
- 2019JDATA用户对品类下店铺的购买预测(机器学习一般步骤总结)
- 什么是智慧物业?智慧社区物业管理有哪些内容?
- CGB2107-Day06-SpringBoot整合Mybatis