简体   繁体   English

备用行颜色UL LI

[英]Alternate Row Colors UL LI

I'm trying to alternate row colors but instead only the bullet points are alternating colors at http://althedge.xyz Can someone show me how to do this? 我试图替换行颜色,但只有子弹点是交替的颜色在http://althedge.xyz有人可以告诉我如何做到这一点? Thanks 谢谢

I'm using this css code below to alternate the bullet point color but how to alternate the row color. 我正在使用下面的css代码来交替子弹点颜色但是如何交替行颜色。

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

Php file 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;
?>

Reviewing your code, the color is from the a tag, you can change your css this way to fix it 查看代码,颜色来自a标签,您可以通过这种方式更改css来修复它

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

You can do this via simple css: 你可以通过简单的CSS来做到这一点:

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

The blue color is default link color, you need to change the color for link 蓝色是默认链接颜色,您需要更改链接的颜色

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

First, you should move the <ul> echo outside of the while loop. 首先,您应该将<ul>回显移动到while循环之外。 You only want a single <ul> element wrapping all of your <li> 's. 你只需要一个<ul>元素包装你的所有<li> That may honestly be intentional, but thought I should tell you nonetheless. 这可能是故意的,但我想我应该告诉你。

Next up, your provided CSS is targeting the <ul> element itself, rather than the markup inside of them. 接下来,您提供的CSS定位于<ul>元素本身,而不是它们内部的标记。 And, finally, anchor elements have default styling in web browsers – that's why they're blue currently. 最后,锚元素在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> 

<?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;
?>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM