css样式

css3选择器(常用)

2017-09-14  本文已影响0人  小飞侠zzr

子代选择器

div>p 子代选择器 选择的是p标签 而且父级是div的 p 标签

兄弟选择器

div + p 紧跟在div (同级)后面的p 中间不能有别的标签 兄弟毗邻选择器

属性选择器

p[title] 带有title属性的p标签

就是说只要标签有title这个属性就会被选中

p[title=1] title属性为1的 p标签

p标签要有title属性 而且属性值应该是1,更加精确了

p[title*=1] title 属性包含1的p标签

p标签有title属性 并且属性里面有1出现,不管在什么位置

p[title$=text] 属性以text结尾的p标签

p标签有title属性 并且title的内容应该是以text结尾的(图片的选择)

p[title^=text] 属性以text开头的p标

p标签有title属性 并且title的内容是以text开头的

伪类选择器

p:nth-child(1)

一个元素中有好多个p标签,经常用伪类选择器,可以方便我们快速的选择到你想要找到的元素(这种样式会受其他元素的影响即:其他元素也在排列当中)
p:first-child 许多p标签中的第一个
p:last-child 许多p标签中的最后一个
p:nth-last-child()在末尾向开头开始计算

p:nth-of-type()

这个样式可以忽略掉其他元素的影响 规定你要找的标签的类型,(计数过程其他元素不算在内)

其他

input: checked

选择出 被选中的单选框/复选框

::selection 选择器

被可以改变被选中的文本的样式 (颜色 /背景颜色)

上一篇下一篇

猜你喜欢

热点阅读