网页基础之css选择器和优先级的介绍

html-css012

网页基础之css选择器和优先级的介绍,第1张

通用选择器 *

类别选择器（.class）

ID选择器（#id）id值不允许重复，其指向是唯一的

元素选择器（element）

后代选择器（element element）包含元素下面所有的子元素孙子元素等

直接子选择器（element >element）

群组选择器（element,element）

相邻兄弟选择器（element + element）例如：

这里是给 div1 的后面的同胞元素 div2 设置的样式。

再如 div + p ， 选择紧接在<div>之后的所有<p>元素

伪类选择器（:link :visited :active :hover）

例如 a:link , a:visited, a:active, a:hover

选择器的优选级 可用一个公式总结 # >class >标签。例如：

上述例子中，选择器的优先级为 #div1 #op1 >#op1 >#div1 p >.op >div p >p。注意：该例子比较简单，基本看不出具体的效果，只要记住以上的公式 #div >.div >div

本章中主要针对选择器以及其优先级做了具体的介绍，记住一个选择器优先级的公司，即 id 先，类其次，元素居后

最近项目的原型设计中有这样一个需求，在表格中插入一个步骤条，先贴一张完成的图片，效果如下：

    开始做的时候，查看了一下element官方文档（传送门： Element官方文档 ），官方文档中只有一些比较基本的样式，例如：描述的步骤条、带图标的步骤条等，这里就不一一赘述了。

    首先，在表格中加入插槽，插入步骤条组件

使用表格的cellStyle属性，设置步骤条一列对齐方式为左

    在步骤条组件上绑定class，根据当前列中步骤条进度分别给“已完成”、“进行中”、“未开始”三种状态的步骤条赋上对应的类样式，js方法如下：

css样式如下， 切记修改element组件原样式的时候需要建立一个style标签，去掉scoped，并在element组件外层用一个父元素包含起来，缺前者设置会不生效，缺后者会影响全局样式。

这里我是将步骤条原样式中的数字颜色改成透明，分别设置三种状态的圆圈大小及背景色，然后用.el-step__icon类设置定位，用 .el-step.is-horizontal .el-step__line设置步骤条横线的粗细及位置，根据具体表格的对应列宽高来设置就好啦。