如何将css应用于div模式

3 回答

• 1

  SOLUTION AT BOTTOM

  ---

  ---

  假设这些是 ids ，您可以像这样选择 all ：

  [id^="edit-text-field-"] {
      /* YOUR CSS */
  }
  

  这将选择 edit-text-field-11 ， edit-text-field-12 ， edit-text-field-12-23 等 .

  要使用 partial selector 更多 specific ，您可以将12添加到结尾等，例如 .

  [id^="edit-text-field-12"] {
      /* YOUR CSS */
  }
  

  这将选择 edit-text-field-12 ， edit-text-field-12-23 ，但不是 edit-text-field-11 .

  对于 individual ids，语法如下：

  #edit-text-field-12 {
      /* YOUR CSS */
  }
  

  有关进一步阅读，请参阅W3Schools CSS Selectors，它解释了所有可用的CSS选择器 .

  ---

  ---

  在 response 中编辑问题：

  #edit-text-field-12 {
      /* YOUR CSS for the first bit */
  }
  [id^="edit-text-field-12-"] {
      /* YOUR CSS for the other bits */
  }
  

  将12替换为第二组等的17 .

  你不能选择12是任何数字的部分，因为CSS中有 no wildcard 值（例如 edit-text-field-*- ），所以你'll have to repeat the above, you can use commas so you don' t repeat the styles .

  #edit-text-field-12,
  #edit-text-field-17 {
      /* YOUR CSS for the first bit */
  }
  [id^="edit-text-field-12-"],
  [id^="edit-text-field-17-"] {
      /* YOUR CSS for the other bits */
  }
  

  ---

  ---

  solution 为此，因为 inputs 有 values ，是使用这些值来检测它们是哪种类型 .

  这样做，你可以选择这样的一切：

  [id^="edit-text-field-"]:not([value*="-"]) {
      /* YOUR CSS for the first bit */
      background: #f44336;
  }
  [id^="edit-text-field-"][value*="-"] {
      /* YOUR CSS for the other bits */
      background: #1976d2;
  }
  

  回复于 2024-05-06T14:29:23+08:00
• 3

  你使用partial selector如下 .

  div[class^="edit-text-field-"] {
  
  }
  

  EDIT: Jquery解决方案

  由于你没有清楚地提到你是否试图改变div或输入元素的背景颜色，我假设你想要将每个输入包装在div中并为它们着色 .

  以下是示例代码段 .

  关键点 .

  1. 我在所有输入上使用了filter()来使用 regex 过滤掉单个数字id 's and double digit id'

  ^edit-text-field-\d+$ - >确保选择id为 edit-text-field-12 ， edit-text-field-17

  ^edit-text-field-\d+-\d+$ - >确保选择id为 edit-text-field-12-23 ， edit-text-field-17-21 等 .

  2. 一旦元素被过滤，我使用 wrap 用div和适当的类名包装它们以获得背景颜色 .

  希望这有用 .

  var singleNumberPatternElements = [];
  var doubleNumberPatternElements = [];
  
  $('input').filter(function(){
   return this.id.match(/^edit-text-field-\d+$/g);
  }).wrap('<div class="singleNumber"/>');
  
  $('input').filter(function(){
   return this.id.match(/^edit-text-field-\d+-\d+$/g);
  }).wrap('<div class="doubleNumber"/>');
  

  .singleNumber{
  background-color:blue; 
  }
  
  .doubleNumber{
    background-color:Red; 
   }
  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
  <input type="checkbox" id="edit-text-field-12" value="12">
  <input type="checkbox" id="edit-text-field-12-23" value="12-23">
  <input type="checkbox" id="edit-text-field-12-46" value="12-46">
  <input type="checkbox" id="edit-text-field-12-39" value="12-39">
  
  <input type="checkbox" id="edit-text-field-17" value="17">
  <input type="checkbox" id="edit-text-field-17-21" value="17-21">
  <input type="checkbox" id="edit-text-field-17-34" value="17-34">
  

  回复于 2024-05-06T14:29:23+08:00
• 0

  使用CSS3部分选择器

  div[class^="edit-text-field-"]{
    width:100%;
    background-color: blue;
  }
  

  <div class="edit-text-field-12">abc</div>
  <div class="edit-text-field-12-23">def</div>
  

  回复于 2024-05-06T14:29:23+08:00