Question

我的CSS代码

[class*="nav"] {width: 100%; }
    @media only screen and (min-width=1024px) {
    .nav {width= 38%;}
}

是否可以将[class*="nav"]更改为[div*="nav"]

Answer 1

[class*="nav"]查找包含类nav的所有元素或包含名称nav的类。

参见示例（两个div都采用css样式）

[class*="nav"] { height:100px;width:100px;background:red;margin:10px 0}

<div class="nav-bar"></div>
<div class="nav"></div>

[div*="nav"]不存在。 nav是一个HTML标记，就像div一样。它们是两个不同的标签

div { width:100px;height:100px;background:red;}
nav { width:100px;height:100px;background:blue;}

<div></div>
<nav></nav>

<强>解：

1 如果您只想选择nav代码，请使用

nav { /*styles here*/ }

2 如果您只想选择包含div类的nav代码，请使用

div[class*="nav"] {/*styles here*/}

有用的链接

Answer 2

我认为您的语法可能就是问题所在。尝试：

div[class*="nav"] {
   width: 100%; 
}
// You could also just use .nav above, depending on how your elements are named.
@media only screen and (min-width: 1024px) {
 .nav {
   width: 38%;
 }
}

Answer 3

如果我理解你是正确的，[class*="nav"]是属性选择器，而类是要定位的属性的名称，在本例中为class，所以如果你希望这适用于div，而不是任何其他类型的元素，在其类中包含nav，您确实喜欢这个

＆＃13;

[class*="nav"] {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 10px;
  background: red;
  margin-bottom: 10px;
}

@media only screen and (min-width: 300px) {
    div[class*="nav"] { width: 38%; }
}

＆＃13;

<div class="nav-bar">A div</div>
<span class="nav-item">A span</span>

＆＃13;

注意，我已将@media规则中的等号=更改为颜色:

是否可以在media-query中将class更改为div

3 个答案: