如何从另一个CSS规则中借用样式 [英] How to borrow styles from another CSS rule

问题描述

主要档案：

home.html（存取权：唯读）

  ... 
 
< h1>标题1< / h1> 
 
 ... 
  

externalFile.css（access：read only） / p>

  .tagh1 {
 margin：10px 0; 
 font-family：inherit; 
 font-weight：bold; 
} 
  

myfile.css（access：read / write）

  h1 {
 color：＃08C; 
} 
  

如何包含 .tagh1 （externalFile.css）在 h1 CSS规则（myfile.css），不复制和粘贴他们从一个文件到另一个？ >

逻辑回答：

  h1 {
 color：＃08C; 
 / *只需复制并粘贴它们* / 
 margin：10px 0; 
 font-family：inherit; 
 font-weight：bold; 
} 
  

但我不能这样做：）

编辑：

我认为它可能是这样的：

  .tag1 {
 property1：value1; 
 property2：value2; 
} 
 
 .tag2 {
 include（.tag1）; / * or something * / 
 property3：value3; 
} 
  

避免重复此代码。

解决方案

如果我正确地理解了这个问题，你已经在页面中包含了两个CSS文件，并且你想在H1标签上重用第一个CSS规则没有必要的CSS类。它不是编辑HTML文件或第一个CSS文件的选项。

CSS本身不提供您正在寻找的重复使用类型。动态样式表语言（如 LESS 或 SASS ，但考虑到您的网站（只读文件）的限制，这可能不是一个选项。

如果JavaScript或jQuery一个选项，您可以动态添加 .tagh1 类到 h1 元素，而不用触及HTML源代码。 / p>

jQuery

  $ .ready（function（）{
 $（'h1'）。addClass（'tagh1'）; 
}）; 
  

然后，上述两个CSS规则都将应用于H1元素。

有写入权限的 .js 文件吗？如果是这样，请在上面添加上面的代码。如果没有，你必须将CSS样式复制并粘贴到第二个CSS文件中。

The main files:

home.html (access: read only)

...

    <h1>Heading 1</h1>

...

externalFile.css (access: read only)

.tagh1 {
  margin: 10px 0;
  font-family: inherit;
  font-weight: bold;
}

myfile.css (access: read/write)

h1 {
  color: #08C;
}

How I can include the styles of .tagh1 (externalFile.css) in the h1 CSS rule (myfile.css), without copying and pasting them from one file to the other?

Logical answer:

h1 {
  color: #08C;
  /* Just copy and paste them */
  margin: 10px 0;
  font-family: inherit;
  font-weight: bold;
}

but I cant do this :)

Edit:

I thought it might be something like this:

.tag1 {
  property1: value1;
  property2: value2;
}

.tag2 {
  include(.tag1); /* or something */
  property3: value3;
}

To avoid repeating the code.

解决方案

If I understand the question correctly, you're already including both CSS files in the page, and you want to re-use the first CSS rule on an H1 tag that doesn't have the necessary CSS class. And it's not an option to edit the HTML file or the first CSS file.

CSS by itself doesn't offer the type of re-use you're looking for. A dynamic stylesheet language like LESS or SASS might, but given the constraints of your website (read-only files), that's probably not an option.

If JavaScript or jQuery is an option, you can add the .tagh1 class to the h1 element dynamically, without touching the HTML source code.

jQuery

$(document).ready(function(){
    $('h1').addClass('tagh1');
});

Then both of the above CSS rules will be applied to the H1 element.

Is there a .js file that you have write access to? If so, add the above code there. If not, you'll have to copy and paste the CSS styles into the second CSS file.

这篇关于如何从另一个CSS规则中借用样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！