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的选择器"
}
}
@沉木