<!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>通配符</title>

 <script src="https://unpkg.com/vue/dist/vue.js"></script>

 <style type="text/css">

     /* 重点看这里,选择ID以“container_”开头的元素 */

     [id^='container_']{

         background-color: darkseagreen;

     }

 </style>

 </head>

 <body>

 <div id="app">

   <div v-for="i in 10"><p v-bind:id="'container_'+i"> {{i}} </p></div>

 </div>

 <script>

 new Vue({

   el: '#app',

   data: {}

 })

 </script>

 </body>

 </html>

css 通配符选择器的更多相关文章

  1. CSS 1. 选择器

    1.css的介绍 CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方 ...

  2. CSS选择器之通配符选择器和多元素选择器

    1.通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器． 基本语法: *{margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0. 写一段ht ...

  3. 0009 CSS基础选择器（ 标签、类、id、通配符）

    typora-copy-images-to: media 第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用 ...

  4. css：选择器（标签、类、ID、通配符）

    1.css概述 主要的使用场景就是美化网页,布局页面 (1)html的局限性 它只关注内容的语义,只能做一些简单的样式,并且非常的臃肿和繁琐 (2)css对网页美化的作用 css是层叠样式表的简称,它 ...

  5. css笔记07：通配符选择器

    通配符选择器: * { margin:10px ;//默认四个位置参数全为零 margin-top:10px;//分别设置四个参数 margin-left:10px; margin-right:0px ...

  6. CSS选择器（通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器）

    通配符选择器  *   与任何元素匹配 派生选择器: 后代选择器(包含选择器):后代选择器可以选择作为元素后代的元素 A B    对A元素中的B元素应用样式 后代选择器中两个元素间的层次间隔可以是无 ...

  7. 【CSS系列-选择器优先级总结】

    转:http://www.cnblogs.com/dolphinX/p/3511300.html 容易被忽略CSS特性   CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各 ...

  8. css基本选择器

    CSS:层叠样式表 (Cascading Style Sheets) 结构层:HTML表现层: CSS行为层: DOM,JavaScript CSS语法结构:div{background:#f00;} ...

  9. CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、

    与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...

随机推荐

  1. vue遍历数组和对象的方法以及他们之间的区别

    前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组   1,使用vue数组变异方法 pop() 删除数组最后一 ...

  2. Selenium自动化测试 Verify

    Selenium 找了很久,没有发现有verify的方法,可是,有个时候要的是确认,而不是直接断言, 当然要在运行结束后能够得到确认的结果,于是写了下面的代码,给大家分享.     import ja ...

  3. npm run dev 启动错误：Module build failed: Error: No PostCSS Config found in:xxxxxxxxxxxxxx

    解决办法:在根目录新建postcss.config.js module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 versio ...

  4. 2019年度SAP项目实践计划

    2019年度SAP项目实践计划 一晃2018年过去了,而新的一年说来就来了. 对于新的一年,笔者也难免有所畅想.早在上个月下旬就开始制定新年的诸多计划,比如写作计划,比如人工智能学习计划,比如新年度旅 ...

  5. android.database.sqlite.SQLiteException: no such column: aaa (code 1): , while compiling: DELETE FROM users WHERE user_name=aaa解决办法

    在写安卓登录注册时注销按钮闪退发现: 这是因为此处错误: 因为用户名为字符串,不是整型,数据库查询要引号,少了引号查询不了,导致闪退 解决后成功运行 正确用法: 下次谨记,细节决定成败呀!

  6. ionic3 Toast组件

    html页面 <button ion-button color="dark" class="button-block" (click)="sho ...

  7. 18-10-31 Scrum Meeting 3

    1.会议照片 2.每人的工作 昨天完成的工作   1 制定配置 修改配置 查询配置这三个接口   2 3 获取单词对应的中文释义   4 完成测验的部分接口   5 后端对接计划的接口   6 剩余的 ...

  8. 【原】Java学习笔记009 - 阶段测试

    package cn.temptation; public class Sample01 { public static void main(String[] args) { // 1.需求:打印如下 ...

  9. LNMP时，出现502 Bad Gateway的错误提示

    因为工作需要,要在ubuntu中安装LNMP环境,在这里,php是最新版本php7.1.一切都进展得很顺利,安装完成后,在浏览器中输入http://127.0.0.1/info.php,出现了502 ...

  10. MySql 学习之路-高级1

    Mysql自学之路-高级1 目录: 1.CREATE DATABASE 创建数据库 2.CREATE TABLE 创建数据表 3.INSERT INTO SELECT 把一个表中的数据拷贝到另一个表中 ...