文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS和父/子、继承属性语法和可能性

问CSS和父/子、继承属性语法和可能性
EN

Stack Overflow用户

提问于 2012-03-10 03:01:27

回答 3查看 152关注 0票数 0

我有这个，它可以做我想做的任何事情，但对我来说，似乎有一种方法可以做到这一点，这样我就可以控制div的高度，而不是所有其他相同的属性。我只是无法通过我的搜索找到一种对我有意义的方法。

请注意，我大约有3天的html，所以如果这是太复杂，我将学习在我理解的步骤。我理解了样式表来简化这个过程，所以似乎有一种更简单的方法。

谢谢

<style type="text/css">
    body
    {

        width:1240px;
        border:solid 1px black  
    }

    .rightline1{float:right;width:618px;height:80px;border:solid 1px black;}
    .rightline2{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline3{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline4{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline5{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline6{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline7{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline8{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline9{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline10{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline11{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline12{float:right;width:618px;height:20px;border:solid 1px black;}
    .leftline1{float:left;width:618px;height:80px;border:solid 1px black;}
    .leftline2{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline3{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline4{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline5{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline6{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline7{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline8{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline9{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline10{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline11{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline12{float:left;width:618px;height:20px;border:solid 1px black;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
    <div class="leftline1"></div>
    <div class="rightline1"></div>
    <div class="leftline2"></div>
    <div class="rightline2"></div>
    <div class="leftline3"></div>
    <div class="rightline3"></div>
    <div class="leftline4"></div>
    <div class="rightline4"></div>
    <div class="leftline5"></div>
    <div class="rightline5"></div>
    <div class="leftline6"></div>
    <div class="rightline6"></div>
    <div class="leftline7"></div>
    <div class="rightline7"></div>
    <div class="leftline8"></div>
    <div class="rightline8"></div>
    <div class="leftline9"></div>
    <div class="rightline9"></div>
    <div class="leftline10"></div>
    <div class="rightline10"></div>
    <div class="leftline11"></div>
    <div class="rightline11"></div>
    <div class="leftline12"></div>
    <div class="rightline12"></div>
</div>
</form>
</body>

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-03-10 03:06:24

我看到了两个选择：

使用所有通用样式创建一个单独的规则，并将其应用于所有类，如下所示

.rightline1，.rightline2 (...) .rightLine12 {在此处/*所有当前规则*/ }

然后只需为单个类添加一个单独的规则when necessary.

Another选项(对我来说更好)：因为您可以将任意数量的类分配给一个元素，所以只需为常见样式添加一个额外的类。示例：

HTML:

票数 2

Stack Overflow用户

发布于 2012-03-10 03:07:49

您可以在多个HTML元素上重用CSS类。例如，这两个CSS类完全相同：

.rightline2{float:right;width:618px;height:20px;border:solid 1px black;}
.rightline3{float:right;width:618px;height:20px;border:solid 1px black;}

所以这个类可以只定义一次，并在您需要的任何地方使用。

类重用示例(在两个div上使用相同的CSS类)：

<div class="rightline2"></div>
<div class="rightline2"></div>

票数 2

Stack Overflow用户

发布于 2012-03-10 03:11:12

首先，您可以像这样编写相同的CSS：

body {
    width:1240px;
    border:solid 1px black  
}

.rightline1, .rightline2, .rightline3, .rightline4, .rightline5, .rightline6, .rightline7, .rightline8, .rightline9, .rightline10, .rightline11, .rightline12{
    float:right;
    width:618px;
    height:20px;
    border:solid 1px black;
}
.leftline1, .leftline2, .leftline3, .leftline4, .leftline5, .leftline6, .leftline7, .leftline8, .leftline9, .leftline10, .leftline11, .leftline12 {
    float:left;
    width:618px;
    height:20px;
    border:solid 1px black;
}

所以这就更清晰了。但是听起来你想合并所有的右线和左线。所以这样会更好：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        body {
            width:1240px;
            border:solid 1px black  
        }

        .rightline, .leftline {
            width:618px;
            height:20px;
            border:solid 1px black;
        }

        .rightline {
            float:right;
        }
        .leftline {
            float:left;
        }
</style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
        </div>
    </form>
</body>

在原始代码中，您使用的类更像是In。如果您有类似<div id='abc'></div>的内容，那么这意味着页面上将不会有(好吧，不应该有) id为abc的任何其他元素。Ids是唯一的。

另一方面，类用于标识元素组。因此，不是给每个人一个唯一的类，而是应该给他们相似的类。在我的上一个示例中，我给出了.rightline和.leftline的共享样式。因为，除了浮动方向之外，它们都是相同的。然后我只给每个人各自的浮动方向。

EDIT我更新了上一个示例，使其具有适当的缩进:)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9639540

复制

相似问题

问CSS和父/子、继承属性语法和可能性
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS和父/子、继承属性语法和可能性EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS和父/子、继承属性语法和可能性
EN