复杂CSS选择器的工作原理_Css_Css Selectors

复杂CSS选择器的工作原理

css

复杂CSS选择器的工作原理,css,css-selectors,Css,Css Selectors,伙计们，我正在研究来自第三方的复杂CSS选择器。我不能忍受几件事嵌套CSS的工作原理。我看到很多嵌套的CSS，比如 .firstclass { .someotherclass { } } 有时候 .firstclass.secondclass { .thirdclass{} .fourthclass{} } 我还尝试了低于我预期的示例代码，第二个文本框的背景色将变为“黑色”，但这并没有发生 <html> <head> <st

伙计们，我正在研究来自第三方的复杂CSS选择器。我不能忍受几件事

嵌套CSS的工作原理。我看到很多嵌套的CSS，比如

.firstclass
{
   .someotherclass { }
}

有时候

.firstclass.secondclass
{
   .thirdclass{}
   .fourthclass{}

}

我还尝试了低于我预期的示例代码，第二个文本框的背景色将变为“黑色”，但这并没有发生

<html>

   <head>

   <style type="text/css">

   .style-color
   {
       background-color:#000000;
   }

   #id2_.style-color h1
   {   
       background-color:#F0E68C;
       .apply
       {
           background-color:#000000;
       }


   }
   </style>
   </head>

   <body> 

   <div id="id1" class="style-color"> <h1> <input type="text" class="apply"> </h1> </div> 
   <div id="id2_" class="style-color"> <h1> <input type="text" class="apply"> </h1></div>

   </body>

</html>


.款式颜色
{
背景色：#000000；
}
#id2.样式颜色h1
{   
背景色：#F0E68C；
.申请
{
背景色：#000000；
}
}

这不是有效的CSS。如果您看到的是该代码，那么它主要是动态CSS。SASS和LESS是动态CSS的例子。他们将编程功能添加到CSS中。您可以将SCOUT编译器用于SASS。谷歌it。

我发现我使用的任何第三方源代码都在内部使用SAAS。因此我感到困惑

现在我已经清楚了这一点，所以我将尝试了解SAAS及其工作方式。

这不是“原生”CSS，而是类似LESS或SASS的东西。是的，它正在使用SAAS，只是介绍了他们的网站如何开始SAAS的正常演示/hello world程序。请不要忘记接受答案。：-）Abhijit是一个很好的开始学习的地方。安装本身看起来很复杂。此链接将引导您完成安装过程。我已安装，但它不是现成的。我在编译文件时遇到一些ruby错误。C:source org/jruby/RubyKernel.java:2096:in

send'C:/Program Files（x86）/Scout/vendor/gems/gems/compass-0.12.2/lib/compass/configuration/heritation.rb:262:in

method\u missing'C:\Program Files（x86）\Scout\config\Gemfile:21:in

parse_string'org/jruby/RubyKernel.java:1088:in

eval'C:/Program Files（x86）/Scout/vendor/gems/gems/compass-0.12.2/lib/compass/configuration/serialization.rb:24:in`parse_string'C:/Program Files