Html Css类只有在前面添加一个随机数字时才有效

当我把我的样式标签重构成一个单独的CSS文件时，我遇到了一些奇怪的CSS行为。这是我的HTML；“parentOfViewCommentsLink”是一个行为奇怪的特定类

            <div class="parentOfViewCommentsLink" style="height=20%">
                <span ng-show="image.description">{{ image.description }}  </span>
                <div ng-hide="image.description" class="noDescription">No Description Found</div>
                <!-- <div data-ng-click="vm.navToComments()">Comments</div> -->
                <div class="viewCommentsLink" ng-click="vm.viewComments()">View {{image.comments.length}} Comments</div>
                <div class="{{vm.flagClass}}" ng-click="vm.flagged()"> </div>
                <!--<div class="ion-archive" ng-click="vm.downloadMoment(image)"> </div>-->
            </div>

这个HTML/CSS产生了这个奇怪的结果：

我对这种奇怪的行为感到惊讶，因为它刚刚起作用——我所做的就是将我的样式标签提取到CSS文件中。在玩了它之后，我终于把它修好了

你会怎么问？我在类名前加了个“2”：

<div class="2parentViewCommentsLink" style="height=20%">
                <span ng-show="image.description">{{ image.description }}  </span>
                <div ng-hide="image.description" class="noDescription">No Description Found</div>
                <!-- <div data-ng-click="vm.navToComments()">Comments</div> -->
                <div class="viewCommentsLink" ng-click="vm.viewComments()">View {{image.comments.length}} Comments</div>
                <div class="{{vm.flagClass}}" ng-click="vm.flagged()"> </div>
                <!--<div class="ion-archive" ng-click="vm.downloadMoment(image)"> </div>-->
            </div>

我不知道这为什么有效，也不知道它为什么会起作用。我没有另一个类名parentOfViewCommentsLink，在这一点上，我只是想知道为什么它会起作用。有人有什么想法吗

---

编辑：“我还尝试了“parentViewCommentsLink”、“ViewCommentsLink Parent”等有效的方法，我们得到的信息太少，无法给您提供准确的答案

很可能有其他规则应用于元素。 检查元素并查找css规则

所有现代浏览器都配有开发工具。右键单击元素并选择inspect，将弹出一个窗口，帮助您调试css问题。

---

一旦你知道它为什么会这样显示，你就可以去寻找相关的规则。它们可能在其他文件中，并且由于导入顺序而被覆盖。

事实证明，我根本不需要parentViewCommentsLink。事实上，这个类导致了这个问题

另外，如果你在CSS类前面添加一个数字，它就无效了。因此，由于我在CSS类前面添加了一个数字，它就无效了，因为我根本不需要这个类

不加一个数字使这个类有效，这破坏了它。它弊大于利

---

奇怪的情况。感谢您的帮助。无规则。

请使用文本而不是图像。我猜parentOfViewCommentsLink在其他地方有不同的样式，这导致了这种行为。因此，当您使用完全不同的css类时，问题是间接解决的。可能不相关，但

style=30px

应该是

style：30px

删除

position:relative；

也可能解决此问题。您在问题文本中提到了

parentofviewscommentslink

（就在第一段代码之前）而且，在HTML片段中，

元素的class属性设置为：

parentViewCommentsLink

在其中一个字符串中似乎缺少或多余的

。请查看以下答案：。它正确地解释了类名开头的数字的有效性和无效性。大约是to询问如果您在CSS文件（
\2parentViewCommentsLink{…
）中转义了数字会发生什么情况。您可以使用数字（或者，如果您转义类名中的任何其他字符，则实际上是它们。@steveax Ehm，no.
\2…
与以2开头的类不匹配。如果要在开头匹配2，则应编写
\32…
<div class="2parentViewCommentsLink" style="height=20%">
                <span ng-show="image.description">{{ image.description }}  </span>
                <div ng-hide="image.description" class="noDescription">No Description Found</div>
                <!-- <div data-ng-click="vm.navToComments()">Comments</div> -->
                <div class="viewCommentsLink" ng-click="vm.viewComments()">View {{image.comments.length}} Comments</div>
                <div class="{{vm.flagClass}}" ng-click="vm.flagged()"> </div>
                <!--<div class="ion-archive" ng-click="vm.downloadMoment(image)"> </div>-->
            </div>

/* Comments */
.viewCommentsLink {
  position: absolute; 
  bottom: 10px;
  left: 10px;  
}

.2parentViewCommentsLink {
  position: relative;
}