Setel ulang / hapus gaya CSS hanya untuk elemen

Saya yakin ini pasti telah disebutkan / ditanyakan sebelumnya tetapi telah mencari usia tanpa keberuntungan, terminologi saya pasti salah!

Samar-samar saya ingat tweet yang saya lihat beberapa waktu lalu yang menyarankan bahwa ada aturan css yang tersedia yang akan menghapus gaya apa pun yang sebelumnya ditetapkan dalam stylesheet untuk elemen tertentu.

Contoh penggunaan yang baik mungkin ada di situs RWD mobile-first di mana banyak gaya yang digunakan untuk elemen tertentu dalam tampilan layar kecil perlu 'diatur ulang' atau dilepas untuk elemen yang sama dalam tampilan desktop.

Aturan css yang dapat mencapai sesuatu seperti:

.element {
  all: none;
}

Contoh penggunaan:

/* 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;
  }
}

Jadi kami dapat dengan cepat menghapus atau mengatur ulang gaya tanpa harus mendeklarasikan setiap properti.

Masuk akal?

Kata kunci CSS3 initialmenetapkan properti CSS3 ke nilai awal sebagaimana didefinisikan dalam spesifikasi . Kata initialkunci tersebut memiliki dukungan browser yang luas kecuali untuk keluarga IE dan Opera Mini.

Karena kurangnya dukungan IE dapat menyebabkan masalah di sini adalah beberapa cara Anda dapat mengatur ulang beberapa properti CSS ke nilai awalnya:

.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;
    }
}

• Rilis repo github dengan desember 2017 yang lebih eksotis
• Terkait
• Terkait dengan MDN
• Spesifikasi W3C terkait

Seperti yang disebutkan dalam komentar oleh @ user566245:

ini benar pada prinsipnya, tetapi jarak tempuh individual dapat bervariasi. Misalnya elemen-elemen tertentu seperti textarea secara default memiliki border, menerapkan reset ini akan membuat border textarea itu lebih sedikit.

[POST EDIT FEB 4, '17] Terpilih untuk menjadi norma modern, pengguna Joost

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

CONTOH DARI W3

Misalnya, jika seorang penulis menentukan semua: awal pada suatu elemen, ia akan memblokir semua warisan dan mengatur ulang semua properti, seolah-olah tidak ada aturan yang muncul di tingkat kaskade penulis, pengguna, atau agen pengguna.

Ini dapat berguna untuk elemen root dari "widget" yang termasuk dalam halaman, yang tidak ingin mewarisi gaya halaman luar. Namun, perhatikan bahwa gaya "default" apa pun yang diterapkan pada elemen tersebut (seperti, misalnya tampilan: blok dari lembar gaya UA pada elemen blok seperti) juga akan terhapus.

JAVASCRIPT?

Tidak ada yang memikirkan selain css untuk mengatur ulang css? Iya?

Ada snip yang sepenuhnya relevan: https://stackoverflow.com/a/14791113/845310

getElementsByTagName ("*") akan mengembalikan semua elemen dari DOM. Kemudian Anda dapat mengatur gaya untuk setiap elemen dalam koleksi:

dijawab 9 Feb '13 pada 20:15 oleh VisioN

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

Dengan semua ini dikatakan; saya tidak berpikir reset css adalah sesuatu yang layak kecuali kita berakhir dengan hanya satu browser web .. jika 'default' diatur oleh browser pada akhirnya.

Sebagai perbandingan, di sini adalah Firefox daftar nilai 40,0 untuk <blockquote style="all: unset;font-style: oblique">di mana font-style: obliqueoperasi pemicu 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;

Untuk pembaca masa depan. Saya pikir inilah yang dimaksud tetapi saat ini tidak terlalu luas didukung (lihat di bawah):

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

• Didukung dalam ( sumber ): Chrome 37, Firefox 27, IE 11, Opera 24
• Tidak didukung: Safari

Ada solusi baru yang ditemukan untuk masalah ini.

Gunakan all: revertatau all: unset.

Dari MDN:

Kata kunci pengembalian berfungsi persis sama dengan tidak disetel dalam banyak kasus. Satu-satunya perbedaan adalah untuk properti yang memiliki nilai yang ditetapkan oleh browser atau oleh stylesheet kustom yang dibuat oleh pengguna (ditetapkan di sisi browser).

Anda perlu "Aturan css tersedia yang akan menghapus gaya apa pun yang sebelumnya ditetapkan dalam stylesheet untuk elemen tertentu."

Jadi, jika elemen memiliki nama kelas seperti remove-all-styles:

Misalnya:

HTML:

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

Dengan CSS:

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

Akan mengatur ulang semua gaya yang diterapkan oleh other-class, another-classdan semua gaya yang diwarisi dan diterapkan untuk itu div.

Atau dalam kasus Anda:

/* 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;
  }
}

Akan melakukan.

Di sini kami menggunakan satu properti CSS keren dengan nilai CSS keren lainnya.

1. revert

Sebenarnya revert, seperti namanya, mengembalikan properti itu ke gaya pengguna atau agen pengguna.

2. all

Dan ketika kita gunakan revertdengan allproperti, semua properti CSS yang diterapkan ke elemen itu akan dikembalikan ke gaya pengguna / agen pengguna.

Klik di sini untuk mengetahui perbedaan antara gaya penulis, pengguna, agen-pengguna.

Sebagai contoh: jika kita ingin mengisolasi widget / komponen tertanam dari gaya halaman yang memuatnya , kita dapat menulis:

.isolated-component {
 all: revert;
}

Yang akan author stylesmengembalikan semua (yaitu CSS pengembang) ke user styles(gaya yang ditetapkan pengguna situs web kami - skenario yang lebih kecil) atau ke user-agentgaya itu sendiri jika tidak ada gaya pengguna yang ditetapkan.

Lebih detail di sini: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

Dan satu-satunya masalah adalah dukungannya : hanya Safari 9.1 dan iOS Safari 9.3 yang memiliki dukungan untuk revertnilai pada saat penulisan.

Jadi saya akan mengatakan gunakan gaya ini dan mundur untuk jawaban lain.

Biarkan saya menjawab pertanyaan ini dengan saksama, karena itu telah menjadi sumber rasa sakit bagi saya selama beberapa tahun dan sangat sedikit orang yang benar-benar memahami masalah dan mengapa masalah ini penting untuk diselesaikan. Jika saya bertanggung jawab untuk spec CSS, saya akan malu, terus terang, karena tidak membahas ini dalam dekade terakhir.

Masalah

Anda perlu menyisipkan markup ke dalam dokumen HTML, dan itu perlu terlihat dengan cara tertentu. Selain itu, Anda tidak memiliki dokumen ini, jadi Anda tidak dapat mengubah aturan gaya yang ada. Anda tidak tahu seperti apa style sheet itu , atau apa yang bisa mereka ubah menjadi.

Gunakan kasing untuk ini adalah saat Anda menyediakan komponen yang dapat ditampilkan untuk situs web pihak ketiga yang tidak dikenal untuk digunakan. Contohnya adalah:

1. Tag iklan
2. Membangun ekstensi peramban yang menyisipkan konten
3. Semua jenis widget

Perbaikan paling sederhana

Letakkan semuanya di iframe. Ini memiliki serangkaian keterbatasannya sendiri:

1. Batasan Cross Domain: Konten Anda tidak akan memiliki akses ke dokumen asli sama sekali. Anda tidak dapat menampilkan konten, memodifikasi DOM, dll.
2. Batasan Tampilan: Konten Anda dikunci di dalam persegi panjang.

Jika konten Anda dapat masuk ke dalam kotak, Anda dapat mengatasi masalah # 1 dengan meminta konten Anda menulis iframe dan secara eksplisit mengatur konten, sehingga menghindari masalah, karena iframe dan dokumen akan berbagi domain yang sama.

Solusi CSS

Saya sudah mencari solusi untuk ini, tetapi sayangnya tidak ada. Yang terbaik yang dapat Anda lakukan adalah secara eksplisit menimpa semua properti yang mungkin dapat ditimpa, dan menimpanya dengan apa yang Anda pikirkan seharusnya nilai defaultnya.

Bahkan ketika Anda menimpa, tidak ada cara untuk memastikan aturan CSS yang lebih bertarget tidak akan menimpa Anda . Yang terbaik yang dapat Anda lakukan di sini adalah memiliki target aturan penggantian Anda sespesifik mungkin dan berharap dokumen induk tidak sengaja melakukannya dengan baik: gunakan ID yang tidak jelas atau acak pada elemen induk konten Anda, dan gunakan! Penting pada semua definisi nilai properti .

cara lain:

1) termasuk kode css (file) dari Yahoo CSS reset dan kemudian masukkan semuanya ke dalam DIV ini:

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

2) atau gunakan

• 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/

Saya tidak merekomendasikan menggunakan jawaban yang telah ditandai sebagai benar di sini. Ini adalah gumpalan besar CSS yang mencoba untuk menutupi semuanya.

Saya menyarankan agar Anda mengevaluasi cara menghapus gaya dari suatu elemen berdasarkan kasus.

Katakanlah untuk keperluan SEO Anda perlu memasukkan H1 pada halaman yang tidak memiliki judul aktual dalam desain. Anda mungkin ingin membuat tautan nav dari halaman itu menjadi H1 tetapi tentu saja Anda tidak ingin tautan navigasi itu ditampilkan sebagai H1 raksasa di halaman tersebut.

Yang harus Anda lakukan adalah membungkus elemen itu dalam tag h1 dan memeriksanya. Lihat gaya CSS apa yang diterapkan secara khusus pada elemen h1.

Katakanlah saya melihat gaya berikut diterapkan pada elemen.

//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;
}

Sekarang Anda perlu menentukan titik gaya yang tepat yang diterapkan pada H1 dan menghapusnya dalam kelas css. Ini akan terlihat seperti berikut ini:

.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;
}

Ini jauh lebih bersih dan tidak hanya membuang gumpalan kode acak ke css Anda yang Anda tidak tahu apa yang sebenarnya dilakukannya.

Sekarang Anda dapat menambahkan kelas ini ke h1 Anda

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

Jika Anda kebetulan menggunakan sass dalam sistem build, salah satu cara untuk melakukan ini yang akan bekerja di semua browser utama adalah dengan membungkus semua impor gaya Anda dengan pemilih:: (bukan) seperti ...

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

Kemudian Anda dapat menggunakan kelas penonaktifan pada sebuah wadah dan sub-konten tidak akan memiliki gaya apa pun.

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

Tentu saja semua gaya Anda sekarang akan diawali dengan pemilih: not (), jadi itu agak jelek, tetapi bekerja dengan baik.

Anda menyebutkan situs pertama seluler ... Untuk desain yang responsif, tentu saja memungkinkan untuk mengganti gaya layar kecil dengan gaya layar besar. Tetapi Anda mungkin tidak perlu melakukannya.

Coba ini:

.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. */
    }
}

Kueri media itu tidak tumpang tindih, sehingga aturan mereka tidak saling menimpa. Ini membuatnya lebih mudah untuk mempertahankan setiap set gaya secara terpisah.

SOLUSI LEBIH BAIK

Unduh stylesheet "salin / tempel" untuk mengatur ulang properti css ke default (gaya UA):
https://github.com/monmomo04/resetCss.git

Terima kasih @ Milche Patern! Akhirnya, ada baiknya menyebutkan bahwa properti-properti itu akan mengatur ulang gaya ke gaya default elemen root teratas tetapi tidak ke nilai awal untuk setiap elemen HTML. Jadi untuk memperbaikinya, saya telah mengambil gaya "agen-pengguna" dari browser berbasis webkit dan menerapkannya di bawah kelas "reset-ini".
Saya benar-benar mencari nilai properti gaya reset / default. Percobaan pertama saya adalah menyalin nilai yang dihitung dari alat Dev browser dari elemen root (html). Tetapi ketika dihitung, itu akan terlihat / bekerja berbeda pada setiap sistem.
Bagi mereka yang menemukan browser crash ketika mencoba menggunakan tanda bintang * untuk mengatur ulang gaya elemen anak-anak, dan seperti yang saya tahu itu tidak bekerja untuk Anda, saya telah mengganti tanda bintang "*" dengan semua nama tag HTML sebagai gantinya . Peramban tidak mogok; Saya menggunakan Chrome Versi 46.0.2490.71 m.

Unduh stylesheet "salin / tempel" untuk mengatur ulang properti css ke default (gaya UA):
https://github.com/monmomo04/resetCss.git

Gaya agen pengguna:
CSS default browser untuk elemen HTML
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Spesifisitas Css (perhatikan spesifikasi):
https://css-tricks.com/specifics-on-css-specificity/

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

Dalam skenario spesifik saya, saya ingin melewatkan penerapan gaya umum ke bagian tertentu halaman, lebih baik diilustrasikan seperti ini:

<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>

Setelah mengacaukan dengan reset CSS yang tidak membawa banyak keberhasilan (terutama karena aturan diutamakan dan hierarki stylesheet yang kompleks), membawa jQuery di mana-mana ke penyelamatan, yang melakukan pekerjaan dengan sangat cepat dan cukup kotor:

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

(Sekarang katakan betapa jahatnya menggunakan JS untuk berurusan dengan CSS :-))

Bagi Anda yang mencoba mencari cara untuk benar-benar menghapus styling dari elemen saja, tanpa menghapus css dari file, solusi ini berfungsi dengan jquery:

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

jika Anda mengatur CSS Anda di dalam kelas, Anda dapat dengan mudah menghapusnya menggunakan metode jQuery removeClass (). Kode di bawah ini menghapus kelas elemen.:

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

Jika tidak ada parameter yang ditentukan, metode ini akan menghapus SEMUA nama kelas dari elemen yang dipilih.

Tidak, ini hanya masalah mengelola struktur css Anda dengan lebih baik.

Dalam kasus Anda, saya akan memesan sesuatu css saya seperti ini:

.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}
}

Percobaan saja.

Apakah Anda sedang mencari aturan penting? Itu tidak membatalkan semua deklarasi tetapi menyediakan cara untuk menimpanya.

"Ketika suatu! Aturan penting digunakan pada deklarasi gaya, deklarasi ini mengesampingkan deklarasi lain yang dibuat dalam CSS, di mana pun itu dalam daftar deklarasi. Meskipun,! Penting tidak ada hubungannya dengan kekhususan."

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