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

Posted 2022-12-07 浅香沉木

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的选择器"
	

@沉木