代替行の色 UL LI

vinman64

行の色を変えようとしていますが、代わりに箇条書きの点だけが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;
?>
リーランド

まず、<ul>エコーをwhileループの外に移動する必要があります。<ul>すべてをラップする単一の要素のみが必要です<li>それは正直、意図的なことかもしれませんが、それでも伝えておかなければならないと思いました。

次に、提供された 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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

li幅が可変のUl

分類Dev

<ul >> <li>と<ul> <li>のcssスタイリングの違い

分類Dev

ul li aの<a>ではなく、ul liを歪める方法は?

分類Dev

3 階層の深さをオーバーフローさせる方法 メニュー ul > li > ul > li > ul > li

分類Dev

nav / ul / liの位置と配置の段落

分類Dev

ul li での jQuery の問題

分類Dev

css flex ul、最初と最後の固定li

分類Dev

<ul>の<li>値を変更する方法

分類Dev

css <ul> <li>: アイテムの配置

分類Dev

Djangoフォームエラー:<ul class = "errorlist"> <li> language <ul class = "errorlist"> <li>値のリストを入力してください。</ li> </ ul> </ li> </ ul>

分類Dev

liのIDを使用してulからliを削除します

分類Dev

show third level of ul li on hover of second level of ul li

分類Dev

Making a submenu with a <div> and <ul>/<li>

分類Dev

Ul li:hover Unstable Look

分類Dev

liをulで複数の行に水平に配置します

分類Dev

1行に2つのul> li要素をCSSします

分類Dev

水平ulで1つのliを別のliの下に揃えます

分類Dev

li内のul内のliをターゲットにするCSS

分類Dev

liにクラスを追加し、次にliの下にulを追加する方法

分類Dev

マルチレベル UL/LI 要素で以前の LI を取得する方法

分類Dev

ulとliを同じ行に垂直に表示する方法

分類Dev

Div ul> li 1行以内に収める(水平線)

分類Dev

UL内のLI内のAをターゲットにするCSS

分類Dev

each()のjQuery問題と、ul要素とli要素のprepend関数

分類Dev

<li>の数に応じて<ul>の幅を変更します

分類Dev

Jquery:ulから最後の4つの「li」を削除します

分類Dev

モバイルのulに2つのliを隠す

分類Dev

ulのliのインデックスを取得します

分類Dev

ul li 最後の子の境界線を削除する方法

Related 関連記事

  1. 1

    li幅が可変のUl

  2. 2

    <ul >> <li>と<ul> <li>のcssスタイリングの違い

  3. 3

    ul li aの<a>ではなく、ul liを歪める方法は?

  4. 4

    3 階層の深さをオーバーフローさせる方法 メニュー ul > li > ul > li > ul > li

  5. 5

    nav / ul / liの位置と配置の段落

  6. 6

    ul li での jQuery の問題

  7. 7

    css flex ul、最初と最後の固定li

  8. 8

    <ul>の<li>値を変更する方法

  9. 9

    css <ul> <li>: アイテムの配置

  10. 10

    Djangoフォームエラー:<ul class = "errorlist"> <li> language <ul class = "errorlist"> <li>値のリストを入力してください。</ li> </ ul> </ li> </ ul>

  11. 11

    liのIDを使用してulからliを削除します

  12. 12

    show third level of ul li on hover of second level of ul li

  13. 13

    Making a submenu with a <div> and <ul>/<li>

  14. 14

    Ul li:hover Unstable Look

  15. 15

    liをulで複数の行に水平に配置します

  16. 16

    1行に2つのul> li要素をCSSします

  17. 17

    水平ulで1つのliを別のliの下に揃えます

  18. 18

    li内のul内のliをターゲットにするCSS

  19. 19

    liにクラスを追加し、次にliの下にulを追加する方法

  20. 20

    マルチレベル UL/LI 要素で以前の LI を取得する方法

  21. 21

    ulとliを同じ行に垂直に表示する方法

  22. 22

    Div ul> li 1行以内に収める(水平線)

  23. 23

    UL内のLI内のAをターゲットにするCSS

  24. 24

    each()のjQuery問題と、ul要素とli要素のprepend関数

  25. 25

    <li>の数に応じて<ul>の幅を変更します

  26. 26

    Jquery:ulから最後の4つの「li」を削除します

  27. 27

    モバイルのulに2つのliを隠す

  28. 28

    ulのliのインデックスを取得します

  29. 29

    ul li 最後の子の境界線を削除する方法

ホットタグ

アーカイブ