CSS通配符选择

时间:2018-10-08 11:33:25

标签: javascript css regex

我在CSS中使用此通配符来选择包含“,”逗号的数据。

td[data-content*=","]{
  background-color: yellow;
}

是否有一种方法可以区分数据中的","的数量。我可以用黄色突出显示包含一个逗号的数据。我想用绿色突出显示包含两个逗号的数据。有没有办法用CSS做到这一点?谢谢。

我想根据包含的逗号数据的数量同时使用不同的颜色。因此,(1,2)之类的数据将为黄色。并且(1,2,3)之类的数据将变为绿色。

3 个答案:

答案 0 :(得分:3)

这是一个jQuery解决方案:

$('td').each(function() {
  var c = $(this).text();
  if (!c) return;
  var commas = c.split(",").length - 1;
  if (commas === 1) $(this).css("background-color", "yellow");
  if (commas === 2) $(this).css("background-color", "green");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>a</td>
      <td>a,b</td>
      <td>a,b,c</td>
    </tr>
  </tbody>
</table>

应该很不言自明:

  1. td s
  2. 读取data-content属性并计算逗号
  3. 设置样式

答案 1 :(得分:1)

您不能在纯CSS中执行此操作。 CSS属性选择器仅允许文字匹配,而不允许通配符/ glob / regexp匹配

有关定义,请参见此处:https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

我已经制作了VanillaJS解决方案。通过这种方式,我计算了data-content属性中的逗号匹配项,并根据匹配项的数量添加了一个具有不同值的新data-content-classification属性。

console.clear()

// Start after loading of the document
window.addEventListener('load', function() {
  // get all the table cells with data-content attribute
  var tdContents = document.querySelectorAll('td[data-content]');
  // loop over those cells
  for (var i = 0; i < tdContents.length; i++) {
    // anonymous function which gets a single table cell element as argument
    ;(function(el) {
      // get the attribute's value
      var dc = el.getAttribute('data-content')
      // react according to the length of the comma matches (with fallback to prevent error)
      switch ((dc.match(/,/g) || []).length) {
        case 0:
          // if no comma found
          el.setAttribute('data-content-classification', 0);
          break;
        case 1:
          // if one comma found
          el.setAttribute('data-content-classification', 1);
          break;
        default: 
          // default, meaning more than one comma
          el.setAttribute('data-content-classification', 2);
      }
     })(tdContents[i]);
  }
})
@charset "UTF-8";
td[data-content-classification="1"] {
  background-color: yellow;
}

td[data-content-classification="2"] {
  background-color: red;
}

td:after,
td:before {
  order: -2;
  content: "data-content: " attr(data-content);
  background-color: goldenrod;
  min-width: 50px;
  display: inline-block;
  margin: 2px;
  padding: 2px;
  margin-right: 10px;
}


td:after {
  order: -1;
  content: "data-content-classifiction: " attr(data-content-classification) " ";
}

td {
  padding: 3px;
  display: flex;
  width: 100%;
}
<table>
  <tr>
    <td>Lorem, ipsum dolor.</td>
  </tr>
  <tr>
    <td data-content="1">Lorem, ipsum dolor.</td>
  </tr>
  <tr>
    <td data-content="1,2">Lorem, ipsum dolor.</td>
  </tr>
  <tr>
    <td data-content="2,3">Eveniet, sunt reiciendis.</td>
  </tr>
  <tr>
    <td data-content="1,2,3">Accusantium, quam impedit.</td>
  </tr>
  <tr>
    <td data-content="1,2,3,5">Accusantium, quam impedit.</td>
  </tr>
</table>

答案 2 :(得分:1)

请注意,此答案包含jQuery表示法,因此需要使用jQuery库。

您可以做的是遍历所有data-content的{​​{1}},就像您最初想要使用通配符选择器一样。

然后您可以使用,来获取自定义属性的内容。

然后可以使用该字符串,并使用$(this).attr()将其转换为数组。之后,您要计算数组的长度。记住要减去1,因为数组从0开始计数。

然后您检查逗号的情况,并使用.split()函数设置CSS逻辑。

示例:

css()
function testing() {
    $('[data-content*=","]').each(function() {
        var myAttr=$(this).attr('data-content');
        var myArr=myAttr.split(",");
        var countCommas=myArr.length - 1;
        var yellow=1;
        var green=2;
	if(countCommas == yellow) {
	    $(this).css("background-color", "yellow");
	}
	else if(countCommas == green) {
	    $(this).css("background-color", "green");
	}
    });
}

您无需通过单击按钮来触发功能,我只是出于测试目的添加了此功能,以便您可以看到效果。

如果要使其自动运行,只需将其放在<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td data-content="1,2"> 1,2 </td> </tr> <tr> <td data-content="1,2,3"> 1,2,3 </td> </tr> <tr> <td> No color </td> </tr> </table> <br /> <button onclick="testing();">Test</button>块中即可。

示例:

document.ready
$(document).ready(function() {
    $('[data-content*=","]').each(function() {
        var myAttr=$(this).attr('data-content');
        var myArr=myAttr.split(",");
        var countCommas=myArr.length - 1;
        var yellow=1;
        var green=2;
	if(countCommas == yellow) {
	    $(this).css("background-color", "yellow");
	}
	else if(countCommas == green) {
	    $(this).css("background-color", "green");
	}
    });
});