【问题标题】:CSS for targeting variable id name用于定位变量 ID 名称的 CSS
【发布时间】:2017-03-24 00:34:03
【问题描述】:

我正在使用 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 隐藏整个 &lt;div&gt; 元素?

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

【问题讨论】:

  • 为什么不选择 div 的类(我假设它是一致的并且不与任何东西共享)而不是它的 ID? .sm-eu-cookie-message {display: none;}
  • 谢谢。我已经从 wordpress CSS 和 Smugmug CSS 中按类尝试过,但没有区别。我假设,由于幻灯片作为嵌入代码运行,CSS 更改需要在 Wordpress 端进行,但我尝试了两者,以防万一。

标签: html wordpress css


【解决方案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 库。

你有两个选择:

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

1) 手动创建一个jQuery Multiple selector:

$(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) 如果为真,则通过创建新的选择器为beginsWithendsWith 变量使用* 子字符串匹配属性选择器(它不会替换它们,它添加新的)。
  5. bCaseInsensitive - (type: boolean) 如果为真,则添加新的选择器,但使用不区分大小写的标志 i
  6. bBeginsAndEndsWith - (type: boolean) 如果为真,则堆栈属性选择器。 (如果bCaseInsensitive 为真,它会添加另一个不区分大小写的堆叠选择器)。

示例:

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

jsFiddle


注意事项:

  • 不区分大小写的 CSS 属性选择器是 level 4,你 可能要检查浏览器支持 here。他们是 包含在演示中以涵盖更多内容,但它们可能不适用于 一些浏览器。这也是我们保留区分大小写的原因。

【讨论】:

  • 哇,写这个看起来需要做很多工作,谢谢。但是,我不确定如何在网站上实现它,即在 Wordpress 中去哪里以及如何实现它。由于嵌入式幻灯片的代码是从远程源调用的(所有代码以及我在原始问题中复制的更多代码),我想第二个选项将是尝试的选项,但我不明白哪个位在页面中的哪个位置。
  • @Rick JS 方法需要包含在 Javascript 文件中(extension .js),并且应该在 jQuery 之后引用库...创建一个新的 JS 文件,将我的答案的 javascript 部分粘贴到那里,然后使用 &lt;script&gt; 标记在您的 HTML 文件中引用它,将其放在 &lt;script&gt; 标记引用的其余部分下方。
  • 优秀。再一次感谢你。我明天试试:-)
  • 我尝试通过插件(CSS 和 Javascript 工具箱)添加 javascript,但无法正常工作。该代码显示在页面源上,但不会删除 cookie 警告。此外,“检查元素”窗口会显示“$ 不是函数。(在 '$(document)' 中,'$' 未定义)”的警告。
  • jQuery 根本没有被引用,或者它没有被引用之前你的javascript文件。
【解决方案2】:

又好又简单:堆栈属性选择器。我还添加了!important 指令,因为如果此 HTML 来自插件,则很可能已经有可用的 CSS。使用!important,你强制使用你的CSS,除非对方使用更具体的选择器!important。如果他们用 JavaScript 覆盖 CSS,你需要自己求助于 JS 解决方案。

div[id^="yui_"][id$="_32"] {
  display: none!important;
}
<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>

【讨论】:

  • 谢谢。我已经尝试过 CSS,但 html 是在页面加载时动态编写的。看来样式确实是用javascript编写的。由于我对javascript一无所知,我想我只能认输:-(
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-03-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-04-02
相关资源
最近更新 更多