这里有几种灵活的方法，适配不同的场景需求：

1. 利用数据属性做批量样式控制 #

如果你的子节点有区分度（比如属于某个分类），可以给它们添加自定义数据属性，然后在样式配置里针对性设置：

首先，给目标子节点添加数据属性（可以初始化时加，也可以动态修改）：

// 给单个节点加属性
cy.nodes('[id="child1"]').data('type', 'special');
// 给多个节点批量加属性
cy.nodes('[id="child2"], [id="child3"]').data('type', 'special');

然后把这个规则加到你的样式配置数组里，它会自动覆盖默认的节点背景色：

[
  {
    "selector": "node",
    "css": {
      "shape": "roundrectangle",
      "height": "40px",
      "background-color": "#58D68D",
      "label": "data(id)",
      "text-valign": "center",
      "border-width": "2",
      "border-color": "black"
    }
  },
  {
    "selector": ":parent",
    "css": {
      "background-opacity": "0.333",
      "text-halign": "center",
      "text-valign": "top"
    }
  },
  // 新增：匹配带有type=special属性的节点
  {
    "selector": "node[type='special']",
    "css": {
      "background-color": "#FBFBFB"
    }
  }
]

2. 直接通过ID批量修改 #

如果你明确知道要修改的子节点ID，直接用逗号分隔多个ID选择器就行，不用改样式配置：

// 一次性给多个子节点设置背景色
cy.nodes('[id="child1"], [id="child3"], [id="child5"]').style('background-color', '#FBFBFB');

3. 基于父节点关联筛选修改 #

如果要针对某个父节点下的子节点操作，可以用父子选择器精准定位：

// 修改父节点parent1下的所有子节点
cy.nodes('#parent1 > node').style('background-color', '#FBFBFB');

// 只修改父节点parent1下的特定子节点child2
cy.nodes('#parent1 > [id="child2"]').style('background-color', '#FBFBFB');

4. 使用类选择器（更灵活的分组方式） #

和DOM操作类似，你也可以给节点添加类，然后通过类选择器设置样式：

// 给目标节点添加类
cy.nodes('[id="start"]').addClass('custom-bg');

然后在样式配置里添加类选择器规则：

{
  "selector": "node.custom-bg",
  "css": {
    "background-color": "#FBFBFB"
  }
}

注意事项 #

Cytoscape的样式优先级是更具体的选择器 > 通用选择器，所以这些自定义规则会自动覆盖你原来设置的node通用背景色，不用担心父节点的样式影响子节点哦～

内容的提问来源于stack exchange，提问作者Ahmed