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 选择器
被可以改变被选中的文本的样式 (颜色 /背景颜色)