feat: 添加ignore 规则

README.md

@@ -20,6 +20,8 @@ If you just wanna use level1 try
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@_nu/html-validator/level1.css" />
 ```
 
+if you wanna ignore any element just add  `data-hvi` attr.
+
 ## Content
 
 ```bash
@@ -34,4 +36,4 @@ All valid msg on css prop of `content`.
 
 html-lint was build on this awesome projects:
 
-* https://github.com/t7/construct.css
+* [https://github.com/t7/construct.css](https://github.com/t7/construct.css)

css/level1.css

@@ -12,8 +12,6 @@ head {
   overflow: auto;
   font-size: 0;
   line-height: 0;
-  outline: 1px solid #000000;
-  margin: 8px;
 }
 /*
 leve1: Should to fixed
@@ -23,8 +21,8 @@ html:not([lang]),
 html[lang=""] {
   display: block;
 }
-html:not([lang])::before,
-html[lang=""]::before {
+html:not([lang]):not([data-hvi])::before,
+html[lang=""]:not([data-hvi])::before {
   margin: 8px;
   background-color: var(--c-level1);
   color: #ffffff;
@@ -39,9 +37,9 @@ script:not([src]):empty,
 title:empty {
   display: block;
 }
-style:empty::before,
-script:not([src]):empty::before,
-title:empty::before {
+style:empty:not([data-hvi])::before,
+script:not([src]):empty:not([data-hvi])::before,
+title:empty:not([data-hvi])::before {
   margin: 8px;
   background-color: var(--c-level1);
   color: #ffffff;
@@ -51,95 +49,95 @@ title:empty::before {
   line-height: 16px;
   content: 'Those element should not be empty';
 }
-[style=""],
-[title=""],
-[id=""],
-[src=""],
-[href=""],
-[name=""],
-[for=""],
-[type=""],
-[width=""],
-[height=""] {
+[style=""]:not([data-hvi]),
+[title=""]:not([data-hvi]),
+[id=""]:not([data-hvi]),
+[src=""]:not([data-hvi]),
+[href=""]:not([data-hvi]),
+[name=""]:not([data-hvi]),
+[for=""]:not([data-hvi]),
+[type=""]:not([data-hvi]),
+[width=""]:not([data-hvi]),
+[height=""]:not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: 'Those props should not empty';
 }
-abbr:not([title]) {
+abbr:not([title]):not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: '<abbr> needs [title="…"]';
 }
-a[target]:not([rel*="noopener"]),
-a[target]:not([rel*="noreferrer"]) {
+a[target]:not([rel*="noopener"]):not([data-hvi]),
+a[target]:not([rel*="noreferrer"]):not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: '[target="…"] also needs [rel="noopener"] or [rel="noopener noreferrer"]';
 }
 /* figure */
-:not(figure) > figcaption {
+:not(figure) > figcaption:not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: "<figcaption> must be a child of <figure>";
 }
-figure > figcaption:not(:first-child):not(:last-child),
-figure > figcaption:not(:first-child):not(:last-child) ~ :last-child:not(figcaption) {
+figure > figcaption:not(:first-child):not(:last-child):not([data-hvi]),
+figure > figcaption:not(:first-child):not(:last-child) ~ :last-child:not(figcaption):not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: "<figcaption> must be first/last child of <figure>";
 }
-figure > figcaption:not(:first-of-type) {
+figure > figcaption:not(:first-of-type):not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: "<figure> should only contain one <figcaption>";
 }
 /* ul/ol */
-:not(ul):not(ol) > li {
+:not(ul):not(ol) > li:not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: "<li> is missing a parent <ul> or <ol>";
 }
-ol > :not(li),
-ul > :not(li) {
+ol > :not(li):not([data-hvi]),
+ul > :not(li):not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: "Immediate child of <ol> or <ul> must be <li>";
 }
-:not(dl) dd,
-:not(dl) dt {
+:not(dl) dd:not([data-hvi]),
+:not(dl) dt:not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: "<dd> or <dt> is missing a parent <dl> or <div>";
 }
 /* dl */
-dl > :not(dt):not(dd):not(div) {
+dl > :not(dt):not(dd):not(div):not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: "Immediate child of <dl> must be <dt>, <dd>, or <div>";
 }
 /* form */
-fieldset > :not(legend):first-child {
+fieldset > :not(legend):first-child:not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: "Invalid: first-child of <legend>";
 }
-:not(fieldset) > legend,
-fieldset > legend:not(:first-child) {
+:not(fieldset) > legend:not([data-hvi]),
+fieldset > legend:not(:first-child):not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: "<legend> must be: first-child of <fieldset>";
 }
-input[type="radio"]:not([name]) {
+input[type="radio"]:not([name]):not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: 'Radios without name="…"';
 }
-form button:not([type]) {
+form button:not([type]):not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: '<button> in <form> need [type="…"]';
 }
 /* dom */
-a a {
+a a:not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: '<a/> should not be the kids of  <a/>';
 }
-p div,
-p + div:not(:empty) + p:empty {
+p div:not([data-hvi]),
+p + div:not(:empty) + p:empty:not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: '<div> is not allowed within <p>';
 }
-:not(svg) [href]:not(a):not(link):not(area) {
+:not(svg) [href]:not(a):not(link):not(area):not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: 'attribute href not allowed on this element';
 }
-[target]:not(a):not(form) {
+[target]:not(a):not(form):not([data-hvi]) {
   outline: 2px dashed var(--c-level1) !important;
   content: 'attribute target not allowed on this element';
 }