Question

当我将样式标记重构为单独的CSS文件时，我遇到了一些奇怪的CSS行为。这是我的HTML; ＆＃34; parentOfViewCommentsLink＆＃34;是特定阶级的表现奇怪。

            <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>

和我的CSS：

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

.parentViewCommentsLink {
  position: relative;
}

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

抓住这个奇怪的行为，因为它只是起作用 - 我所做的就是将我的样式标签提取到CSS文件中。玩完之后我就能解决它了！

你怎么会问？好吧，我扔了一个＆＃39; 2＆＃39;在班级名称前面：

<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>

CSS：

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

.2parentViewCommentsLink {
  position: relative;
}

我不知道为什么会这样，或者为什么它会产生影响。我在任何地方都没有其他类名parentOfViewCommentsLink，在这一点上我只是好奇为什么这甚至有用。有人有什么想法吗？

编辑：＆＃34;我还尝试了＃34; parentViewCommentsLink＆＃34;，＆＃34; viewCommentsLinkParent＆＃34;其中有效的

Answer 1

事实证明，我根本不需要parentViewCommentsLink。事实上，HAVING这个类正在引发这个问题。

此外，如果在CSS类前面添加一个数字，它将变为无效。所以，因为我在CSS类前面放了一个数字，它变得无效，它起作用，因为我甚至都不需要这个类。

并没有添加一个数字使该类有效而破坏了它。弊大于利。

Bizzare情况。非常感谢您的帮助。

Answer 2

我们的信息太少，无法为您提供准确的答案。

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

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

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

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

2 个答案: