javascript - 使用javascript编写CSS特异性函数

Question

我需要编写一个 javascript 函数，它比较传入的两个参数。它们将是字符串。并代表 CSS 类。

该函数的目的是加权 CSS 特异性。因此，如果传入的参数是 CSS ID，则应该返回它而不是第二个参数。（例如，如果 a = '#id'，它将击败 b = '.red'）。

有点迷失在我的 javascript 函数的最佳方法上。不确定是使用 if/else 语句还是 switch/case。无论哪种方式，它都会变得混乱，需要一些指示。

这是我正在尝试做的事情：

• 比较参数 a 和 b，它们都是字符串。
• 如果输入的 css 类是一个 id，（例如，'#id'），这将胜过所有其他 css 类。所以返回这个。
• 如果 css 类是标记名，则 ID 仍然胜过此操作。所以返回ID。
• 如果输入了“*”，则这没有特异性，因此任何其他类都可以击败它。

• 类选择器胜过标记名。（例如 div.red > p）。

  // '*' weakest - anything beats this
  // tagname beats '*'. EG 'div' beats '*'
  // 2 tagnames beats 1 tagname - EG 'div div' beats 'p'
  // class selector beats tagname - EG 'div.red' beats 'div'
  // id is strongest #id - '#ID' beats all the above
  
  
  function compare(a,b){
  
    const low = '*';
    const tagname = /^[a-zA-Z]+$/;
    const twoTagnames = /^[a-zA-Z\s]*$/;
  
  
    if (a === low) {
      a < b;
      return b;
    } else (b === low); {
      b < a;
      return a;
    }
  
    if (a.includes('#')) {
      a < b;
      return b;
   } else if (b.includes('#')) {
      b < a;
     return a;
   }
  
  }
  
  compare('*','#id');
  

标签： javascriptcss-selectorsstring-comparisoncss-specificity

Answer 1

我最近在一次求职面试中遇到了这个确切的问题，我能够像这样弄清楚：

function compare(a, b) {
  let aItems = a.split([" "]);
  let aRating = [0, 0, 0];

  aItems.forEach((i) => {
    if (i.split("#").length > 1) {
      aRating[0] = aRating[0] + (i.split("#").length - 1);
    }

    if (i.split(".").length > 1) {
      aRating[1] = aRating[1] + (i.split(".").length - 1);
    }

    if (!i.startsWith("#") && !i.startsWith(".")) {
      aRating[2] = aRating[2] + 1;
    }
  });

  let bItems = b.split([" "]);
  let bRating = [0, 0, 0];

  bItems.forEach((i) => {
    if (i.split("#").length > 1) {
      bRating[0] = bRating[0] + (i.split("#").length - 1);
    }

    if (i.split(".").length > 1) {
      bRating[1] = bRating[1] + (i.split(".").length - 1);
    }

    if (!i.startsWith("#") && !i.startsWith(".")) {
      bRating[2] = bRating[2] + 1;
    }
  });

  if (aRating[0] > bRating[0]) {
    return a;
  } else if (bRating[0] > aRating[0]) {
    return b;
  }

  if (aRating[1] > bRating[1]) {
    return a;
  } else if (bRating[1] > aRating[1]) {
    return b;
  } else if (
    bRating[0] === aRating[0] &&
    bRating[2] === 0 &&
    aRating[2] === 0
  ) {
    return b;
  }

  if (aRating[2] > bRating[2]) {
    return a;
  } else if (bRating[2] > aRating[2]) {
    return b;
  }
}

但是有一个问题，假设您正在比较tagnames（即，html越body具体，特异性越高），那么您可能会遇到一些困难。我能够通过一系列 if else 测试破解我的方式。