【11】css 基本功:引入方式及选择器相关

  • 2020 年 1 月 14 日
  • 筆記

vue 组件开发,必须熟悉基本的 css 知识及技巧。

目录    1、原生 css 的三种引用方式  2、组件开发中的选择器      2.1、深度作用选择器      2.2、不使用类型选择器  3、css 选择器  

1、原生 css 的三种引用方式

内联

将 css 样式代码直接嵌入在style属性中。

<p style='color:red;'>文字颜色为红色</p>  

嵌入

将style代码块嵌入在head或body内。

<head>      <style type='text/css'>          span{              font-size:18px;              color: red;          }      </style>  </head>  

外部

将css样式定义在单独的css文件中,然后使用link标签在页面内引入。

<link rel="stylesheet" href="common.css" type="text/css">  

这是原生的方式。在工程化组件开发中,样式有另外的规则和技巧。

2、组件开发中的选择器

2.1、深度作用选择器

在启用了scoped的样式内,可以使用>>>跨越选择更深的子孙组件。

例如:

<style scoped>  .a >>> .b { /* ... */ }  </style>  

会编译成:

.a[data-v-f3f3eg9] .b { /* ... */ }  

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下可用 /deep/ 或 ::v-deep 操作符取而代之。

2.2、不使用类型选择器

当在元素选择器在scoped style样式块之内时,例如:

p { color: red }  

执行效率会慢很多倍。如果使用 类选择器 或者 id选择器 取而代之,比如:

.example { color: red }  

性能影响就会消除。

3、css 选择器

1、元素选择器

p{   color: #00CCFF;  }  

2、id选择器

#red {   color:red;  }  <li id="red">香蕉</li>  

3、类选择器

应用最多的一类选择器。

.fo{     color: #00AA88;  }  <ul class="fo">  </ul>  

4、元素+类选择器

p.important {color:red;}  <p class="important"> 这个字体颜色为红色</p>  

5、多个类选择器

.important {font-weight:bold;}  .warning {font-style:italic;}  .important.warning {background:silver;}  <p class="important warning">  该字体显示为加粗、斜体以及背景色为银色的效果  </p>  

显示为所有类的样式效果。

6、属性选择器

h2[title]  {  color:red;  }  <h2 title="Hello world">Hello world</h2>  

为拥有指定属性的元素设置样式。scoped css 模块化即是通过添加随机属性名称实现的。

还可以精准查找属性与属性值:

p[class="important warning"] {color:red}  <p class="important warning">字体颜色为红色</p>  

须同时满足条件,具有class属性,且属性值为xx。

7、后代选择器

依据元素的上下文位置关系确定:

li strong {      font-style: italic;      font-weight: normal;    }  <li><strong>苹果</strong></li>  

strong在li之后,strong为li的后代。

8、子元素选择器

h1 > strong {color:red;}  <h1>This is <strong>very</strong>  <strong>very</strong> important.</h1>  

两个very均为红色。该选择器选择作为子元素的元素。

9、兄弟选择器

选择相邻的另一元素,二者有相同父元素。

h1 + p {margin-top:50px;}  <h1>This is a heading.</h1>  <p>和h1有距离</p>  <p>This is paragraph.</p>  

效果:

紧随的第一个p有样式效果。

10、:last-child 选择器

指定属于其父元素的最后一个子元素的样式。

p:last-child{   background:#ff0000;  }  

p:last-child 等同于 p:nth-last-child(1)。

11、:first-child 选择器

指定属于其父元素的首个子元素的样式。

p:first-child{   background-color:yellow;  }  

例如:

p:first-child i {  background:yellow;  }  

选择每个 <p> 中的每个 <i> 元素并设置其样式,其中的 <p> 元素是其父元素的第一个子元素。

参考链接

  • https://cloud.tencent.com/developer/article/1514516
  • https://vue-loader.vuejs.org/zh/guide/scoped-css.html
  • https://www.jianshu.com/p/e56f07f8da62
  • http://w3school.com.cn/cssref/selector_last-child.asp

专栏列表

基于 vue+go 如何快速进行业务迭代?