css的选择器可能大家都懂,可是有一些知识点我们往往会忽略,接下来po一些以前我经常没去看的point
兄弟选择器
111222
*{ 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"的子选择器
***qqqqwwweeerrr
*{ 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标签)指向这是标题
请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。
内容 1...
内容 2...
3.语言伪类选择器-->根据元语言编码匹配元素
我是555。
I live in 555.
4.UI状态选择器 -->form表单元素状态的筛选
E:checked -->被选中的元素E:enable -->启用状态的选择器E:disable -->禁用状态的选择器
5.结构伪类选择器 -->通过文档树结构进行匹配
参数n为整数,当小于0表示不选择元素,当变形为4-n或者是2n+1时,n的取值范围是0,1,2,3....,当n为even表示偶数,odd表示奇数,废话不多说,po一些经常用到的代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
效果如下:
现在添加如下
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.否定伪类选择器 -->可以起过滤作用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
伪元素(惊呆了,原来平时审查元素的时候经常能看到这个以前就很粗心的pass了~~)
伪元素用于定位文档中包含的文本,但无法在文档树种定位,我们可以这样理解,伪类元素和伪元素的区别是单冒号和双冒号的区别
1 ::first-letter -->用来选择文本的第一个字母
i am tony
2 ::first-line -->用于选择第一行文本
关于inline-block可能很多人都不熟悉,布局这方面很多人用的都是flex或者浮动,flex很强大毋庸
3 ::before和::after,这两个非常常见的伪元素
------
4 ::selection -->我们右键按下鼠标时文本的样式
------
如图,我们用鼠标选择文本的样式就变了
接下来是属性选择器(终于本文章可以终结了)
顾名思义,属性选择器就是过滤选择器嘛~
接下来就看图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 } - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
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 } 
最后补充下
