Question

无法理解以下选择器的用法。虽然这个选择器是没有显示在inpect元素

中

css code for my file


#header .navbar-brand [class*="icon"] {
background-color: #649300;
font-size: 30px;
color: #ffffff;
border-radius: 100%;
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
position: relative;
left: -4px;
padding: 0;
top: auto;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}

Answer 1

该选择器正在寻找一个包含单词“icon”的类的元素。它是一个属性通配符选择器。

因此，例如，会选择任何类似的东西。

class="icon-blue"
class="roundicon"

您还可以使用其他方法使用^, $

执行此类检查

所以带^的CSS看起来像这样：

   [class^="icon"] {
    /* THIS SELECTS ANYTHING THAT BEGINS WITH ICON */
   }

这会选择这种类：

class="icon-blue"
class="icon-green"
class="iconbluegreen"

然后选择器中的美元符号$将如下所示：

   [class$="icon"] {
    /* THIS SELECTS ANYTHING THAT ENDS WITH ICON */
    }

并选择这种类：

class="blue-icon"
class="green-icon"
class="bluegreenicon"

Answer 2

它正在寻找#header内.navbar品牌中包含“.icon”的html元素。

Answer 3

这就像id-＆gt;标题，在类中包含class-＆gt; navbar-brand所有图标类

以下代码中使用的css语法有什么用？

3 个答案: