CSS 클래스 및 하위 클래스
작동하지 않는 것 같아서 내가하는 일 외에 다른 일을 할 수 있습니까? 클래스 아래에있는 하위 클래스를 사용하여 해당 class.subclass에 대해 특별히 CSS를 사용할 수 있기를 원합니다.
CSS
.area1
{
border:1px solid black;
}
.area1.item
{
color:red;
}
.area2
{
border:1px solid blue;
}
.area2.item
{
color:blue;
}
HTML
<div class="area1">
<table>
<tr>
<td class="item">Text Text Text</td>
<td class="item">Text Text Text</td>
</tr>
</table>
</div>
<div class="area2">
<table>
<tr>
<td class="item">Text Text Text</td>
<td class="item">Text Text Text</td>
</tr>
</table>
</div>
그래서 부모 css 클래스 "area1", "area2"아래의 요소에 대해 class = "item"을 사용할 수 있습니다. 이 작업을 수행하기 위해 class = "area1 item"을 사용할 수 있다는 것을 알고 있지만 왜 그렇게 장황해야하는지 이해할 수 없습니다. CSS 하위 클래스가 정의하기 위해 어떤 부모 클래스 아래에 있는지 살펴보아야하지 않습니까?
참고 : 이것은 IE (현재 7 사용)에서 작동하지만 FF에서는 작동하지 않으므로 이것이 CSS 표준 방식이 아니라고 가정합니다.
공백을 추가하면됩니다.
.area2 .item
{
...
}
참고로, 위와 같이 두 개의 선택기가 함께 연결된 규칙을 정의 할 때 :
.area1.item
{
color:red;
}
그 뜻은:
Apply this style to any element that has both the class "area1" and "item".
Such as:
<div class="area1 item">
Sadly it doesn't work in IE6, but that's what it means.
Your problem seems to be a missing space between your two classes in the CSS:
.area1.item
{
color:red;
}
Should be
.area1 .item
{
color:red;
}
do you want to force only children to be selected? http://css.maxdesign.com.au/selectutorial/selectors_child.htm
.area1
{
border:1px solid black;
}
.area1>.item
{
color:red;
}
.area2
{
border:1px solid blue;
}
.area2>.item
{
color:blue;
}
Just put a space between .area1 and .item, e.g:
.area1 .item
{
color:red;
}
this style applies to elements with class item inside an element with class area1.
Just put a space between your classes
.area1 .item
{
...
}
Here's a very good reference for CSS Selectors.
Following on from kR105's reply above:
My problem was similar to that of the OP (Original Poster), only occurred outside a table, so the subclasses were not called from within the scope of the parent class (the table), but outside of it, so I had to ADD selectors, as kR105 mentioned.
Here was the problem: I had two boxes (divs), each with the same border-radius (HTML5), padding and margin, but needed to make them different colors. Rather than repeat those 3 parameters for each color class, I wanted a "superclass" to contain border-radius/padding/margin, then just individual "subclasses" to express their differences (double quotes around each as they're not really subclasses - see my later post). Here's how it worked out:
HTML:
<body>
<div class="box box1"> Hello my color is RED </div>
<div class="box box2"> Hello my color is BLUE </div>
</body>
CSS:
div.box {border-radius:20px 20px 20px 20px; padding:10px; margin:10px}
div.box1 {border:3px solid red; color:red}
div.box2 {border:3px solid blue; color:blue}
Hope someone finds this helpful.
That is the backbone of CSS, the "cascade" in Cascading Style Sheets.
If you write your CSS rules in a single line it makes it easier to see the structure:
.area1 .item { color:red; }
.area2 .item { color:blue; }
.area2 .item span { font-weight:bold; }
Using multiple classes is also a good intermediate/advanced use of CSS, unfortunately there is a well known IE6 bug which limits this usage when writing cross browser code:
<div class="area1 larger"> .... </div>
.area1 { width:200px; }
.area1.larger { width:300px; }
IE6 IGNORES the first selector in a multi-class rule, so IE6 actually applies the .area1.larger rule as
/*.area1*/.larger { ... }
Meaning it will affect ALL .larger elements.
It's a very nasty and unfortunate bug (one of many) in IE6 that forces you to pretty much never use that feature of CSS if you want one clean cross-browser CSS file.
The solution then is to use CSS classname prefixes to avoid colliding wiht generic classnames:
.area1 { ... }
.area1.area1Larger { ... }
.area2.area2Larger { ... }
May as well use just one class, but that way you can keep the CSS in the logic you intended, while knowing that .area1Larger only affects .area1, etc.
The class you apply on the div can be used to as a reference point to style elements with that div, for example.
<div class="area1">
<table>
<tr>
<td class="item">Text Text Text</td>
<td class="item">Text Text Text</td>
</tr>
</table>
</div>
.area1 { border:1px solid black; }
.area1 td { color:red; } /* This will effect any TD within .area1 */
To be super semantic you should move the class onto the table.
<table class="area1">
<tr>
<td>Text Text Text</td>
<td>Text Text Text</td>
</tr>
</table>
you can also have two classes within an element like this
<div class = "item1 item2 item3"></div>
each item in the class is its own class
.item1 {
background-color:black;
}
.item2 {
background-color:green;
}
.item3 {
background-color:orange;
}
kR105 wrote:
you can also have two classes within an element like this
<div class = "item1 item2 item3"></div
I can't see the value of this, since by the principle of cascading styles, the last one takes precedence. For example, if in my earlier example I changed the HTML to read
<div class="box1 box2"> Hello what is my color? </div>
the box's border and text would be blue, since .box2's style assigns these values.
Also in my earlier post I should have emphasized that adding selectors as I did is not the same as creating a subclass within a class (the first solution in this thread), though the effect is similar.
참고URL : https://stackoverflow.com/questions/558721/css-classes-subclasses
'developer tip' 카테고리의 다른 글
| Eclipse 프로젝트에서 Maven 종속성 누락 (0) | 2020.08.24 |
|---|---|
| HTTP POST를 사용하여 이미지 및 텍스트 업로드 (0) | 2020.08.24 |
| Django 모델 생성 또는 존재하는 경우 업데이트 (0) | 2020.08.24 |
| Mac 터미널 팝업 / 경고는 어떻게 만듭니 까? (0) | 2020.08.24 |
| Java에서 a.getClass ()와 A.class의 차이점은 무엇입니까? (0) | 2020.08.23 |