Question

向下滚动页面时。我正在尝试添加一个类＆＃34; sticky_logo＆＃34;到了div。

<!doctype html>
<html>
    <head>
        <title>Serialize Test</title>
        <script src="js/angular.min.js"></script>
        <script>
			var app = angular.module('myApp', []);
			app.controller('myCtrl', function($scope, $http) {
				$scope.addnew = function(){
					$http.put('/newthing.json', JSON.stringify($scope.item))
						.success(function(){
						})
						.error(function(){
						});
				};
			});
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
		<label for="name">Name:</label>
		<input type="text" id="name" ng-model="item.name" required>
		<label for="optionalval">Don't put anything here:</label>
		<input type="text" id="optoinalval" ng-model="item.optionalval">

		<button ng-click="addnew()">Serialize</button>
    </body>
</html>

它有效，当我向下滚动时，类被添加，但类的特征＆＃34; sticky-logo＆＃34;不工作，但＆＃34; fixed_logo＆＃34;的CSS。还在工作。如何在不删除id的情况下激活类的CSS。

removeAttr for id isn是一个非常好的主意，因为它会更加复杂。

这是jsfiddle：http://jsfiddle.net/alex111kira/ard0gnfu/

Answer 1

id的CSS规则比类更具体，因此它是应用的。将另一个类添加到徽标元素中，该元素将保存＆＃34; normal＆＃34;样式化，然后使用.new_class.sticky_logo作为粘性状态的CSS规则。

Answer 2

ID选择器在css规则排名中的特异性高于类选择器。

如果ID选择器设置的css超过了类选择器，只需将它们组合在css中：

#fixed_logo{
   /* rules */
}

#fixed_logo.sticky_logo{
   /* these rules will have higher rank */
}

第二个选择器更具体，并将覆盖第一个

中设置的规则

addClass（），添加了类，但CSS不起作用

2 个答案: