在类元素下给出 CSS 响应代码时不起作用
Posted
技术标签:
【中文标题】在类元素下给出 CSS 响应代码时不起作用【英文标题】：CSS responsive code not working when given under class element 【发布时间】：2020-11-22 12:27:36 【问题描述】：CSS 新手！我编写了一个 css 代码来使我的表具有响应性。相同的代码在直接放在<style> 标记中时可以完美运行，但是当我放置一个类并在 div 中引用该类时不起作用。以下是代码：
工作：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr
display: block;
/* Hide table headers (but not display: none;, for accessibility) */
thead tr
position: absolute;
top: -9999px;
left: -9999px;
tr border: 1px solid #ccc;
td
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
td:before
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
/*
Label the data
*/
td:nth-of-type(1):before content: "First Name";
td:nth-of-type(2):before content: "Last Name";
td:nth-of-type(3):before content: "Job Title";
td:nth-of-type(4):before content: "Favorite Color";
td:nth-of-type(5):before content: "Wars of Trek?";
td:nth-of-type(6):before content: "Secret Alias";
td:nth-of-type(7):before content: "Date of Birth";
td:nth-of-type(8):before content: "Dream Vacation City";
td:nth-of-type(9):before content: "GPA";
td:nth-of-type(10):before content: "Arbitrary Data";
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
<td>Crimefighter Sorta</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
不工作：
<!DOCTYPE html>
<html>
<head>
<style>
.custom-accordiontable
/*
Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
*/
@media
only screen
and (max-width: 760px), (min-device-width: 768px)
and (max-device-width: 1024px)
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr
display: block;
/* Hide table headers (but not display: none;, for accessibility) */
thead tr
position: absolute;
top: -9999px;
left: -9999px;
tr
margin: 0 0 1rem 0;
tr:nth-child(odd)
background: #ccc;
td
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
td:before
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
/*
Label the data
You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
*/
td:nth-of-type(1):before content: "First Name";
td:nth-of-type(2):before content: "Last Name";
td:nth-of-type(3):before content: "Job Title";
td:nth-of-type(4):before content: "Favorite Color";
td:nth-of-type(5):before content: "Wars of Trek?";
td:nth-of-type(6):before content: "Secret Alias";
td:nth-of-type(7):before content: "Date of Birth";
td:nth-of-type(8):before content: "Dream Vacation City";
td:nth-of-type(9):before content: "GPA";
td:nth-of-type(10):before content: "Arbitrary Data";
</style>
</head>
<body>
<div class="custom-accordiontable">
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
【问题讨论】：
据我所知，您的语法是有效的 scss / less 但不是有效的 css，纯 css 中没有嵌套，您应该使用 npm、ruby 或许多其他工具进行编译以从中获取有效的 css它 @Chandeep 我已经编辑了我的答案，以帮助您在使用纯css 和 media queries 时修改结构。快乐编码。
【参考方案1】：
因为您要在父 div 元素中添加一个类 custom-accordionable
当你在做 css 时，你必须每隔 table,tr,th,td 传递那个父元素类。
这是一个最好的例子：（另外，当您进行媒体查询时，css 类应该在媒体查询标签内才能工作。）
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)
/* Force table to not be like tables anymore */
.custom-accordiontable table, .custom-accordiontable thead, .custom-accordiontable tbody, .custom-accordiontable th, .custom-accordiontable td, .custom-accordiontable tr
display: block;
/* Hide table headers (but not display: none;, for accessibility) */
.custom-accordiontable thead tr
position: absolute;
top: -9999px;
left: -9999px;
.custom-accordiontable tr border: 1px solid #ccc;
.custom-accordiontable td
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
.custom-accordiontable td:before
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
/*
Label the data
*/
.custom-accordiontable td:nth-of-type(1):before content: "First Name";
.custom-accordiontable td:nth-of-type(2):before content: "Last Name";
.custom-accordiontable td:nth-of-type(3):before content: "Job Title";
.custom-accordiontable td:nth-of-type(4):before content: "Favorite Color";
.custom-accordiontable td:nth-of-type(5):before content: "Wars of Trek?";
.custom-accordiontable td:nth-of-type(6):before content: "Secret Alias";
.custom-accordiontable td:nth-of-type(7):before content: "Date of Birth";
.custom-accordiontable td:nth-of-type(8):before content: "Dream Vacation City";
.custom-accordiontable td:nth-of-type(9):before content: "GPA";
.custom-accordiontable td:nth-of-type(10):before content: "Arbitrary Data";
</style>
</head>
<body>
<div class="custom-accordiontable">
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
<td>Crimefighter Sorta</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
快速提示
[1]当您使用没有响应式的 css 时，您应该有一个名为 styles.css 的文件，并使用 link 标记将该样式链接到您的 head 标记内。
<head>
<link rel="stylesheet" href="styles.css">
</head>
2当您在响应模式下使用媒体查询进行一些修改时，请添加另一个名为 media.css 的文件，以便仅在媒体查询中分隔您的样式。
<head>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="media.css">
</head>
在您的媒体文件中，这应该只调用媒体查询和您想要修改的某些宽度。
这里有几个例子：
@media only screen and (max-width: 1024px)
// do some css modification here...
@media only screen and (max-width: 600px)
// do some css modification here...
这样您就可以拥有更简洁的代码，而不是将所有样式都放在style 标记内的html 文档中。
【讨论】：
阿拉日。项目清除哈哈以上是关于在类元素下给出 CSS 响应代码时不起作用的主要内容，如果未能解决你的问题，请参考以下文章