作者:Breerus | 来源:互联网 | 2023-05-18 17:37
本文主要介绍前端的一些主流IDE常用语法,示例IDE为webstorm2017.31.类名:div.nav+Tabtips:div是标签,试用所有常用的标签如a、p、i
本文主要介绍前端的一些主流IDE常用语法,示例IDE为webstorm2017.3
1.类名:div.nav +Tab
tips:div是标签,试用所有常用的标签如a、p、input等等,而 “.” 后面跟随的就是我们的class类名,如需多个类名可用 .+类名 拼接多个,如:div.+类名.+类名 。若需设置id,用#拼接即可,如:div#+id名。
<div class="nav">div>
<div class="nav color">div>
<div id="nav">div>
2.父子容器:div>ul>li+Tab
tips: >是拼接父子容器的,可以逐级递增。
<div>
<ul>
<li>li>
ul>
div>
3.多个标签元素:div>ul>li*5+Tab
tips: *+数字 数值的多少表示子集的个数,适用乘法。
<div>
<ul>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
div>
4.html模板:!+Tab
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
body>
html>
5.同级兄弟元素:nav+div+p+Tab
tips:同级兄弟元素用+号拼接
<nav>nav>
<p>p>
<div>div>
6.复合元素分组:div>(nav>ul+li*5>a)+div+fooder>span+Tab
tips:符合()和加乘法的优先级判断
<div>
<nav>
<ul>ul>
<li><a href="">a>li>
<li><a href="">a>li>
<li><a href="">a>li>
<li><a href="">a>li>
<li><a href="">a>li>
nav>
<div>div>
<fooder><span>span>fooder>
div>
7.类名自增:ul>ol.class$*3+Tab
<ul>
<ol class="class1">ol>
<ol class="class2">ol>
<ol class="class3">ol>
ul>