css选择器总结
程序员文章站
2022-05-01 17:05:43
...
dany04
选择器
1.核心选择器
标签选择器
div{}
id选择器
#one{}
class选择器
.second
逗号选择器
div,#id-name{}
组合选择器
div#one{}
普通选择器
(* 一般不适用)
(宽度加给父元素,高度加给子元素)
2.层次选择器
子元素选择器
.nav>ul>li>{}
后代选择器
.nav li{}
下一个兄弟选择器
products> li.ios~*{}
之后所有兄弟选择器
.products > li.ios ~ *{}
3.属性选择器
与状态相关
selector[]
input[type=text]
input[type^=t] 以t开头
input[type$=t] 以t结尾
input[type*=t] 包含t的
与子元素相关
4.伪类选择器
:link a标签还未被访问
:hover 光标悬浮到元素上
:active a标签**
:visited a标签访问过
:first-child 子元素的第一个
:last-child 子元素的最后一个
:nth-child(v) 子元素中指定一个,隔行变色
v 为数字,公式,关键字
:first-of-type
:last-of-type
:nth-of-type(v)
v 为数字,公式,关键字
5.伪元素
::after
::before
副作用:在dom节点中产生一个新节点
position:relative
position:absolute
上一篇: Java读取excel
下一篇: css选择器总结