### 発生している問題
テックアカデミーのはじめてのCSS入門講座を拝見しています。2-6擬似要素(CSSセレクタ)
CSSにて擬似要素の :link や :visitedを打ち込んだのですが反映されません。
私はエディタをsublimetextを使用しております。
文字をきちんと打てていれば色が変わるのですが色も変わりません。
お手数お掛けしてすみません
ここに貼り付けたので宜しいでしょうか?
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>HTMLの練習</title> 6<link rel="stylesheet" type="text/css" href="style.css"> 7</head> 8<body> 9<div class="main"> 10<h1>Heading 1</h1> 11<a href="#a">mainクラスの子要素のリンク</a> 12<p> 13Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 14</p> 15<input type="text"> 16<h2>Heading 2</h2> 17<p> 18Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <a href="#b">mainクラスの子要素ではないリンク</a> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 19</p> 20<a href="#a">mainクラスの子要素のリンク</a> 21<h2>Heading 2</h2> 22<p> 23Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="c">mainクラスの子要素ではないリンクです</a> enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 24</p> 25<p> 26Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 27</p> 28</div> 29<br> 30<div class="base black">ここは黒</div> 31<div class="base red">ここは赤</div> 32<div class="base green">ここは緑</div> 33</body> 34</html>
CSS
1h1 { 2color: black; 3font-size: 40px; 4} 5p { 6font-size: 9px; 7background-color: yellow; 8} 9.test{ 10background-color: gray; 11} 12#header{ 13font-size: 30px; 14} 15.base{ 16font-size: 20px; 17font-weight: bold; 18} 19.black{ 20 21color: black; 22} 23.red{ 24 25color: red; 26} 27.green{ 28 29color: green; 30} 31:link { 32color: crimson; 33} 34:visited{ 35color:grey; 36}
試したこと
CSSの読み込みはできているか確認しました。
画像添付しておりますので確認していただけると幸いです。
お手数おかけしますがよろしくお願いいたします。
追記:現状報告
皆さま問題なく動作しているのではいかとのことだったので、
・新規で、htmlとCSSそれぞれファイルを作成し直し、フィアル名を変更しCSSの読み込みのための記述をhtml側でしました。
そのファイルにhtmlとcss共にコードを貼り付けしました。→✖️
・コードを確認していたところ、html側では削除していたにもかかわらずCSS側にのみ残っていたコードがあったのでこれが悪さをしているのかと思いCSS側に残っていたコードを削除しました。→✖️
・再度cssがきちんと読み込まれているか確認したところ全てのセレクタの値を変更してみましたが反映されていませんでした..。
・codepenにて現状のコードを貼り付けして保存しました。(共有に関しては指示待ち状態)
codepenに貼り付けを行なった際にはcssは反映されました。
疑問
codepenに貼り付けた際にcssは正常に反映されましたが、やはり:linkに関してはコードの色は白のままですし、
color: crimson;は反映されていませんでした。
お返事遅れていてすみません。
回答2件
あなたの回答
tips
プレビュー