何回調べても忘れてハマる自分がすごいと思います。
- 環境
- OS : macOS Sierra version10.12.5 64bit
- Chrome : Version 59.0.3071.115 (Official Build) (64-bit)
何も指定しなければユーザーエージェントの指定が適用される
sample.html
<html>
<head>
<title>sample</title>
</head>
<body>
<input type="text" value="文字色は何色？">
</body>
</html>
製作者の指定が優先
sample.html
<html>
<head>
<title>sample</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<input type="text" value="文字色は何色？">
</body>
</html>
style.css
@charset "UTF-8";
/* SASSから出力しています */
input[type="text"] {
color: blue;
}
/*# sourceMappingURL=style.css.map */
あとから読み込まれた指定が優先
sample.html
<html>
<head>
<title>sample</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<input type="text" value="文字色は何色？">
</body>
</html>
CSSはファイルの上から下の順で読み込まれます。
style.css
@charset "UTF-8";
/* SASSから出力しています */
input[type="text"] {
color: blue;
}
input[type="text"] {
color: purple;
}
/*# sourceMappingURL=style.css.map */
タグに近い指定が優先
sample.html
<html>
<head>
<title>sample</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<style type="text/css">
input[type="text"] {
color: red;
}
</style>
</head>
<body>
<input type="text" value="文字色は何色？" style="color: green;">
</body>
</html>
※. style.cssは上と同じ
具体的な指定が優先
sample.html
<html>
<head>
<title>sample</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<style type="text/css">
input[type="text"] {
color: red;
}
</style>
</head>
<body>
<input type="text" value="文字色は何色？" id="moji" class="iro">
</body>
</html>
style.css
@charset "UTF-8";
/* SASSから出力しています */
#moji {
color: orange;
}
input[type="text"].iro {
color: pink;
}
.iro {
color: green;
}
input[type="text"] {
color: blue;
}
input[type="text"] {
color: purple;
}
/*# sourceMappingURL=style.css.map */
けど、selectタグの選択状態での指定をするとよくわからない状態になる
どなたか、選択状態での「color」と「background-color」の指定方法を教えて下さい・・・・。
sample.html
<html>
<head>
<title>sample</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<style type="text/css">
input[type="text"] {
color: red;
}
</style>
</head>
<body>
<p>セレクトボックスの場合
<select multiple size="2">
<option value="on">選択している</option>
<option value="off">選択していない</option>
</select>
</p>
</body>
</html>
style.css
@charset "UTF-8";
/* SASSから出力しています */
#moji {
color: orange;
}
input[type="text"].iro {
color: pink;
}
.iro {
color: green;
}
input[type="text"] {
color: blue;
}
input[type="text"] {
color: purple;
}
select option:checked {
color: pink;
background-color: red;
font-weight: bold;
}
/*# sourceMappingURL=style.css.map */