將不同的CSS類屬性應用於div

-1

我試圖將不同的css樣式應用於多個divs。我曾嘗試，但迄今爲止沒有運氣：將不同的CSS類屬性應用於div

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。

來源

2015-11-05 konrad

閱讀：[Fills_and_Strokes]（https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/ Fills_and_Strokes） –

嘗試：

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

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

來源

2015-11-05 22:20:26

首先，這個語法是錯誤的：

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

它應該是（觀察類的屬性和它的值之間的=號）：

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

其次，你需要使用background-color財產，因爲它是一個HTML元素，而不是SVG元素。

看到這個工作如下：

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

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

來源

2015-11-05 22:25:57

將不同的CSS類屬性應用於div

回答

相關問題