รีเซ็ต / ลบสไตล์ CSS สำหรับองค์ประกอบเท่านั้น

ฉันแน่ใจว่าสิ่งนี้จะต้องถูกกล่าวถึง / ถามก่อน แต่ได้ค้นหาอายุที่ไม่มีโชคคำศัพท์ของฉันต้องผิด!

ฉันจำทวีตที่ฉันเห็นเมื่อไม่นานมานี้ซึ่งแนะนำว่ามีกฎ CSS ที่จะลบสไตล์ใด ๆ ที่กำหนดไว้ก่อนหน้านี้ในสไตล์ชีทสำหรับองค์ประกอบเฉพาะ

ตัวอย่างการใช้งานที่ดีอาจอยู่ในไซต์ RWD แรกของมือถือที่มีการกำหนดสไตล์ส่วนใหญ่สำหรับองค์ประกอบเฉพาะในมุมมองหน้าจอขนาดเล็กซึ่งจำเป็นต้อง 'รีเซ็ต' หรือลบองค์ประกอบเดียวกันในมุมมองเดสก์ทอป

กฎ CSS ที่สามารถบรรลุสิ่งที่ต้องการ:

.element {
  all: none;
}

ตัวอย่างการใช้งาน:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: none;
  }
}

ดังนั้นเราสามารถลบหรือกำหนดสไตล์ได้อย่างรวดเร็วโดยไม่ต้องประกาศคุณสมบัติทั้งหมด

มีเหตุผล?

คำหลัก CSS3 initialชุดCSS3 คุณสมบัติการค่าเริ่มต้นที่กำหนดไว้ในข้อมูลจำเพาะ initialคำหลักที่มีการสนับสนุนเบราว์เซอร์ในวงกว้างยกเว้นสำหรับครอบครัว IE และ Opera Mini

เนื่องจากการขาดการสนับสนุนของ IE อาจทำให้เกิดปัญหานี่คือวิธีที่คุณสามารถรีเซ็ตคุณสมบัติ CSS บางอย่างให้เป็นค่าเริ่มต้น:

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

#reset-this-root {
    all: initial;
    * {
        all: unset;
    }
}

• gitub repo ที่เกี่ยวข้องกับรายการที่น่าทึ่งยิ่งขึ้นในเดือนธันวาคม 2017
• ที่เกี่ยวข้อง
• เกี่ยวข้องจาก MDN
• ข้อกำหนด W3C ที่เกี่ยวข้อง

ตามที่ระบุไว้ในความคิดเห็นโดย @ user566245:

นี่เป็นหลักการที่ถูกต้อง แต่ระยะทางอาจแตกต่างกันไป ตัวอย่างเช่นองค์ประกอบบางอย่างเช่น textarea โดยค่าเริ่มต้นมีเส้นขอบการใช้การรีเซ็ตนี้จะทำให้เส้นขอบ textarea เหล่านั้นน้อยลง

[POST EDIT FEB 4, '17] โหวตให้กลายเป็นบรรทัดฐานที่ทันสมัยของผู้ใช้Joost

#reset-this-parent {
  all: initial;
  * {
    all: unset;
  }
}

ตัวอย่างจาก W3

ตัวอย่างเช่นถ้าผู้เขียนระบุ all: initial บนอิลิเมนต์มันจะบล็อกการสืบทอดทั้งหมดและรีเซ็ตคุณสมบัติทั้งหมดราวกับว่าไม่มีกฎปรากฏในระดับผู้เขียนผู้ใช้หรือตัวแทนผู้ใช้ของ cascade

สิ่งนี้มีประโยชน์สำหรับองค์ประกอบรูทของ "วิดเจ็ต" ที่รวมอยู่ในหน้าซึ่งไม่ต้องการรับลักษณะของหน้านอก อย่างไรก็ตามโปรดทราบว่าสไตล์ "เริ่มต้น" ใด ๆ ที่ใช้กับองค์ประกอบนั้น (เช่นเช่น display: block จากสไตล์ชีต UA ในองค์ประกอบบล็อกเช่น) จะถูกพัดหายไป

JAVASCRIPT

ไม่มีใครคิดเรื่องอื่นนอกจาก css เพื่อรีเซ็ต css? ใช่?

มี snip ที่เกี่ยวข้องอย่างเต็มที่: https://stackoverflow.com/a/14791113/845310

getElementsByTagName ("*") จะส่งคืนองค์ประกอบทั้งหมดจาก DOM จากนั้นคุณอาจกำหนดรูปแบบสำหรับแต่ละองค์ประกอบในคอลเลกชัน:

ตอบ 9 กุมภาพันธ์ 13 ที่ 20:15 โดย VisioN

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}

ทั้งหมดนี้พูด; ฉันไม่คิดว่าการรีเซ็ต css นั้นเป็นสิ่งที่เป็นไปได้เว้นแต่เราจะจบลงด้วยเว็บเบราว์เซอร์เดียวเท่านั้นหากการตั้งค่าเริ่มต้นของเบราว์เซอร์สิ้นสุดลง

สำหรับการเปรียบเทียบที่นี่เป็น Firefox 40.0 รายการค่าสำหรับ <blockquote style="all: unset;font-style: oblique">ที่font-style: obliqueดำเนินการทริกเกอร์ DOM

align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;

สำหรับผู้อ่านในอนาคต ฉันคิดว่านี่คือสิ่งที่มีความหมาย แต่ในปัจจุบันยังไม่รองรับจริง ๆ (ดูด้านล่าง):

#someselector {
  all: initial;
  * {
    all: unset;
  }
}

• รองรับใน ( แหล่งที่มา ): Chrome 37, Firefox 27, IE 11, Opera 24
• ไม่รองรับ: Safari

มีวิธีแก้ไขปัญหาใหม่ล่าสุดที่พบในปัญหานี้

ใช้หรือall: revertall: unset

จาก MDN:

คำหลักย้อนกลับทำงานเหมือนกับที่ไม่ได้กำหนดไว้ในหลายกรณี ข้อแตกต่างสำหรับคุณสมบัติที่มีค่าที่กำหนดโดยเบราว์เซอร์หรือโดยสไตล์ชีตที่กำหนดเองที่สร้างโดยผู้ใช้ (ตั้งค่าที่ด้านเบราว์เซอร์)

คุณต้องการ"กฎ css ที่พร้อมใช้งานซึ่งจะลบสไตล์ใด ๆ ที่ตั้งค่าไว้ก่อนหน้านี้ในสไตล์ชีทสำหรับองค์ประกอบเฉพาะ"

ดังนั้นถ้าองค์ประกอบมีชื่อชั้นเช่น remove-all-styles :

เช่น:

HTML:

<div class="remove-all-styles other-classe another-class"> 
   <!-- content -->
   <p class="text-red other-some-styles"> My text </p>
</div>

ด้วย CSS:

  .remove-all-styles {
    all: revert;
  }

จะตั้งค่าทุกรูปแบบนำมาใช้โดยother-class, another-classและอื่น ๆ ทั้งหมดที่ได้รับการถ่ายทอดและนำไปใช้รูปแบบที่divทั้งหมดที่ได้รับการถ่ายทอดและนำไปใช้รูปแบบที่

หรือในกรณีของคุณ:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: revert;
  }
}

จะทำ.

ที่นี่เราใช้คุณสมบัติ CSS cool หนึ่งอันพร้อมกับค่า cool อีก CSS หนึ่ง

1. revert

ที่จริงแล้วrevertตามชื่อแจ้งให้แปลงคุณสมบัตินั้นกลับเป็นสไตล์ผู้ใช้หรือตัวแทนผู้ใช้

2. all

และเมื่อเราใช้revertกับallคุณสมบัติคุณสมบัติ CSS ทั้งหมดที่ใช้กับองค์ประกอบนั้นจะถูกเปลี่ยนกลับไปเป็นสไตล์ผู้ใช้ / ตัวแทนผู้ใช้

คลิกที่นี่เพื่อทราบความแตกต่างระหว่างผู้แต่งผู้ใช้รูปแบบตัวแทนผู้ใช้

ตัวอย่างเช่นหากเราต้องการแยกวิดเจ็ต / ส่วนประกอบที่ฝังตัวออกจากสไตล์ของเพจที่มีพวกเขาเราสามารถเขียน:

.isolated-component {
 all: revert;
}

ซึ่งจะเปลี่ยนกลับทั้งหมดauthor styles(เช่น CSS สำหรับนักพัฒนา) เป็นuser styles(สไตล์ที่ผู้ใช้ของเว็บไซต์ของเราตั้งไว้ - สถานการณ์ที่มีโอกาสน้อยกว่า) หรือเป็นuser-agentสไตล์เองหากไม่มีการกำหนดสไตล์ของผู้ใช้

รายละเอียดเพิ่มเติมได้ที่นี่: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

และปัญหาเดียวคือการสนับสนุน : เฉพาะ Safari 9.1 และ iOS Safari 9.3 เท่านั้นที่รองรับrevertมูลค่าในขณะที่เขียน

ดังนั้นฉันจะบอกว่าใช้สไตล์นี้และเลือกคำตอบอื่น ๆ

ให้ฉันตอบคำถามนี้ให้ละเอียดเพราะเป็นแหล่งที่มาของความเจ็บปวดสำหรับฉันเป็นเวลาหลายปีและมีคนเพียงไม่กี่คนที่เข้าใจปัญหาจริงๆและทำไมจึงต้องแก้ไข ถ้าฉันรับผิดชอบ CSS สเป็คทุกครั้งฉันก็รู้สึกเขินอายตรงๆที่ไม่ได้พูดเรื่องนี้ในทศวรรษที่ผ่านมา

ปัญหา

คุณต้องใส่มาร์กอัปในเอกสาร HTML และต้องมองหาวิธีเฉพาะ นอกจากนี้คุณไม่ได้เป็นเจ้าของเอกสารนี้ดังนั้นคุณจึงไม่สามารถเปลี่ยนกฎสไตล์ที่มีอยู่ คุณไม่มีความคิดว่าสไตล์ชีตอาจเป็นหรือสิ่งที่พวกเขาอาจเปลี่ยนไป

ใช้กรณีนี้คือเมื่อคุณให้ส่วนประกอบที่แสดงได้สำหรับเว็บไซต์บุคคลที่สามที่ไม่รู้จักที่จะใช้ ตัวอย่างของสิ่งนี้จะเป็น:

1. แท็กโฆษณา
2. การสร้างส่วนขยายของเบราว์เซอร์ที่แทรกเนื้อหา
3. วิดเจ็ตประเภทใดก็ได้

แก้ไขที่ง่ายที่สุด

ใส่ทุกอย่างไว้ใน iframe นี่เป็นชุดของข้อ จำกัด :

1. ข้อ จำกัด ข้ามโดเมน: เนื้อหาของคุณจะไม่สามารถเข้าถึงเอกสารต้นฉบับได้เลย คุณไม่สามารถวางซ้อนเนื้อหาปรับเปลี่ยน DOM และอื่น ๆ
2. ข้อ จำกัด ในการแสดงผล: เนื้อหาของคุณถูกล็อคภายในสี่เหลี่ยมผืนผ้า

หากเนื้อหาของคุณสามารถใส่ลงในกล่องคุณสามารถแก้ไขปัญหา # 1 ได้โดยให้เนื้อหาของคุณเขียน iframe และตั้งเนื้อหาอย่างชัดเจนดังนั้นการรอบปัญหาจะเกิดขึ้นเนื่องจาก iframe และเอกสารจะแชร์โดเมนเดียวกัน

โซลูชั่น CSS

ฉันค้นหาวิธีแก้ปัญหานี้อย่างถี่ถ้วน แต่ก็ไม่มีใครเลย สิ่งที่ดีที่สุดที่คุณสามารถทำได้คือแทนที่คุณสมบัติที่เป็นไปได้ทั้งหมดที่สามารถแทนที่ได้และแทนที่พวกเขาในสิ่งที่คุณคิดว่าควรจะเป็นค่าเริ่มต้น

แม้เมื่อคุณแทนที่มีวิธีการเพื่อให้แน่ใจว่ากฎ CSS เป้าหมายมากขึ้นจะไม่แทนที่คุณไม่มี สิ่งที่ดีที่สุดที่คุณสามารถทำได้ที่นี่คือการกำหนดเป้าหมายการแทนที่กฎของคุณโดยเฉพาะให้มากที่สุดและหวังว่าเอกสารหลักจะไม่ดีที่สุดโดยไม่ตั้งใจ: ใช้รหัสที่คลุมเครือหรือสุ่มในองค์ประกอบหลักของเนื้อหาของคุณและใช้! .

อีกวิธีหนึ่ง:

1) รวมรหัส css (ไฟล์) ของYahoo CSS resetแล้ววางทุกอย่างไว้ใน DIV นี้:

<div class="yui3-cssreset">
    <!-- Anything here would be reset-->
</div>

2) หรือใช้

• https://cssreset.com/scripts/vanilla-css-un-reset/
• https://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
• https://cssreset.com/scripts/eric-meyer-reset-css/
• https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/
• https://cssreset.com/scripts/normalize-css/

ฉันไม่แนะนำให้ใช้คำตอบที่ถูกทำเครื่องหมายว่าถูกต้องที่นี่ มันเป็น CSS ขนาดใหญ่ที่พยายามปกปิดทุกอย่าง

ฉันขอแนะนำให้คุณประเมินวิธีลบสไตล์ออกจากองค์ประกอบในแต่ละกรณี

ให้พูดเพื่อวัตถุประสงค์ SEO คุณต้องรวม H1 บนหน้าซึ่งไม่มีส่วนหัวจริงในการออกแบบ คุณอาจต้องการทำให้ลิงค์ nav ของหน้านั้นเป็น H1 แต่แน่นอนว่าคุณไม่ต้องการให้ลิงค์นำทางนั้นแสดงเป็น H1 ยักษ์ในหน้า

สิ่งที่คุณควรทำคือห่อองค์ประกอบนั้นในแท็ก h1 และตรวจสอบมัน ดูว่า CSS สไตล์ใดถูกนำไปใช้กับองค์ประกอบ h1 โดยเฉพาะ

ให้บอกว่าฉันเห็นรูปแบบต่อไปนี้นำไปใช้กับองค์ประกอบ

//bootstrap.min.css:1
h1 {
    font-size: 65px;
    font-family: 'rubikbold'!important;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
}

//bootstrap.min.css:1
h1, .h1 {
    font-size: 36px;
}

//bootstrap.min.css:1
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

//bootstrap.min.css:1
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

//bootstrap.min.css:1
h1 {
    margin: .67em 0;
    font-size: 2em;
}

//user agent stylesheet
h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

ตอนนี้คุณต้องระบุจุดสไตล์ที่แน่นอนซึ่งใช้กับ H1 และยกเลิกการกำหนดในคลาส css นี่จะมีลักษณะดังนี้:

.no-style-h1 {
    font-size: unset !important;
    font-family: unset !important;
    font-weight: unset !important;
    font-style: unset !important;
    text-transform: unset !important;
    margin-top: unset !important;
    margin-bottom: unset !important;
    font-family: unset !important;
    line-height: unset !important;
    color: unset !important;
    margin: unset !important;
    display: unset !important;
    -webkit-margin-before: unset !important;
    -webkit-margin-after: unset !important;
    -webkit-margin-start: unset !important;
    -webkit-margin-end: unset !important;
}

นี่เป็นวิธีที่สะอาดกว่าและไม่เพียงแค่วางโค้ดสุ่มลงใน css ของคุณซึ่งคุณไม่รู้ว่ามันกำลังทำอะไรอยู่

ตอนนี้คุณสามารถเพิ่มคลาสนี้ใน h1 ของคุณ

<h1 class="no-style-h1">
     Title
</h1>

หากคุณบังเอิญใช้ sass ในระบบบิลด์วิธีหนึ่งในการทำเช่นนี้ที่จะทำงานในเบราว์เซอร์หลัก ๆ ทั้งหมดก็คือการปิดการนำเข้าสไตล์ทั้งหมดของคุณด้วยตัวเลือก: not () เช่นนี้ ...

:not(.disable-all-styles) {
  @import 'my-sass-file';
  @import 'my-other-sass-file';
}

จากนั้นคุณสามารถใช้คลาสปิดการใช้งานบนคอนเทนเนอร์และเนื้อหาย่อยจะไม่มีสไตล์ของคุณ

<div class="disable-all-styles">
  <p>Nothing in this div is affected by my sass styles.</p>
</div>

แน่นอนว่าทุกสไตล์ของคุณจะถูกเติมด้วยตัวเลือก: ไม่ใช่ () ดังนั้นจึงเป็นเรื่องเล็กน้อย แต่ก็ใช้งานได้ดี

คุณพูดถึงไซต์สำหรับมือถือเป็นครั้งแรก ... สำหรับการออกแบบที่ตอบสนองได้แน่นอนจะสามารถแทนที่รูปแบบหน้าจอขนาดเล็กที่มีรูปแบบหน้าจอขนาดใหญ่ แต่คุณอาจไม่จำเป็นต้อง

ลองสิ่งนี้:

.thisClass {
    /* Rules for all window sizes. */
}

@media all and (max-width: 480px) {
    .thisClass {
        /* Rules for only small browser windows. */
    }
}

@media all and (min-width: 481px) and (max-width: 960px) {
    .thisClass {
        /* Rules for only medium browser windows. */
    }
}

@media all and (min-width: 961px) {
    .thisClass {
        /* Rules for only large browser windows. */
    }
}

ข้อความค้นหาสื่อเหล่านั้นไม่ทับซ้อนกันดังนั้นกฎของพวกเขาจึงไม่ทับซ้อนกัน ทำให้ง่ายต่อการดูแลรักษาสไตล์แต่ละชุดแยกกัน

ทางออกที่ดีกว่า

ดาวน์โหลดสไตล์ชีท "คัดลอก / วาง" เพื่อรีเซ็ตคุณสมบัติ css เป็นค่าเริ่มต้น (สไตล์ UA):
https://github.com/monmomo04/resetCss.git

ขอบคุณ @ Milche Patern!
ฉันกำลังมองหาการตั้งค่าคุณสมบัติสไตล์เริ่มต้น ความพยายามครั้งแรกของฉันคือการคัดลอกค่าที่คำนวณได้จากเครื่องมือ Dev ของเบราว์เซอร์ขององค์ประกอบรูท (html) แต่เมื่อคำนวณแล้วมันจะดู / ทำงานแตกต่างกันไปในทุกระบบ
สำหรับผู้ที่ประสบกับเบราว์เซอร์ที่ขัดข้องเมื่อพยายามใช้เครื่องหมายดอกจัน * เพื่อรีเซ็ตรูปแบบขององค์ประกอบลูก ๆ และเมื่อฉันรู้ว่ามันไม่ได้ผลสำหรับคุณฉันได้เปลี่ยนเครื่องหมายดอกจัน "*" ด้วยชื่อแท็ก HTML ทั้งหมดแทน . เบราว์เซอร์ไม่ผิดพลาด ฉันใช้ Chrome เวอร์ชัน 46.0.2490.71 m
ในที่สุดก็เป็นการดีที่จะกล่าวถึงว่าคุณสมบัติเหล่านั้นจะรีเซ็ตสไตล์ให้เป็นสไตล์เริ่มต้นขององค์ประกอบรูทที่สูงสุด แต่ไม่ใช่ค่าเริ่มต้นสำหรับองค์ประกอบ HTML แต่ละรายการ ดังนั้นเพื่อแก้ไขสิ่งนี้ฉันได้ใช้รูปแบบ "user-agent" ของเบราว์เซอร์ที่ใช้ webkit และนำไปใช้ภายใต้คลาส "reset-this"

ดาวน์โหลดสไตล์ชีท "คัดลอก / วาง" เพื่อรีเซ็ตคุณสมบัติ css เป็นค่าเริ่มต้น (สไตล์ UA):
https://github.com/monmomo04/resetCss.git

ลักษณะตัวแทนผู้ใช้:
CSS เริ่มต้นของเบราว์เซอร์สำหรับองค์ประกอบ HTML
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Css specifity (ใส่ใจกับ specifity):
https://css-tricks.com/specifics-on-css-specificity/

https://github.com/monmomo04/resetCss.git

ในสถานการณ์เฉพาะของฉันฉันต้องการข้ามการใช้สไตล์ทั่วไปกับส่วนเฉพาะของหน้าภาพประกอบที่ดีขึ้นเช่นนี้

<body class='common-styles'>
    <div id='header'>Wants common styles</div>
    <div id='container'>Does NOT want common styles</div>
    <div id='footer'>Wants common styles</div>
</body>

หลังจากยุ่งกับการรีเซ็ต CSS ซึ่งไม่ประสบความสำเร็จมากนัก (ส่วนใหญ่เป็นเพราะความสำคัญของกฎและลำดับชั้นของสไตล์ชีทที่ซับซ้อน) ทำให้ jQuery แพร่หลายไปช่วยเหลือซึ่งทำหน้าที่ได้อย่างรวดเร็วและสกปรกพอสมควร:

$(function() {
    $('body').removeClass('common-styles');
    $('#header,#footer').addClass('common-styles');
});

(ตอนนี้บอกว่าความชั่วร้ายคือการใช้ JS เพื่อจัดการกับ CSS :-))

สำหรับผู้ที่คุณพยายามคิดว่าจะลบสไตล์ออกจากองค์ประกอบเท่านั้นโดยไม่ต้องลบ css ออกจากไฟล์โซลูชันนี้จะทำงานร่วมกับ jquery:

$('.selector').removeAttr('style');

หากคุณตั้งค่า CSS ของคุณภายในคลาสคุณสามารถลบออกได้โดยใช้วิธี jQuery removeClass () รหัสด้านล่างจะลบคลาส. องค์ประกอบ:

    <div class="element">source</div>   
    <div class="destination">destination</div>
      <script>
        $(".element").removeClass();
      </script>

หากไม่ได้ระบุพารามิเตอร์วิธีนี้จะลบชื่อคลาสทั้งหมดออกจากองค์ประกอบที่เลือก

ไม่นี่เป็นเพียงเรื่องของการจัดการโครงสร้าง CSS ของคุณให้ดีขึ้น

ในกรณีของคุณฉันจะสั่ง css ของฉันเช่นนี้

.element, .element1, .element2 p{z-index: 50; display: block}
.element, .element1{margin: 0 10}
.element2 p{transform: translate3d(0, 0, 0)}

@media only screen and (min-width: 980px) {
.element, .element1, .element2 p{display: none}
}

เพียงแค่ทดสอบ

มีโอกาสใดที่คุณกำลังมองหา! กฎที่สำคัญ? มันไม่ได้ยกเลิกการประกาศทั้งหมด แต่ให้วิธีการแทนที่พวกเขา

"เมื่อมีการใช้! กฎที่สำคัญในการประกาศสไตล์การประกาศนี้จะแทนที่การประกาศอื่น ๆ ที่เกิดขึ้นใน CSS ไม่ว่าจะอยู่ที่ใดในรายการประกาศแม้ว่า!!

https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception