问题描述

关于用jquery 修改CSS

有CSS代码如下

path[data-classbreak="classbreak0"] {
    stroke: rgb(255, 245, 220);
            stroke-width: 1pt;
        stroke-opacity: 0.35;
            fill:   #00008B;
            fill-opacity: 0.8;
        }

        path[data-classbreak="classbreak1"] {
        stroke: rgb(255 ,140 ,0);
        stroke-width: 1pt;
        stroke-opacity: 0.35;
            fill: #1E90FF;
            fill-opacity: 0.8;
        }

        path[data-classbreak="classbreak3"] {
        stroke: rgb(255, 245, 220);
            stroke-width: 1pt;
        stroke-opacity: 0.35;
            fill:   #00008B;
            fill-opacity: 0.8;
        }

            现在需要在一个回调函数中用jquery动态地修改特定类别的属性值，但是不知道如何选中该类别，比如如何修改 path[data-classbreak="classbreak3"]中的fill属性？
            另外，这个CSS复制于其它地方，求问 path[data-classbreak="classbreak3"]这种写法中，data-classbreak应该是个属性名，classbreak3是个属性值，那么外面的path[]是什么意思？   谢谢！

解决方案

其实在所有样式中，能够作用于一个元素上的样式的相同属性，最终只有排在最后的一个有效。而在没有规定重要级别的情况下，
内联样式将是最终作用的，就是传说中写在元素style属性内部的css样式。
你可以尝试下面的方案，通过jquery去获取相应的元素，从而改变它的指定属性，如你所说的fill.

 $(".class名称[元素属性='属性值']").css("样式属性", "样式属性值");
 举例：
 $(".path[data-classbreak='classbreak3']").css("fill", "#CCC");

理解起来也很简单，包含有path class 并且元素属性data-classbreak值为classbreak3的元素。

解决方案二：

补充答案：
你最好还是要看一下node对象长什么样子，通过谷歌浏览器F12，就可以看生成的node具体什么样子的。
或者直接看你使用的这个插件，node结构，或者找API看都行。要知道一个成熟的插件，
是不需要自己写太多的代码去控制的，必然提供了某些设置属性的方法来实现效果的转换。
谷歌浏览器查看生成后的元素方法如下：