Question

我正在编写一个Chrome扩展程序来修改特定页面的CSS。虽然，当我尝试使用style.min.css应用样式时，在级联中，我的电子表格在网站的电子表格之前呈现。确切地说，我的规则是在它们的规则之前计算的，因此它们的规则优先于我的规则。

例如，如果我尝试

article {
    background-color: red;
}

他们的规则最后被计算了，我的背景不会变成红色。

这就是开发工具的样子。我们可以看到我的注入样式表在层叠中没有优先级。

Chrome dev tools

这也是我的manifest.json，没有项目描述和名称。

"content_scripts": [{
      "css": ["style.min.css"],
      "js": ["main.js"],
      "matches": ["https://intra.epitech.eu/*"]
 }],
 "permissions": ["tabs"]

因此，如果有人对在chrome扩展程序中优先处理样式有任何想法，请发表评论：）

Answer 1

您尝试过吗？

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_graph"
    app:startDestination="@id/entrainementListe">

    <fragment
        android:id="@+id/entrainementListe"
        android:name="com.example.androidsportsomveille.Fragments.EntrainementListe"
        android:label="fragment_entrainement_liste"
        tools:layout="@layout/fragment_entrainement_liste" >
        <action
            android:id="@+id/action_entrainementListe_to_entrainementNouveau"
            app:destination="@id/entrainementNouveau" />
        <action
            android:id="@+id/action_entrainementListe_to_entrainementAction"
            app:destination="@id/entrainementAction" />
    </fragment>

    <fragment
        android:id="@+id/entrainementNouveau"
        android:name="com.example.androidsportsomveille.Fragments.EntrainementNouveau"
        android:label="fragment_entrainement_nouveau"
        tools:layout="@layout/fragment_entrainement_nouveau" >
        <action
            android:id="@+id/action_entrainementNouveau_to_entrainementGestion"
            app:destination="@id/entrainementGestion" />
    </fragment>
    <fragment
        android:id="@+id/entrainementAction"
        android:name="com.example.androidsportsomveille.Fragments.EntrainementAction"
        android:label="fragment_entrainement_action"
        tools:layout="@layout/fragment_entrainement_action" >
        <argument
            android:name="myEntrainement"
            app:argType="com.example.androidsportsomveille.Classes.Entrainement" />
        <action
            android:id="@+id/action_entrainementAction_to_entrainementGestion"
            app:destination="@id/entrainementGestion" />
    </fragment>
    <fragment
        android:id="@+id/entrainementGestion"
        android:name="com.example.androidsportsomveille.Fragments.EntrainementGestion"
        android:label="fragment_entrainement_gestion"
        tools:layout="@layout/fragment_entrainement_gestion" >
        <action
            android:id="@+id/action_entrainementGestion_to_entrainementAction"
            app:destination="@id/entrainementAction" />
        <argument
            android:name="myEntrainement"
            app:argType="com.example.androidsportsomveille.Classes.Entrainement" />
    </fragment>
</navigation>

！important标记阻止其他样式覆盖您的样式。

Answer 2

更具体的规则会覆盖更通用的规则（https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade）：

#homeboard section article {
  background-color: red;
}

Answer 3

根据OP注释onClick仅适用于js文件。因此，在文档末尾加载js文件，然后通过从该js文件加载css文件来动态插入css文件。

在"run_at": "document_end"中写下

manifest.json

让您的chrome扩展程序的样式表覆盖网站的CSS

3 个答案: