CSS选择器汇总

嘿
647 阅读3分钟

元素选择器

  1. 通配符选择器：*

     选择当面页面所有的元素，一般用于设置全局样式

  2. 标签选择器： div

     选择所有的div元素

  3. 类选择器：.btn

     选择所有有class包含btn的元素

  4. id选择器：#app

     选择id为app的一个元素
  • 一个元素可以有多个class,但只能有一个唯一的id。类名可以重用，但id是唯一的

关系选择器

  1. 后代选择器（F C）

     选择父元素F的所有后代元素C，包括子元素，孙元素...（如：.btn span）

  2. 子代选择器（F>C）

     选择父元素F的子元素C（如：div>p）

  3. 相邻选择器（E+B）

     选择和元素E的紧邻的一个元素B，E和B应该同属于一个父元素（如：h3+p会选中p1）

  4. 兄弟选择器（E~B）

     选择和元素E的紧邻的所有符合条件的兄弟元素B，E和B应该同属于一个父元素（如： h3~p 则会选中p1、p2、p3）

<h3>这是一个标题</h3>
<p>p1</p>
<p>p2</p>
<p>p3</p>

属性选择器

选择器格式 版本 功能
E[att] CSS2 选择具有att属性的E元素。
E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素。
E[att~="val"] CSS2 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
E[att^="val"] CSS3 选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"] CSS3 选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"] CSS3 选择具有att属性且属性值为包含val的字符串的E元素。
E[att|="val"] CSS2 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择

伪类选择器(常用)

选择器格式 版本 功能
E:link CSS1 设置超链接a在未被访问前的样式。
E:visited CSS1 设置超链接a在其链接地址已被访问过时的样式。
E:hover CSS1/2 设置元素在其鼠标悬停时的样式。
E:active CSS1/2 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
E:first-child CSS2 匹配父元素的第一个子元素E。
E:last-child CSS3 匹配父元素的最后一个子元素E。
E:nth-child(n) CSS3 匹配父元素的第n个子元素E。
E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

伪元素选择器

选择器格式 版本 功能
E:first-letter/E::first-letter CSS1/3 设置对象内的第一个字符的样式。
E:first-line/E::first-line CSS1/3 设置对象内的第一行的样式。
E:before/E::before CSS2/3 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/E::after CSS2/3 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::placeholder CSS3 设置对象文字占位符的样式。
E::selection CSS3 设置对象被选择时的颜色。
avatar
文章
阅读
粉丝