如何在使用多个类的单个元素上使用多个CSS伪类** :: before **

时间：2016-09-14 07:45:40

标签： html5 twitter-bootstrap css3

如何在使用多个类的单个元素上使用多个CSS伪类 :: before 。

这是我的代码：

＆＃13;
＆＃13; 
.how-it-works, 
.works .one, 
.works .two, 
.works .three, 
.works .four, 
.works .five, 
.works .six, 
.works .seven  {
    position:relative;
}    
.how-it-works:before, 
.works .one:before, 
.works .two:before, 
.works .three:before, 
.works .four:before, 
.works .five:before,
.works .six:before,
.works .seven:before  {
    content: "\f11b";
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
            transform: rotate(30deg);
}
.works .one:before  {content: "\f091";} 
.works .two:before  {content: "\f04b";} 
.works .three:before{content: "\f10b";} 
.works .four:before {content: "\f108";} 
.works .five:before {content: "\f109";}
.works .six:before  {content: "\f26c";}
.works .seven:before{content: "\f1e6";}
＆＃13; 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<body class="works">
    <div class="container-fluid">
        <div class="row">
            <div class="how-it-works one two three four five six seven col-xs-12 col-md-10 col-md-offset-1">
                <h1><span>How It Works</span></h1>
            </div>
        </div>
    </div>
</body>
＆＃13;
＆＃13;
＆＃13;

我想用这段代码做什么：在div元素的背景中，每个字体都很棒的图标并排显示不同的位置。并在x和y轴上重复。

1 个答案:

答案 0 :(得分：0)

  1. 如果要重新定义图标，可以将CSS基于.how-it-works类，并仅更改content属性。例如：

    2. .how-it-works:before {
  content: "\f11b";
  font-family: FontAwesome;
  left: -5px;
  position: absolute;
  top: 0;
  -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
       -o-transform: rotate(30deg);
          transform: rotate(30deg);
 }
.how-it-works.one:before  {content: "\f091";} 
.how-it-works.two:before  {content: "\f04b";} 
.how-it-works.three:before{content: "\f10b";} 
.how-it-works.four:before {content: "\f108";} 
.how-it-works.five:before {content: "\f109";}
.how-it-works.six:before  {content: "\f26c";}
.how-it-works.seven:before{content: "\f1e6";}
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-10 col-md-offset-1 how-it-works">&mdash;</div>
    <div class="col-md-10 col-md-offset-1 how-it-works one">1</div>
    <div class="col-md-10 col-md-offset-1 how-it-works one two">1 2</div>
    <div class="col-md-10 col-md-offset-1 how-it-works one two three">1 2 3</div>
    <div class="col-md-10 col-md-offset-1 how-it-works one two three four">1 2 3 4</div>
    <div class="col-md-10 col-md-offset-1 how-it-works one two three four five">1 2 3 4 5</div>
    <div class="col-md-10 col-md-offset-1 how-it-works one two three four five six">1 2 3 4 5 6</div>
    <div class="col-md-10 col-md-offset-1 how-it-works one two three four five six seven">1 2 3 4 5 6 7</div>
  </div>
</div>

    1. 如果要将所有七个图标连续放置，可以使用嵌套的<span>标记。例如：

      2. .how-it-works:before,
.how-it-works .one:before,
.how-it-works .two:before,   
.how-it-works .three:before,
.how-it-works .four:before,
.how-it-works .five:before,
.how-it-works .six:before,
.how-it-works .seven:before {
  display: inline-block;
  font-family: FontAwesome;
  -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
       -o-transform: rotate(30deg);
          transform: rotate(30deg);
 }
.how-it-works:before       {content: "\f11b";}
.how-it-works .one:before  {content: "\f091";} 
.how-it-works .two:before  {content: "\f04b";} 
.how-it-works .three:before{content: "\f10b";} 
.how-it-works .four:before {content: "\f108";} 
.how-it-works .five:before {content: "\f109";}
.how-it-works .six:before  {content: "\f26c";}
.how-it-works .seven:before{content: "\f1e6";}
      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-10 col-md-offset-1 how-it-works">&mdash;</div>
    <div class="col-md-10 col-md-offset-1 how-it-works"><span class="one">1</span></div>
    <div class="col-md-10 col-md-offset-1 how-it-works"><span class="one"><span class="two">1 2</span></span></div>
    <div class="col-md-10 col-md-offset-1 how-it-works"><span class="one"><span class="two"><span class="three">1 2 3</span></span></span></div>
    <div class="col-md-10 col-md-offset-1 how-it-works"><span class="one"><span class="two"><span class="three"><span class="four">1 2 3 4</span></span></span></span></div>
    <div class="col-md-10 col-md-offset-1 how-it-works"><span class="one"><span class="two"><span class="three"><span class="four"><span class="five">1 2 3 4 5</span></span></span></span></span></div>
    <div class="col-md-10 col-md-offset-1 how-it-works"><span class="one"><span class="two"><span class="three"><span class="four"><span class="five"><span class="six">1 2 3 4 5 6</span></span></span></span></span></span></div>
    <div class="col-md-10 col-md-offset-1 how-it-works"><span class="one"><span class="two"><span class="three"><span class="four"><span class="five"><span class="six"><span class="seven">1 2 3 4 5 6 7</span></span></span></span></span></span></span></div>
  </div>
</div>

      PS。 .col-md-10相当于.col-xs-12 .col-md-10。

      PPS。默认情况下，Bootstrap的列具有position: relative;属性。

相关问题
最新问题