欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

比较全面的 CSS 选择器总结

程序员文章站 2022-07-04 20:06:24
...

通配符选择器

* { ... }
/* 与任何元素匹配 */

元素选择器

  • 定义:
E { ... }  /* E 表示 HTML 的元素名 */ 
div {
   	width:30px;
   	height:30px;
}

伪元素选择器

  • 特点:只针对 CSS 中已有的伪元素起作用
  • 定义:
:first-letter  对指定对象内的第一个字符起作用,仅对块元素起作用
:first-line 对指定对象内的第一行内容起作用,仅对块元素起作用
:before 
:afte

before 和 after 两个选择器需要结合和内容相关的属性使用,后面我单独写文章总结。

属性选择器

  • 定义:
E[attr] { ... } /* 表示针对具有 attr 属性的 E 元素起作用 */
div[id] {
	width:30px;
	height:30px;
}

元素选择器的一些匹配规则:

  • 元素包含 attr 属性,且 attr 属性值为 value
E[attr=value] { ... }
  • 元素包含 attr 属性,且 attr 属性值为 value,或包含 attr2 属性,且 attr2 属性值为 value2
E[attr1=value1][attr2=value2] { ... }
  • …,属性值为以空格隔开的系列值,其中某个值为 value
E[attr~=value] { ... }
  • …,属性值为以连字符隔开的系列值,第一个值为 value
E[attr|=value] { ... }
  • …,属性值为以 value 开头的字符串
E[attr^=value] { ... }
  • …,属性值为以 value 结尾的字符串
E[attr$=value] { ... }
  • …,属性值为包含 value 的字符串
E[attr*=value] { ... }

ID 选择器

  • 定义:
#idValue { ... } 
/* 表示对 id 为 idValue 的 HTML 元素起作用 */

类选择器

定义:

.classValue { ... } 
/* 对 class 属性值为 classValue 的元素起作用 */

伪类选择器

  • 特点:与伪元素选择器类似,主要用于对已有的选择器做出进一步限制,对已有选择器能匹配的元素做进一步的过滤。
  • 分类:结构性伪类选择器、UI元素状态伪类选择器、其他伪类选择器
    具体介绍另写文章详述。

不同选择器组合成的选择器

  • 元素选择器与 ID选择器组合
E#idValue { ... }  
/* 对 id 属性为 idValue 的 E 元素起作用 */
  • 元素选择器与类选择器组合
[E].classValue { ... }  
/*  对 class 属性为 classValue 的E 元素起作用 */

选择器按照关系组合成的选择器

  • 包含选择器
Selector1 Selector2 { ... } 
/* 对所有包含在 Selector1 内部的 Selector2 选择器起作用 */
  • 子选择器
Selector1>Selector2 { ... } 
/* 对所有包含在 Selector1 内部,且要求 Selector2 对应的元素必须是 Selector1 对应的元素的直接子元素才起作用 */
  • 兄弟选择器
Selector1 ~ Selector2 { ... } 
/* 对 Selector1 对应的元素后面(不包含对应元素),且属于 Selector2 作用范围的元素起作用 */
  • 组合
Selector1,Selector2 { ... } 
/* 对所列选择器,只要匹配其中任意一个的元素起作用 */
相关标签: css