我可以使用特定参数定位 CSS 样式吗？答案

【问题标题】：Can I target CSS styles with specific parameters?我可以使用特定参数定位 CSS 样式吗？
【发布时间】：2014-03-22 02:45:47
【问题描述】：

是否可以使用 CSS 的 @media 查询来使用从使用 mysql 的数据库中获取的参数来定位特定样式。我已经看到并使用它来根据屏幕尺寸定位不同的样式，但是我可以为数据库中的某些东西执行此操作吗？

CSS - 两种不同的布局

.div{
   width:100%;
   float:none;
}
.div_two{
   width:100%;
   float:none;
}
.div{
   width:50%;
   float:left;
}
.div_two{
   width:50%;
   float:left;
}

如您所见，两个 div（div 和 div_two）要么堆叠在一起，要么并排堆叠。但是我可以使用 php 从数据库中获取布局，然后决定应用 div 的方式。

$query = mysqli_query($con,"SELECT * FROM pages WHERE page = '$page'");
$results = mysqli_fetch_assoc($query);
$layout = $results['layout'];
$div = $results['div'];
$div_two = $results['div_two'];
echo '<div class="div">'.$div.'</div><div class="div_two">'.$div_two.'</div>';

自动整理页面布局的东西会大大简化事情（如果 PHP 可以做到的话），或者是将这个脚本添加到文档头部并创建单独的样式表的唯一方法每个布局？

if($layout == 1){
   echo 'style sheet 1';
}else if($layout == 2){
   echo 'style sheet 2';
}else{
   echo 'default style sheet';
}

我认为这种方法没有问题，但是在同一 CSS 文档中定位单个样式的更简洁的方法会更好。

【问题讨论】：

是的，也可以这样做......，或者在我看来，使用两个不同的样式表并根据要求调用它。

标签： php jquery html mysql css

【解决方案1】：

你可以在 body 上使用一个类，或者只是分开工作表。

在第一种情况下，你的 CSS 应该是这样的：

.type1 .div{
   width:100%;
   float:none;
}
.type1 .div_two{
   width:100%;
   float:none;
}
.type2 .div{
   width:50%;
   float:left;
}
.type2 .div_two{
   width:50%;
   float:left;
}

并且可以使用PHP来指定body类：<body class="<?php echo $selectedClass; ?>">

在另一种情况下，您将使用 PHP 来选择要加载的 CSS 文件：

if($layout == 1){
    $css = 'css1';
}else if($layout == 2){
    $css = 'css2';
}else{
    $css = 'default';
}

然后：<link rel="stylesheet" type="text/css" href="<?php echo $css; ?>.css">。

您选择的方法取决于工作表之间的差异量 - 如果只有几个，方法一是可以的，但如果您试图在每个工作表中显示完全不同的演示文稿，请使用方法二并制作为根据需要提供许多 CSS 文件（您可以考虑使用一个通用 CSS，而另一个将是特定的 CSS 之一）。

尝试让 CSS 代替 PHP 来驱动您的演示文稿外观。

【讨论】：

是的，没想过使用 body 类，但这样看起来肯定比拥有多个 CCS 文档更干净。我猜这种简单性更适合于帖子中的简单布局更改
是的，文件大小与文件数量之间总是存在争斗……而且几乎从来没有完美的解决方案。

【解决方案2】：

CSS 没有逻辑处理，它不会知道你要使用哪种布局。浏览器将简单地同时解释两种布局，并呈现优先的规则。

问题底部的代码 sn-p（根据您希望呈现的布局加载不同的样式表）将是执行此操作的方法。您可以使用 PHP 处理服务器端（在呈现页面时决定）或使用 Javascript 处理客户端（用户可以在布局之间切换而无需刷新页面）。

【讨论】：