<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         color: red;
      }
   </style>
</head>
<body>
   <p>This text will be red.</p>
</body> 
</html>

示例

CSS规则中的p是选择器。 CSS 选择器可能比元素的标签名称复杂得多。它们可用于根据元素的类、ID、属性值等来选择元素。例如 -

<!DOCTYPE html>
<html>
<head>
   <style>
      #main-header {
         background-color: blue;
      }
   </style>
</head>
<body>
   <header id="main-header">
      <h1>My website</h1>
   </header>
   <!-- other content here -->
</body>
</html>

此 CSS 规则选择 ID 为“main-header”的元素，并向其应用“backgroundcolor: blue”样式。

创建generateSelector函数

介绍了 CSS 选择器的概念（CSS 选择器是一种识别和定位网页中特定元素以实现样式设计的方法），我们现在可以继续创建generateSelector 函数。该函数将接受 DOM（文档对象模型）元素作为输入，作为回报，它将提供该特定元素的 CSS 选择器路径。

语法

function generateSelector(element) {
   let selectors = [];
}

首先，我们将启动一个称为“选择器”的空数组。该数组将充当我们在遍历和检查其祖先元素时为给定 DOM 元素生成的选择器的容器。

语法

while (element) {
   let selector = '';
   if (element.tagName === 'HTML') {
      selector = 'html';
   }
}

当我们迭代每个祖先时，我们将为它生成一个选择器。我们首先检查该元素是否为 <html> 元素。如果是，我们将把字符串“html”添加到选择器变量

对于所有其他元素，我们将检查该元素是否有 ID。如果是，我们将使用 ID 作为选择器。如果没有，我们将使用元素的标签名称及其类名称作为选择器。

语法

else {
   if (element.id) {
      selector = '//m.sbmmt.com/m/faq/#' + element.id;
   } else {
      selector = element.tagName.toLowerCase();
      if (element.className) {
         selector += '.' + element.className.replace(/\s+/g, '.');
      }
   }
}

生成选择器后，我们将其添加到选择器数组中，并通过将 element 设置为等于 element.parentNode 来移动到下一个祖先。

语法

selectors.unshift(selector);{
   element = element.parentNode;
}

最后，我们将使用 join() 方法连接选择器数组中的所有选择器，并将生成的 CSS 选择器路径作为字符串返回。

语法

return selectors.join(' > ');{
}

使用generateSelector函数

现在我们已经实现了generateSelector函数，让我们看看如何在实践中使用它。

例如，假设您有以下 HTML -

<!DOCTYPE html>
<html>
<body>
   <div id="myDiv">
      <p>Hello World</p>
   </div>
   <div id="result"></div>
   <script>
      function generateSelector(element) {
         let selectors = [];
         while (element) {
            let selector = '';
            if (element.id) {
               selector = '//m.sbmmt.com/m/faq/#' + element.id;
            } else {
               selector = element.tagName;
            }
            selectors.unshift(selector);
            element = element.parentNode;
         }
         return selectors.join(' > ');
      }
   </script>
   <script>
      window.onload = function(){
         
         // Select the <p> element and get its CSS selector path
         const p = document.querySelector("p");
         if(p!==null){
            const selector = generateSelector(p);
            document.getElementById("result").innerHTML = selector;
         }
         else{
            console.log("Error : Element not found");
         }
      }
   </script>
</body>
</html>

需要注意的是，这只是一个示例，选择器将根据您传递给函数的元素和 HTML 结构而有所不同。

以上就是如何创建一个函数 `generateSelector` 来生成 DOM 元素的 CSS 选择器路径？的详细内容，更多请关注php中文网其它相关文章！