CSS:内联样式应用于 <fieldset> 但是当我将相同的代码写入外部 css 并通过 id 引用时,没有应用任何样式
CSS: inline style gets applied to <fieldset> but when I write the same code to external css and reference by id no style applied
https://jsfiddle.net/tdyd5naw/
css 文件已正确链接,因为页眉和页脚 div 已设置样式。我认为这是选择器的问题,但在尝试了很多与 W3C 相关的选项后,我不知所措。
这里是相关的html
<body>
<div class = "header"><h1>Library</h1>
</div>
<form action = "newUser.php" method = "POST">
<fieldset id="newAc">
<legend>New Accouunt Details</legend>
Choose Username: <br>
<input type = "text" name = "uname"/><br>
Choose Password: <br>
<input type = "password" name = "pass1"/><br>
Re-Enter Password: <br>
<input type = "password" name = "pass2"/><br>
</fieldset>
<fieldset id = "personalInfo">
<legend>Personal Info</legend>
First Name: <br>
<input type = "text" name = "fname"/><br>
Surname: <br>
<input type = "text" name = "sname"/><br>
Address Line 1: <br>
<input type = "text" name = "addr1"/><br>
Address Line 2: <br>
<input type = "text" name = "addr2"/><br>
City: <br>
<input type = "text" name = "city"/><br>
Telephone Home: <br>
<input type = "text" name = "hphone"/><br>
Telephone Mobile: <br>
<input type = "text" name = "mphone"/><br>
</fieldset>
<input type = "submit" value = "Register"/><br>
</form>
<div class = "footer">
</div>
</body>
这里是对应的CSS
#newAc {
position:relative;
disblay:block;
float:left;
top: 100px;
}
#personalInfo{
position: relative;
display: block;
float: left;
top: 100px
}
你正在做 wrong.change 从 feildset #newAc 到 feildset#newAc 或 #newAc
区别在于
1. feildset #newAc 是你正在寻找一个带有#newAc 的元素
字段集
2. feildset#newAc 正在寻找 feildset 中的元素
ID #newAc
3. #newAc 正在寻找具有 id #newAc
的元素
#newAc {
position:relative;
disblay:block;
float:left;
top: 100px;
}
#personalInfo{
position: relative;
display: block;
float: left;
top: 100px
}
<fieldset id="newAc">
<legend>New Accouunt Details</legend>
Choose Username: <br>
<input type = "text" name = "uname"/><br>
Choose Password: <br>
<input type = "password" name = "pass1"/><br>
Re-Enter Password: <br>
<input type = "password" name = "pass2"/><br>
</fieldset>
<fieldset id = "personalInfo">
<legend>Personal Info</legend>
First Name: <br>
<input type = "text" name = "fname"/><br>
Surname: <br>
<input type = "text" name = "sname"/><br>
Address Line 1: <br>
<input type = "text" name = "addr1"/><br>
Address Line 2: <br>
<input type = "text" name = "addr2"/><br>
City: <br>
<input type = "text" name = "city"/><br>
Telephone Home: <br>
<input type = "text" name = "hphone"/><br>
Telephone Mobile: <br>
<input type = "text" name = "mphone"/><br>
</fieldset>
https://jsfiddle.net/tdyd5naw/
css 文件已正确链接,因为页眉和页脚 div 已设置样式。我认为这是选择器的问题,但在尝试了很多与 W3C 相关的选项后,我不知所措。
这里是相关的html
<body>
<div class = "header"><h1>Library</h1>
</div>
<form action = "newUser.php" method = "POST">
<fieldset id="newAc">
<legend>New Accouunt Details</legend>
Choose Username: <br>
<input type = "text" name = "uname"/><br>
Choose Password: <br>
<input type = "password" name = "pass1"/><br>
Re-Enter Password: <br>
<input type = "password" name = "pass2"/><br>
</fieldset>
<fieldset id = "personalInfo">
<legend>Personal Info</legend>
First Name: <br>
<input type = "text" name = "fname"/><br>
Surname: <br>
<input type = "text" name = "sname"/><br>
Address Line 1: <br>
<input type = "text" name = "addr1"/><br>
Address Line 2: <br>
<input type = "text" name = "addr2"/><br>
City: <br>
<input type = "text" name = "city"/><br>
Telephone Home: <br>
<input type = "text" name = "hphone"/><br>
Telephone Mobile: <br>
<input type = "text" name = "mphone"/><br>
</fieldset>
<input type = "submit" value = "Register"/><br>
</form>
<div class = "footer">
</div>
</body>
这里是对应的CSS
#newAc {
position:relative;
disblay:block;
float:left;
top: 100px;
}
#personalInfo{
position: relative;
display: block;
float: left;
top: 100px
}
你正在做 wrong.change 从 feildset #newAc 到 feildset#newAc 或 #newAc
区别在于
1. feildset #newAc 是你正在寻找一个带有#newAc 的元素
字段集
2. feildset#newAc 正在寻找 feildset 中的元素
ID #newAc
3. #newAc 正在寻找具有 id #newAc
#newAc {
position:relative;
disblay:block;
float:left;
top: 100px;
}
#personalInfo{
position: relative;
display: block;
float: left;
top: 100px
}
<fieldset id="newAc">
<legend>New Accouunt Details</legend>
Choose Username: <br>
<input type = "text" name = "uname"/><br>
Choose Password: <br>
<input type = "password" name = "pass1"/><br>
Re-Enter Password: <br>
<input type = "password" name = "pass2"/><br>
</fieldset>
<fieldset id = "personalInfo">
<legend>Personal Info</legend>
First Name: <br>
<input type = "text" name = "fname"/><br>
Surname: <br>
<input type = "text" name = "sname"/><br>
Address Line 1: <br>
<input type = "text" name = "addr1"/><br>
Address Line 2: <br>
<input type = "text" name = "addr2"/><br>
City: <br>
<input type = "text" name = "city"/><br>
Telephone Home: <br>
<input type = "text" name = "hphone"/><br>
Telephone Mobile: <br>
<input type = "text" name = "mphone"/><br>
</fieldset>