uni-app x不支持属性选择器

uni-app x不支持属性选择器

示例代码：

<view class="tel" type="number"></view>

.tel[type=number]{ background-color: #f00; }

操作步骤：

  • 设置属性选择器

预期结果：

  • 支持属性选择器

实际结果：

  • 不支持

bug描述：

[plugin:uni:app-uvue-css] ERROR: Selector .tel[type=number] is not supported. uvue only support classname selector​


更多关于uni-app x不支持属性选择器的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

uniapp-x 不支持属性选择器哦 文档有说明支持和不支持的选择器 相关文档：https://doc.dcloud.net.cn/uni-app-x/css/#选择器

更多关于uni-app x不支持属性选择器的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app x 中，确实不支持 CSS 中的属性选择器（如 [type="text"]）。这是因为 uni-app x 使用的是基于 Vue 的框架，而 Vue 的样式处理机制并不完全支持所有的 CSS 选择器，尤其是属性选择器。

解决方案

如果你需要在 uni-app x 中实现类似属性选择器的功能，可以考虑以下几种方法：

  1. 使用类名或 ID 选择器： 通过为元素添加类名或 ID，然后使用类名或 ID 选择器来应用样式。

    <template>
  <view class="text-input">This is a text input</view>
</template>

<style>
.text-input {
  /* 样式 */
}
</style>

  2. 使用 :class 或 :style 动态绑定： 通过 Vue 的动态绑定功能，根据条件动态添加类名或样式。

    <template>
  <view :class="{'text-input': type === 'text'}">This is a text input</view>
</template>

<script>
export default {
  data() {
    return {
      type: 'text'
    };
  }
};
</script>

<style>
.text-input {
  /* 样式 */
}
</style>

  3. 使用 scoped 样式： 在 Vue 组件中使用 scoped 样式，可以确保样式只应用于当前组件，避免全局污染。

    <template>
  <view class="text-input">This is a text input</view>
</template>

<style scoped>
.text-input {
  /* 样式 */
}
</style>

  4. 使用 uni-app 提供的组件和样式： uni-app 提供了一些内置组件和样式，可以直接使用这些组件和样式来避免复杂的 CSS 选择器。

    <template>
  <uni-input type="text" placeholder="Enter text" />
</template>
回到顶部