css 学习日记

一、选择器

• 元素选择器
  格式：标签名{} 例如:p{}
  作用：选则页面中所有p标签
• id选择器
  格式:#id值{} 例如:#userId{**}
  作用：选择页面中id值为userId的标签
• 类选择器
  格式：.class值{} 例如:.cls1{**}
  作用：选择页面中class值为cls1的标签
• 分组选择器
  格式：选择器1,选择器2,选择器N{} 例如:p,#userId,a{**}
  作用：选择页面p标签和id为userId和a标签的所有标签
• 通配选择器
  格式：*
  作用：选择所有标签
• 复合（交集）选择器
  格式：选择器1选择器2{} 例如:div.cls1{**}
  作用：选择div标签下class为cls1的标签
• 后代选择器
  格式：祖先元素 后代元素{} 例如:div p{**}
  作用：选择div下面的p标签
• 子元素选择器
  格式：父元素>子元素{} 例如: div>p{**}
  作用：寻找div下的p元素，如果还有下级p标签则不管
• 兄弟选择器
  格式1：选择器1+选择器2{} 例如:.h3 + p{}
  作用1：选择顺序为第一个class为h3的后面的同级p标签，后面还有不管
  格式2： .h3~p{**}
  作用2：选择所有class为h3后面的同级p标签
  参考：https://www.cnblogs.com/jf-67/p/8987341.html
• 其他选择器
  • 格式:选择器:first-child 例如: div p:first-child
    作用：选择父元素中第一个p标签，必须要有父元素
  • 格式:选择器:last-child 例如:div p:last-child
    作用：选择父元素中最后一个p标签，必须要有父元素
  • 格式：选择器:nth-child(2) 例如 div p:nth-child(2)
    作用：选择父元素中顺序第2个标签，下标从1开始，必须要有父元素
  • 格式：div p:nth-last-child(1)
    作用：选择父元素中倒数第1个p标签，必须要有父元素
  • 格式：apple:first-of-type
    作用：所有元素中第一个apple元素，从根节点开始所有标签
  • 格式：div p:nth-of-type(odd)
    作用：div中所有下标奇数(odd)的标【even是选择偶数标签】
    格式：div p:nth-of-type(3n+2)
    作用：从下标2开始，每隔3个下标值选中标签，包含2下标在内也被选中
  • 格式：div p:only-of-type
    作用：从所有div中选中只包含一个p标签的那个标签
  • 格式：div p:last-of-type
    作用：选中div中顺序中最后一个p标签
  • 格式：div:empty
    作用：选中所有没有内容的div
  • 格式：not(p,.cls1)
    作用：选中不是p标签，class不是cls1的所有标签
  • 格式：[id]
    作用：选中所有包含id属性的标签
    格式：a[id]
    作用：选中所有包含id属性的a标签
    格式：a[id=“home”]
    作用：选中所有包含id属性值为home的a标签