CSS-Selektor Regeln --ruleset für alle Elemente innerhalb eines Wählers?

Question

Mit at-Regeln, ist es möglich, einen Regelsatz für Elemente während dieses at-Regel Ereignisses zu haben (wie Drucke, mobile Geräte, etc.) Aber was ist nur für einen bestimmten Selektor?

ich auf einer Unter Seite einer größeren Website arbeite, und ich habe das Master-Stylesheet für jede meiner Seiten zu verwenden. Manchmal nur eine Stilregel wird durch eine Regel aus dem Master-Stylesheet übertrumpft. Um dies zu überwinden, habe ich am Ende oben mit „#mypage #content blah blah“ hinzufügen, bevor alle meine Regeln mein CSS, um sicherzustellen, präziser ist. Es wird sehr schnell chaotisch. Was ich würde es vorziehen, zu tun, ist so etwas wie:

@#mypage {
       div {
           border: 1px solid #000;
           }
       div p {
           color: #00f;
           }
       }

, so dass alle Regeln, die ich bilden, sind an die ID des Abschnitts der Seite enthaltenen arbeite ich an.

Oh, ich vergaß zu erwähnen, kann ich nicht (soweit ich verstehe) verwenden @namespace, wie meine Seite in einem Schablonenrahmen ist (daher die Notwendigkeit für das Master-Stylesheet), also wenn ich @namespace nur sagen, (my-page-url) mein Sheet des Master-Stylesheet überschreiben würde.

Fehle ich etwas einfach?

---

Zur Verdeutlichung:

Sorry, ich denke, in meinem Versuch, einfach zu bleiben, ich war zu vage ...

Ich entwickle den Inhalt einer Seite, die innerhalb eines allgemeineren Vorlage (Mastkorb, Sidebar Navigation, etc.), die einen globalen Stylesheet hat platziert werden, und ich habe keine Kontrolle über jede dieser Inhalte.

Ich habe einige Freiheit mit dem Stylesheet für nur meine Seite. Ich will keine meine Regeln versehentlich den globalen Stylesheet überschreiben, und ich möchte, um zu vermeiden, wirklich lange Selektoren für meine Regeln verwenden, um das globale Stylesheet überschreiben mein Sheet zu vermeiden. Zum Beispiel, wenn ich sagen will,

"alle Tabellen haben einen schwarzen Rand"

Ich riskiere einen schwarzen Rand um einige Tabelle in der Seitenleiste setzen. Allerdings, wenn ich sage,

"alle Tabellen innerhalb des div #content einen schwarzen Rand haben"

Dies funktioniert nur, solange sie nicht über eine spezifischere Regel haben.

Jetzt kann ich durch jede Regel gehen und eine lange Reihe von Selektoren hinzufügen, um sicherzustellen, dass jeder meiner Regeln funktioniert und nur für meinen Abschnitt, aber das ist nicht wirklich attraktiv oder Spaß zu tun. Ich habe gehofft, dass ich kann Nest all meine Regeln innerhalb einer größeren Regel wie in meinem Beispiel oben, so dass ich eine Hauptregel haben:

  #content {

    //and place all of my style rules inside of that:



 p {
     border: pink;
   }

, so dass ich nur einmal meine Spezifität erklären, und es deckt jede Regel innerhalb dieser Hauptregel.

Answer 1

Von dem, was ich die folgenden Regel gelesen habe paßt die Rechnung, ist nur eine Ebene tiefer, und ist offen typisch für die meisten Websites, die ich je gesehen habe und verwendet:

#content div {
  ... your rules ...
}

Das wäre nur dann wirksam divs, die mit der ID des Inhalts unter dem Element sind.

Es gibt keine Möglichkeit zu „Gruppe“ diese Regeln als so:

#content {
  div {
    ... your rules ...
  }
}

Das wäre schön, aber leider ist es nicht so, wie es geschrieben wurde.

Answer 2

Nicht eine perfekte Lösung, denn es nutzt PHP-basierte serverseitige Verarbeitung, aber dies könnte für Sie gut genug sein:

http://www.shauninman.com/archive/2007/06 / 27 / css_server_side_pre_processor

Answer 3

sehr ähnliche Frage (mit einem eher schlechten Titel) gefragt wurde, vor einiger Zeit.

Die populärste Antwort war Shaun Inman serverseitige Präprozessor (die nun abgelöst von CSSCacheer ).

Mein Vorschlag war Sass .

In jedem Fall ist dies etwas von einem Mangel an Vanille CSS.

Answer 4

"! Important"

Sie können die anderen Sheet mit der Erklärung ovveride:

div {
    border: 1px solid #000 !important;
    }
div p {
    color: #00f !important;
    }

Mehr Infos: http://www.w3.org/ TR / CSS2 / cascade.html # important-Regeln

Answer 5

Es gibt eine Möglichkeit, dies mit einem CSS-Engine zum Beispiel zu tun less (node.js Bibliothek).

Nach lesscss ‘Website (und persönliche Erfahrung) Sie können Nest CSS-Regeln wie folgt:

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

und mit dem Kommandozeilen-Utility less kompiliert diese in

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Mit less können Sie auch Variablen mit Schriftgrößen haben etc, so macht es Änderungen viel schneller.