Question

我使用以下代码格式化按钮。有没有办法格式化＆＃34; 0＆＃34;黑色和＆＃34; x＆＃34;在这个与电脑对战的Tic Tac Toe游戏中以不同的颜色。

input[type='button'] {
    border : 3px solid #262626;
    cursor: pointer;
    background-color: #ffffff;
    color: #FF0066;
    padding : 3px;
    font-size: 30px;
    font-weight: bold;
    font-family:Papyrus,fantasy;
}

Answer 1

根据该按钮的X或O添加一个类，如下所示：

<强> CSS

input[type=button].x {
    color: #000;
}

input[type=button].o {
    color: #f00;
}

<强> HTML

<input type="button" class="x">X</input>

Answer 2

CSS中没有条件这样的东西。但是你总是可以在你的盒子里添加课程：

$(document).ready(function() {
  var isTac = false;
  $('.box').click(function() {
    if (!$(this).hasClass('tic') && !$(this).hasClass('tac')) {
      $(this).addClass(isTac ? 'tac' : 'tic');
      isTac = !isTac;
    }
  });
});

.tic-tac {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  float: left;
}
.box {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  float: left;
  width: 20px;
  height: 20px;
  position: relative;
}
.box.tic:after {
  content: 'X';
  font-size: 12px;
  position: absolute;
  left: 5px;
  top: 3px;
}
.box.tac:after {
  content: 'O';
  font-size: 12px;
  position: absolute;
  left: 6px;
  top: 2px;
}
.row:after {
  clear: both;
  content: "";
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tic-tac">
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="row">
    <div class="box tic"></div>
    <div class="box"></div>
    <div class="box tac"></div>
  </div>
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

有条件的CSS。不同的颜色为不同的输入文本

2 个答案: