Question

我想更改CSS样式表的优先级。不是标签的特异性。

但是内联样式，内部样式和外部样式的顺序。

背景：我正在通过php拉一个python脚本，并从中剥离html标签。 $output = strip_tags($output,'<div><button><style>');

像这样。

但是python css是用内部样式编写的，这不是我想要的。我希望使用我的外部风格。

与此类似地搜索了所有stackoverflow问题，但没有结果。

代码：

来自python脚本的HTML：


<div class="btn6"> 


<div class="event">
<div class="row1"><div class="cell1">17-04-2019</div><div class="cell2">Bagaar</div></div>
<div class="row1"><div class="cell1">locatie</div><div class="cell2">THEATERZAAL</div></div>
<div class="row1"><div class="cell1">productieinfo</div><div class="cell2">* alle drukwerk ter goedkeuring naar kristin.hex@toneelhuis.be

*1 kruidensigaret zonder nicotine. Maakt deel uit van het stuk/scenario zoals geconcipieerd door de auteur.
* Stroboscopische effecten tijdens de voorstelling, gelieve dit aan het publiek te melden.</div></div>
<div class="row1"><div class="cell1">programmeur</div><div class="cell2">    |    </div></div>
<div class="row1"><div class="cell1">toneelmeester</div><div class="cell2">   | </div></div>
<div class="row1"><div class="cell1">permanentie</div><div class="cell2"> |   </div></div>
<div class="row1"><div class="cell1">deurcode</div><div class="cell2">2304#</div></div>
<div class="row1"><div class="cell1">verw.opkomst</div><div class="cell2">500</div></div>
<div class="row1"><div class="cell1">vestiaire</div><div class="cell2">Zaalmeisjes</div></div>
<div class="row1"><div class="cell1">zaalpers.1</div><div class="cell2">Zaalpersoneel   |   19:00 tot 22:20 |   </div></div>
<div class="row1"><div class="cell1">10:00</div><div class="cell2">Opbouw</div></div>
<div class="row1"><div class="cell1">10:45</div><div class="cell2">aankomst ploeg HTH</div></div>
<div class="row1"><div class="cell1">12:30</div><div class="cell2">lunchbreak (start)</div></div>
<div class="row1"><div class="cell1">13:30</div><div class="cell2">lunchbreak (stop)</div></div>
<div class="row1"><div class="cell1">18:00</div><div class="cell2">dinnerbreak</div></div>
<div class="row1"><div class="cell1">18:45</div><div class="cell2">Permanentie start</div></div>
<div class="row1"><div class="cell1">19:00</div><div class="cell2">Zaalpersoneel start</div></div>
<div class="row1"><div class="cell1">19:00</div><div class="cell2">preshow prep</div></div>
<div class="row1"><div class="cell1">19:30</div><div class="cell2">Deuren</div></div>
<div class="row1"><div class="cell1">20:00</div><div class="cell2">Aanvang</div></div>
<div class="row1"><div class="cell1">21:30</div><div class="cell2">Einde</div></div>
<div class="row1"><div class="cell1">21:35</div><div class="cell2">Aftertalk</div></div>
<div class="row1"><div class="cell1">22:05</div><div class="cell2">Aftertalk stop</div></div>
<div class="row1"><div class="cell1">22:20</div><div class="cell2">Zaalpersoneel stop</div></div>
<div class="row1"><div class="cell1">22:25</div><div class="cell2">Permanentie stop</div></div>
<div class="row1"><div class="cell1">22:35</div><div class="cell2">SHUTDOWN</div></div>
</div id=eventdiv>```

This is the style sheet pushed from the python script: 


<style>
    /* rowdiv */
    .row1 {
      -webkit-border-radius: 4;
      -moz-border-radius: 4;
      border-radius: 4px;
      padding: 1px 1px 1px 1px;
      border: solid #ff0000 2px;
      text-decoration: none;
      margin: 3px;
      background-color: #7fffd4;
      float: left;
      width: 501px;


    } 
    .event {
      -webkit-border-radius: 16;
      -moz-border-radius: 16;
      border-radius: 16px;
      font-family: arial;
      padding: 1px 1px 1px 1px;
      border: solid #000000 4px;
      text-decoration: none;
      margin: 1px;
      background-color: #ffffff;
      -webkit-transition-duration: 0.1s; /* Safari */
      transition-duration: 0.1s;
      align-items: center; /* align vertical */

      width: 510px;
    } 

    /* celldiv */
    .cell1 {
      -webkit-border-radius: 4;
      -moz-border-radius: 4;
      border-radius: 4px;
      font-family: arial;
      color: #353535;
      font-size: 13px;
      padding: 1px 1px 1px 1px;
      border: hidden;
      text-decoration: none;
      min-height: 15px;
      margin: 1px;
      background-color: #f0f0f0;
      text-align: right; 
      -webkit-transition-duration: 0.1s; /* Safari */
      transition-duration: 0.1s;
      display: inline-block;
      align-items: center; /* align vertical */
      width: 100px;

    } 

    .cell2 {
      -webkit-border-radius: 4;
      -moz-border-radius: 4;
      border-radius: 4px;
      font-family: arial;
      color: #353535;
      font-size: 13px;
      padding: 1px 1px 1px 1px;
      border: hidden;
      text-decoration: none;
      min-height: 15px;
      margin: 1px;
      background-color: #f0f0f0;
      text-align: left; 
      -webkit-transition-duration: 0.1s; /* Safari */
      transition-duration: 0.1s;
      align-items: center; /* align vertical */
      display: inline-block;
      width: 400px;
      vertical-align:top;
      overflow-wrap: break-word;
    } 

    /* main div */
    .btn6 {
      width: 525px;  
    } 
    </style>


And I want to use my style sheet to override the internal one that is pushed.

Answer 1

使用<link> ed和内联<style>可以使样式表中规则的优先级没有。

The cascade照常适用。

如果您希望<link>版样式表中的规则覆盖<style>元素中的一条规则，则可以：

选择器更具体或
选择器必须具有相同的特定性，并且 <link>元素必须以DOM顺序出现在<style>元素之后

（那是在我们考虑!important之前，它几乎总是可怕的，应该避免）。

更改优先级CSS样式表

1 个答案: