替代行颜色Ul Li

Question

我正在尝试交替进行行颜色，但是只有bullet点在http://althedge.xyz上交替颜色，有人可以告诉我如何做到这一点吗？谢谢

我在下面使用此CSS代码来交替使用子弹点颜色，但是如何交替进行行颜色。

ul:nth-of-type(odd) {  
  color: #ccc;
}

php文件

<?php
// Database Settings 
define('DB_HOST', 'localhost');
define('DB_PORT', '*****');
define('DB_USER', '*****');
define('DB_PASS', '*****');
define('DB_NAME', '*****');
// Connection to Database
$database = new MySQLi(DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT);
$sql = 'SELECT * '
        . ' FROM crypto ORDER BY Date DESC, Number DESC';
$resultSet = $database->query($sql);
$currentDate = false;
while ($row = $resultSet->fetch_assoc()) {
    if ($row['Date'] != $currentDate) {
        echo $row['Date'] ;
        $currentDate = $row['Date'];  
    }
    echo '<ul><li>' . 
    '<A HREF="'.  
    $row["Link"].
    '"style="text-decoration: none;"'.
    '">'. 
    $row["Article"].
    '</A>'.
    '</li></ul>';
} 
$html .= '</table>';
echo $html;
?>

Answer 1

首先，您应该将<ul> Echo移到while循环外。您只需要一个<ul>元素包装所有<li> s。老实说，这可能是故意的，但我认为我还是要告诉你。

接下来，您提供的CSS针对<ul>元素本身，而不是内部的标记。最后，锚元素在Web浏览器中具有默认样式 - 这就是为什么它们当前是蓝色的原因。

ul li:nth-of-type(odd) a {
  color: #ccc;
}

<ul>
	<li>
		<a href="http://www.coindesk.com/ether-prices-surge-shadow-bitcoin-dash/" style="text-decoration: none;">dash bubble overshadows ethereum upswing...</a>
	</li>
	<li>
		<a href="https://www.reddit.com/r/ethtrader/comments/5xdcv8/asia_is_late_to_the_party_%E4%BA%9A%E6%B4%B2%E6%99%9A%E5%88%B0%E6%99%9A%E4%BC%9A/" style="text-decoration: none;">ethereum rises despite absent eth / cny markets...</a>
	</li>
	<li>
		<a href="https://news.vice.com/story/bitcoins-are-more-expensive-than-gold-now-thanks-china" style="text-decoration: none;">is the devalued yuan moving bitcoin...</a>
	</li>
	<li>
		<a href="http://fortune.com/2017/03/03/bitcoin-pricing-record/" style="text-decoration: none;">traders optimistic about the etf...</a>
	</li>
</ul>

Answer 2

查看您的代码，颜色来自 a标签，您可以这样更改CSS来修复它

ul:nth-of-type(odd),
ul:nth-of-type(odd) a {  
  color: #ccc;
}

Answer 3

您可以通过简单的CSS：

进行此操作

ul li {
    color: blue;
}
ul li:nth-child(odd) {
    color: grey;
}

Answer 4

蓝色是默认链接颜色，您需要更改链接的颜色

ul:nth-of-type(odd) a {
    color: #ccc;
}

Answer 5

<?php
// Database Settings 
define('DB_HOST', 'localhost');
define('DB_PORT', '*****');
define('DB_USER', '*****');
define('DB_PASS', '*****');
define('DB_NAME', '*****');
// Connection to Database
$database = new MySQLi(DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT);
$sql = 'SELECT * '
        . ' FROM crypto ORDER BY Date DESC, Number DESC';
$resultSet = $database->query($sql);
$currentDate = false;
echo "<ul>";
while ($row = $resultSet->fetch_assoc()) {
    if ($row['Date'] != $currentDate) {
        echo $row['Date'] ;
        $currentDate = $row['Date'];  
    }
    echo '<li>' . 
    '<A HREF="'.  
    $row["Link"].
    '"style="text-decoration: none;"'.
    '">'. 
    $row["Article"].
    '</A>'.
    '</li>';
} 
echo "</ul>";
$html .= '</table>';
echo $html;
?>