css3选择器笔记

时间:2021-11-01 07:21:13

通用选择器
ul~p{}  为ul之后的所有p标签设置属性 (ul和p为同级元素)
ul+p{} 仅为ul之后的p标签设置属性 (ul和p为相邻元素)
div>p  为div之后的p标签设置属性{ div和p为父子关系}

属性选择器
E[att="val"] 为属性att的值为“val”的元素设置属性
E[att^="val"] 为属性att的值以“val”开头的元素设置属性
E[att$="val"] 为属性att的值以“val”结尾的元素设置属性
E[att*="val"] 为属性att的值包含“val”字符串的元素设置属性

li[class="lyp"]{
}
  
伪类选择器
与用户操作相关:
 E:disabled 匹配表单中禁用的元素 disabled="disabled" input[type="text"] disabled {}

::selection{background color:red;color:red} 用户选中字体后的背景颜色和字体颜色

结构性伪类
:root
E:nth-child(n)    ul+空格=li
E:nth-of-type(n)
E:first-child(n)
E:last-child(n)