css3选择器总结

时间:2022-08-17 19:44:29

1.p[class^/$/*=td]所有p标签的前面带有td/后面带有td/所有带有td的类的三种样式。

2.div:first-child/last-child/nth-child()在父元素下的第一个子元素/最后一个子元素/所有父元素下的子元素的选中数值

3.p:nth-of-type/first-of-type/last-of-type/nth-last-of-type()在父元素下的是p标签类型的选择器/第一个p标签的选择器/最后一个p标签的选择器/从最后一个数p标签的选择器的数值

4:trage、not(:trage)目标选择器(看看)

5.emptly:空元素的设置/not([id="footer"])出去id="footer"元素样式的设置/root=html跟元素的设置

表单选择器

1.input[type="text"]:disabled{}没有被选中的状态/input[type="text"]:enabled{}选中的状态/input[type="radio"]:checked+span{}选中的勾选样式

2./::selection{}表示的是改变鼠标选中文字的状态/input[type="text"]:read-only{}只读的状态/input[type='text']:read-write只写的状态

3.:before/:after表示只有在选择器的前面的伪类选择器{content:“”}/选择器的后面/a:hover:before{}鼠标悬浮时,修改缩略图蒙板透明度