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自定义代码片段7——CSS动画
CSS动画 {// CSS'animation// 7 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名 ...
VSCode自定义代码片段1——vue主模板
VSCode自定义代码片段(vue主模板) {// vue// 1,自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 自定义片段名称 =>编辑用户片段 ...
vscode自定义代码片段（新手交流）
一.为什么要用js代码片段运用js代码片段,能有效地帮助我们提高代码效率,减少繁琐代码的记忆过程.也是搜集过很多代码片段设置的文章,但步骤不太明确,经实际操作后整理了以下步骤,供大家学习参考,如有不 ...
VSCode自定义代码片段2——.vue文件的模板
.vue文件的模板 {// v'// 2 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... => 自定义片段名称 => ...
VSCode自定义代码片段13——Vue的状态大管家
Vue的状态大管家 {// V'Vuex// 13 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名称 ...
VSCode自定义代码片段11——vue路由的配置
vue路由的配置 {// v'router// 11 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名称 ...
VSCode自定义代码片段15——git命令操作一个完整流程
git命令操作一个完整流程 {// git'command// 15 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 新建全局代码片段文件... =&g ...
VSCode自定义代码片段3——url大全
url大全 {// url'// 3 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名称 =>编辑 ...
VSCode自定义代码片段5——HTML元素结构
HTML元素结构 {// HTML'element// 5 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片 ...

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

CSS选择器自定义代码片段

@沉木

VSCode自定义代码片段6——CSS选择器相关推荐

最新文章

热门文章