编辑：

Question

我正在使用WordPress并从我的Smugmug网站上播放幻灯片。

幻灯片显示我想隐藏的Cookie通知。问题是id属性是随机的，除了第一个和最后一个字符（从yui_开始，最后是_32。类是常量但使用它没有区别显示Cookie警告。还有一些动态加载的javascript也作为嵌入式幻灯片的一部分运行。我不知道这是否会影响本地CSS修改代码的能力。

HTML：

<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_32"> = $0
            “ FYI: This site uses cookies to make sure your visit is as awesome as possible.  “
           <a class"headermessagelink"="" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
      <div class="sm-eu-cookie-close">
      <button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
      <span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
      </button>
</div>
</div>

我花了好几个小时试图寻找答案但没有成功。

如何使用CSS隐藏整个<div>元素？

编辑：我应该提到我无法控制从中提供嵌入代码的服务器，并且上面的大部分内容都是在页面加载时动态生成的。我只能在我的Wordpress主题上编辑本地CSS，在我的Smugmug托管画廊上编辑主题CSS（但我认为这不会影响外部嵌入时显示的幻灯片）。如果您想查看呈现给用户的页面代码，该网站为https://light/touch.photography/。

Answer 1

CSS方法

如果Cookie通知的类别一致，您可以使用：

.sm-eu-cookie-message{
  display: none; /* If it is persistent, use the !important flag. */
}

或者，使用!important标志：

.sm-eu-cookie-message{
  display: none!important; 
}

如果类不一致但属性id值是，您可以使用^或$子字符串匹配属性选择器。

[attribute^=value] 选择属性以指定值开头的每个元素。
[attribute$=value] 选择属性以指定值结尾的每个元素。

[id^=yui_],
[id^=yui_ i] {  /* match attribute values case-insensitively */
  color: red;
  /*display: none;*/
}
[id$=_32] {
  color: blue;
  /*display: none;*/
}

<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute ends with <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yUI_</em>
</div>

为了覆盖更多内容，您还可以使用*子字符串匹配属性选择器。

[attribute*=value]选择属性中包含至少一个指定值实例的每个元素。

[id^=yui_],
[id^=yui_ i],  /* match attribute values case-insensitively */
[id*=yui_],
[id*=yui_ i]{  /* match attribute values case-insensitively */
  color: red;
  /*display: none;*/
}
[id$=_32],
[id*=_32]{
  color: blue;
  /*display: none;*/
}

<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute ends with <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yUI_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute containing an instance of <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yui_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yUI_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yUI_</em>
</div>

有关这些选择器的更多信息here，来源 W3C 。

请注意，此通知来自外部来源，并且它可以突然完全改变，使之前选择器没用，需要更新。

编辑：

JS方法

这需要jQuery库。

您有两种选择：

手动创建jQuery Multiple selector并使用remove()。
使用函数为您完成。

1）手动创建jQuery Multiple选择器：

$(document).ready(function() {

  $("[id^=yui_], [id$=_32], [id*=yui_], [id*=_32], [id^=yui_ i], [id$=_32 i], [id*=yui_ i], [id*=_32 i], [id^=yui_][id$=_32], [id^=yui_ i][id$=_32 i]").remove();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute ends with <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yUI_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute containing an instance of <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yui_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yUI_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yUI_</em>
</div>

<强> 2。使用函数为您完成。

$(document).ready(function() {

  // Summary: Removes an element from the DOM by substring matching attribute selectors.
  // Params: att, beginsWith, endsWith, bContains, bCaseInsensitive, bBeginsAndEndsWith
  function removeByAttSubstring(att, beginsWith, endsWith, bContains, bCaseInsensitive, bBeginsAndEndsWith) {

    // Assign string variables for each selector that we want to create
    var sBw = att + "^=" + beginsWith,
      sEw = att + "$=" + endsWith,
      sCbw = att + "*=" + beginsWith,
      sCew = att + "*=" + endsWith;

    // Create an array of the string selectors
    var aSelectors = [sBw, sEw, sCbw, sCew];

    // If boolean case insensitive equals true, add those strings as well
    if (bCaseInsensitive === true) {
      var sBwCi = att + "^=" + beginsWith + " i",
        sEwCi = att + "$=" + endsWith + " i",
        sCbwCi = att + "*=" + beginsWith + " i",
        sCewCi = att + "*=" + endsWith + " i";
      aSelectors.push(sBwCi, sEwCi, sCbwCi, sCewCi);
    }

    // If boolean stack attributes equals true, combine the strings
    if (bBeginsAndEndsWith === true) {
      var sBwaew = sBw + "][" + sEw;
      aSelectors.push(sBwaew);
    }

    // If booleans case insensitive and stack attributes equals true, combine the case insensitive strings 
    if (bCaseInsensitive === true && bBeginsAndEndsWith === true) {
      var sBwaewCi = sBw + " i][" + sEw + " i";
      aSelectors.push(sBwaewCi);
    }

    // For each string in the array, construct the attribute selector.
    for (var i = 0; i < aSelectors.length; i++) {
      aSelectors[i] = "[" + aSelectors[i] + "]";
    }
    // Format the jQuery Multiple Selector
    var sSelectors = aSelectors.join(", ");

    // Illustration purposes only
    console.log("Attribute Selectors: " + sSelectors);

    // Remove the elements, if matched, entirely from the DOM
    $(sSelectors).remove();

  }

  // Initialize function
  removeByAttSubstring("id", "yui_", "_32", true, true, true);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute ends with <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yUI_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute containing an instance of <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yui_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yUI_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yUI_</em>
</div>

<强>参数：

att - （type：string）您要匹配的属性。
beginsWith - （type：string）属性值的值。
endsWith - （type：string）属性值结束的值。
bContains - （type：boolean）如果为true，请对*和beginsWith变量使用endsWith子字符串匹配属性选择器创建新的选择器（它不会替换它们，它会添加新的选择器）。
bCaseInsensitive - （type：boolean）如果为true，请添加新的选择器，但使用不区分大小写的标记i。
bBeginsAndEndsWith - （type：boolean）如果为true，则为堆栈属性选择器。（如果bCaseInsensitive为真，则会添加另一个不区分大小写的堆叠选择器。）

示例：

removeByAttSubstring("id", "yui_", "_32", true, true, true);

jsFiddle

备注：

不区分大小写的CSS属性选择器是level 4，你可能需要检查浏览器支持 here 。他们是包含在演示中以涵盖更多内容，但它们可能无法正常工作一些浏览器。这也是我们保持区分大小写的原因。

Answer 2

简单明了：堆栈属性选择器。我还添加了!important指令，因为如果这个HTML来自插件，很可能已经有了CSS。使用!important会强制使用您的CSS，除非另一方使用!important更具体的选择器。如果他们用JavaScript覆盖CSS，你需要自己使用JS解决方案。

＆＃13;

div[id^="yui_"][id$="_32"] {
  display: none!important;
}

＆＃13;

<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478235091986_32">= $0 “ FYI: This site uses cookies to make sure your visit is as awesome as possible. “
  <a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
  <div class="sm-eu-cookie-close">
    <button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
      <span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
    </button>
  </div>
</div>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_14782349638956_32">= $0 “ FYI: This site uses cookies to make sure your visit is as awesome as possible. “
  <a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
  <div class="sm-eu-cookie-close">
    <button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
      <span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
    </button>
  </div>
</div>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_147834534532_32">= $0 “ FYI: This site uses cookies to make sure your visit is as awesome as possible. “
  <a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
  <div class="sm-eu-cookie-close">
    <button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
      <span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
    </button>
  </div>
</div>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_147834534532_33">NOT HIDDEN
  <a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
  <div class="sm-eu-cookie-close">
    <button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
      <span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
    </button>
  </div>
</div>

＆＃13;

用于定位变量ID名称的CSS

2 个答案:

CSS方法

编辑：

JS方法

jsFiddle