VSCode自定义代码片段6——CSS选择器

Posted 浅香沉木

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VSCode自定义代码片段6——CSS选择器相关的知识,希望对你有一定的参考价值。

CSS选择器自定义代码片段


// CSS'selector
// 6  如何自定义用户代码片段:VSCode =》左下角设置 =》用户代码片段 =》 新建全局代码片段文件... =》自定义片段名称 =》编辑用户片段 =》ctrl+S 保存
// CSS选择器
	"Print to console": 
		"prefix": "CSS'selector",
		"body": [
"/*         CSS'selector:",
"        1,元素选择器",
"          标签名",
"",
"        2,id选择器",
"          #id属性值",
"",
"        3,类选择器",
"          .className",
"",
"        4,通配选择器",
"          *",
"",
"        复合选择器",
"        5,交集选择器(选择同时满足所有条件(一般两种以上)的标签)",
"          标签名.className 或 .className.className",
"          注意:有元素选择器则需写在前面。",
"",
"        6,并集选择器(同时选中多个元素)",
"          选择器1,选择器2,选择器3,...,选择器n ",
"",
"        7,子代选择器",
"          选择器1 > 选择器2 ",
"",
"        8,后代选择器",
"          选择器1 选择器2 ",
"",
"        9,兄弟选择器",
"          (1)选择下一个并列的兄弟",
"          前面的元素 + 后面的一个元素",
"          (2)选择后面所有并列的兄弟",
"          前面的元素 ~ 后面需要的所有元素",
"",
"        10,属性选择器",
"          [属性名]选择含有此属性的元素",
"          [属性名=属性值]选择属性名=属性值的元素",
"          [属性名^=属性值]选择以此属性值开头的元素",
"          [属性名$=属性值]选择以此属性值结尾的元素",
"          [属性名*=属性值]选择以此包含此属性值的元素",
"",
"        11,伪类选择器(伪类:不存在的类,特殊的类)",
"          伪类用来描述一种特殊的状态,比如:第一个元素,鼠标点击的元素,鼠标移入的元素...",
"          伪类一般用:开头",
"          :first-child 第一个子元素(相对于子代所有元素)",
"          :last-child 最后一个子元素",
"          :nth-child() 第n个子元素",
"          :only-child 所有子代",
"          :first-of-type 同类型第一个元素(相对于子代同一类型的元素)",
"          :last-of-type 同类型最后一个元素",
"          :nth-of-type() 同类型第n个元素",
"          :only-of-type 所有同类型元素",
"                特殊值:",
"                n: 第n个,n的范围0到正无穷大",
"                2n 或 even(偶数) :表示选择偶数位的元素",
"                2n+1 或 odd(奇数) :表示选中奇数位的元素",
"          :not(选择器2) 从选择器中除去选择器2中的元素",
"",
"          a的常用伪类",
"          a:link 正常的链接(未访问过的)",
"          a:visited 访问过的链接",
"          a:hover 鼠标移入的链接",
"          a:active 点击的链接 ",
"",
"          伪元素:表示页面中一些特殊的并不真实的存在的元素(特殊的位置)",
"          伪元素以::开头",
"          常用伪元素",
"          ::first-letter 第一个字母",
"          ::first-line 第一行",
"          ::selection 选中的内容",
"          ::before 元素的开始",
"          ::after 元素的最后",
"                注意:before和after必须结合content(内容)属性(此内容是用CSS加的,不可用鼠标选中)来使用",
"                补充:a标签的下划线text-decoration:none;   */",
		],
		"description": "CSS的选择器"
	

@沉木

以上是关于VSCode自定义代码片段6——CSS选择器的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode 如何操作用户自定义代码片段(快捷键)

VSCode创建自定义用户片段

子代选择器