CSS3学习随笔---选择器

161 阅读1分钟

使用属性选择符匹配字符串

  • [元气|="提桶"]:选择的元素具有元气属性,且其值以提桶或者提桶-开头,包括提桶本身的一组标签。
  • [元气~="提桶"]:选择的元素具有元气属性,且其值包含提桶的一组标签。
  • [元气*="提桶"]:选择的元素具有元气属性,且其值包含子串提桶的一组标签。
  • [元气^="提桶"]:选择的元素具有元气属性,且其值以提桶开头的一组标签。
  • [元气$="提桶"]:选择的元素具有元气属性,且其值以提桶结尾的一组标签。

后代选择器

    <grandpa>
        <father>
            <child />
        </ather>
        <brother />
    </grandpa>
  • 对于以上结构,fatherchild都是grandpa的后代, 而当fatherchild都为同一种标签,如p时,grandpa p {样式},样式将同时应用到每个p标签上,不管距离有多远。

父子选择器

  • 而当我们不想选择所有后代元素时, 只选择儿子元素,可通过grandpa > p {样式},来进行选择,这样child元素将不受影响。

兄弟选择器

  • 如果我们想对于father后的brother标签进行样式设置,可以通过father + brother {样式}进行设置。