Question

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

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

Kinda迷失了我的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');

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 测试字符串。

使用JavaScript编写CSS特定功能

1 个答案: