WordPressのウジェットへのCSS適応について

Question

sidebar.phpを作成し、ウィジェットを有効化しました。
main.phpにウジェットの表示をするコードを追加しました。
style.cssで「ulとli」を指定して「list-style-type」に変更を加えたいのですが、うまく反映しません。
ウィジェットの文字の左にある黒点[・]を消すには、どのようにすればよいでしょうか？
よろしくお願いします。

sidebar.php

<?php if(is_active_sidebar('sidebar-test')):?>
<?php dynamic_sidebar();?>
<?php endif;?>

main.php

<?php get_sidebar();?>

style.css

ul{list-style-type:none;}
li{list-style-type:none;}

環境
WordPress:5.7.2
ブラウザ:Firefox
サーバー:AWS

Answer 1

ブラウザの開発ツールのインスペクタで、問題のある要素をクリックし、適用されているプロパティを見てみてください。
list-style-type:none; となっていれば、CSSセレクタ詳細度で負けています。

.secondary .widget ul {
  list-style-type:none !important;
}

などし、詳細度を高くするようにしてください。
!important は、なしで効くなら取ってください。
テーマにっては、:before などの疑似要素で実装されている可能性もあり、それも開発ツールでわかります。

Comments

[OneWol]

ご回答ありがとうございます。
ご指摘の点確認したところ、style.cssに記載したlist-style-type:noneが「ul」や「li」に適用されて詳細度で負けたのではなく、適用されていないようでした。

Answer 2

.test p{
color:red;
}

↓

.test ul{
list-style-type:none;
}

↓

ul{
list-style-type:none;
}

最初に適当なタグに対してstyleを指定してと段階を踏んでcssファイルを読み込ませると無事適応されました。