css常用选择器

常用选择器

选择器 示例 说明
.class -
#id -
element p -
elem1, elem2 div, p 选择所有的div元素和p元素
elem1 elem2 div p 选择所有的div元素内的所有p元素,包含所有的后代元素
elem1>elem2 div>p 选择父级是div的所有p元素,p的父级必须是div
elem1+elem2 div+p 选择div之后的相邻p元素,divp必须是相同父级
elem1~elem2 div~p 选择同一父级下div后的所有p元素,divp必须是相同父级
:first-child p:first-child 匹配其父元素中的第一个子元素
:last-child p:last-child 匹配其父元素中的最后一个子元素
:before p:before 向选定的元素前插入内容,使用content属性来指定要插入的内容
:after p:after 向选定的元素后插入内容

:before&:after content的属性值

说明
none 设置Content,如果指定成Nothing
normal 设置content,如果指定的话,正常,默认是"none"(该是nothing)
counter 设定计数器内容
attr(attribute) 设置Content作为选择器的属性之一。
string 设置Content到你指定的文本
open-quote 设置Content是开口引号
close-quote 设置Content是闭合引号
no-open-quote 如果指定,移除内容的开始引号
no-close-quote 如果指定,移除内容的闭合引号
url(url) 设置某种媒体(图像,声音,视频等内容)
inherit 指定的content属性的值,应该从父元素继承

推荐阅读更多精彩内容

  • 一. 元素(标签) 选择器作用:根据指定标签名称,在当前界面找到所有该名称的标签,然后为其设置属性。格式:标签名称...
    dwy_interesting阅读 49评论 0 1
  • 一. 子元素选择器作用:找到指定标签的所有特定直接子元素,然后为其设置属性。格式: 父标签 > 子标签{属性:属...
    dwy_interesting阅读 21评论 0 0
  • 写在前面: 给html书写CSS样式的四种方式: 外嵌式:嵌入某一个文件的CSS样式,一般在存放html文件的文件...
    YAN7阅读 1,094评论 0 5
  • 常用选择器 id选择器 #idName 类选择器 .className 标签选择器 tagName 交叉选择器 t...
    金托Man阅读 84评论 0 1
  • 常用选择器 子代和父代选择器 伪类选择器 伪元素 属性选择器 孩子选择器 兄弟选择器 否定伪类 优先选择器 a的伪类
    a464660217阅读 35评论 0 0