用于定位变量ID名称的CSS

Question

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

幻灯片显示我想隐藏的cookie通知.问题是该id属性是随机的,除了第一个和最后一个字符(从末尾开始yui_和_32结束.Class是常量但使用它对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>

---

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

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

编辑:我应该提到我无法控制从中提供嵌入代码的服务器,并且上面的大部分内容都是在页面加载时动态生成的.我只能编辑我的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>

在这些选择更多信息这里,源W3C.

请记住,此通知来自外部源,它可以突然完全更改,使以前的选择器无用且需要更新.

编辑:

JS方法

这需要jQuery库.

您有两种选择:

1. 手动创建一个jQuery Multiple选择器并使用remove().
2. 使用函数为您完成.

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>

参数:

1. att- (type:string)要匹配的属性.
2. beginsWith- (type:string)属性值的值.
3. endsWith- (type:string)属性值结束的值.
4. bContains- (type:boolean) 如果为true,则通过创建新的选择*器对两个变量beginsWith和endsWith变量使用子字符串匹配属性选择器(它不替换它们,它会添加新的选择器).
5. bCaseInsensitive- (type:boolean)如果为true,则添加新的选择器,但使用不区分大小写的标志i.
6. bBeginsAndEndsWith- (type:boolean)如果为true,则为堆栈属性选择器.(如果bCaseInsensitive为true,则会添加另一个不区分大小写的堆叠选择器).

例:

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

的jsfiddle

笔记:

• 不区分大小写的CSS属性选择器是级别4,您可能需要在此处检查浏览器支持.它们包含在演示中以涵盖更多内容,但它们可能在某些浏览器中不起作用.这就是我们保持区分大小写的原因.