Question

此jQuery函数为每个元素分配from models import Person for person in Person.objects.all(): person.name = "%s %s" % (person.first_name, person.last_name) person.save()的内联样式，类为opacity:0.25。如何覆盖它并将grid-item的CSS添加到opacity:1内的HTML元素title？

这是为具有grid-item类的所选项目指定不透明度.25的内联样式的函数。它是过滤所选项目的较大同位素功能的一部分。

grid-item

这是导致的HTML：

// change opacity for selected/unselected items
  var selectedClass = '.' + selectedCategory;
  $items.filter(selectedClass).css({
    opacity: 1
  });
  $items.not(selectedClass).css({
    opacity: 0.25
  });

如何将<div class="grid-item" style="opacity: 0.25;"> <div class="title"> </div> </div>的CSS添加到opacity:1元素？内联或样式表？

从概念上讲，这就是我需要做的事情：

title

我的问题是如何将其添加到上面的函数中？或者有更好的方法吗？

只需在样式表中尝试$items.not(selectedClass) $('.title').css('opacity',''1');

!important

不起作用。

修改

除非您在父级上使用.grid-item .title { opacity: 1 !important; }，否则您无法更改子元素Disable opacity on child element when parent element has opacity的不透明度。但是在函数中尝试background: rgba(255,255,255,0.8)而不是background: rgba(255,255,255,0.8)会破坏它。我该怎么做？：

opacity: 1

Answer 1

内联css比外部样式表具有更高的优先级，因此您必须使用js这样做：

$('.title').css({
    opacity: 1
});

对于背景不透明度，请将其包装为引号：

$items.filter(selectedClass).css({
    background: 'rgba(255,255,255,0.8)'
});

Answer 2

以及...

你无法覆盖＆＃34;不透明度＆＃34;在css定义的嵌套元素中，但您可以通过简单地使用.find方法为其他嵌套元素提供不透明度。

$items.not(selectedClass).find('*').not('.title').css('opacity','0.25');

如果元素下只有一个维度，则可以使用。儿童代替增加时间。

$items.not(selectedClass).children().not('.title').css('opacity','0.25');

Answer 3

当你的.title元素位于不透明度为0.25的div中，因此其自身的不透明度为0.25时，此元素的实际不透明度为0.25 * 0.25 = 0.0625。如果将.title的不透明度设置为1.0，则它的实际不透明度为0.25。

此代码为真：

.grid-item .title {
  opacity: 1 !important;
}

它覆盖了内联jquery添加的样式，但由于我说的原因，它不是你想要的。

并更新您的代码：

 var selectedClass = '.' + selectedCategory;
  $items.filter(selectedClass).css({
  background: rgba(255,255,255,0.8)  //breaks
  });
  $items.not(selectedClass).css({
    opacity: 0.25
  });

到此：

 var selectedClass = '.' + selectedCategory;
  $items.filter(selectedClass).css({
  background: 'rgba(255,255,255,0.8)'  //breaks
  });
  $items.not(selectedClass).css({
    opacity: '0.25'
  });

在var函数中覆盖由jQuery添加的内联样式

3 个答案: