Question

我正在尝试将不同的css样式应用于多个divs。到目前为止我已经尝试了这个但没有运气：

CSS：

.barChart1.bar{fill:#000000}
.barChart1.bar:hover{fill:#ffffff}

.barChart2.bar{fill:#b6ff00}
.barChart2.bar{fill:#ffffff}

然后我尝试将这些应用于两个单独的divs，如下所示：

<div class="row">
    <div class"barChart1" id="barChartId1"></div>
</div>
<div class="row">
    <div class"barChart2" id="barChartId2"></div>
</div>

这不会使第一个div中的内容与第二个div中的内容呈现不同。这里有什么我想念的吗？我真的很新CSS如果这很容易就道歉。

谢谢，

注意：

下面的一条评论指出我使用的是SVG css属性并且它不正确。我实际上正在使用d3.js，我正在尝试将不同的CSS样式应用于同一页面上的多个图表。我希望通过将它们分配给保存对象的div，它将以适当的样式呈现其中的图表。

风格：

<style>
body {
    font: 10px sans-serif;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000000;
    shape-rendering: crispEdges;
}

.bar {
    fill: rgb(106, 164, 255);
}

    .bar:hover {
        fill: rgb(220,20,60);
    }

.x.axis path {
    display: none;
}
</style>

我希望将两种不同的颜色集应用于两个条形图，如下所示：

<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js">    </script>

<script>

var margin = {top: 40, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;


var formatPercent = d3.format(".0%");


var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);


var y = d3.scale.linear()
.range([height, 0]);


var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");


var yAxis = d3.svg.axis()
.scale(y)
.orient("left");


var barChart = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


var barData =
[{"name":"A","value":0.02951},{"name":"B","value":0.06686},{"name":"C","value":0.08855},{"name":"D","value":0.03061},{"name":"E","value":0.09295},{"name":"F","value":0.04163},{"name":"G","value":0.03507},{"name":"H","value":0.05032},{"name":"I","value":0.04914},{"name":"J","value":0.09186},{"name":"K","value":0.11872},{"name":"L","value":0.05006},{"name":"M","value":0.08107},{"name":"N","value":0.04226},{"name":"O","value":0.03275},{"name":"P","value":0.06763},{"name":"Q","value":0.03534},{"name":"R","value":0.07308},{"name":"S","value":0.11514}];


x.domain(barData.map(function (d) { return d.name; }));
y.domain([0, d3.max(barData, function (d) { return d.value; })]);


barChart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);


barChart.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");


barChart.selectAll(".bar")
.data(barData)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.name); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })


function type(d) {
d.value = +d.value;
return d; }


</script>
</body>

我将他们中的每一个都放入不同的DIV中。

Answer 1

首先，这种语法是错误的：

<div class"barChart1" id="barChartId1"></div>

应该是（观察类属性及其值之间的=符号）：

<div class="barChart1" id="barChartId1"></div>

其次，您需要使用background-color属性，因为它是HTML元素而不是SVG元素。

见以下工作：

＆＃13;

.barChart1 {
    background-color:#000000;
    height: 30px;
}
.barChart1:hover {
    background-color:green;
}
.barChart2 {
    background-color:orange;
    height: 30px;
}
.barChart2:hover {
    background-color:blue;
}

＆＃13;

<div class="row">
    <div class="barChart1" id="barChartId1"></div>
</div>
<div class="row">
    <div class="barChart2" id="barChartId2"></div>
</div>

＆＃13;

Answer 2

尝试：

.barChart1{background:#000000}
.barChart1:hover{background:#ffffff}

.barChart2{background:#b6ff00}
.barChart2{background:#ffffff}

将不同的css类属性应用于div

2 个答案: