HTML 列表中的dl,dt,dd,ul,li,ol区别及应用
1、无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于 <ul>标签。每个列表项始于 <li>。
2、有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。
有序列表始于 <ol>标签。每个列表项始于 <li>标签。
3、定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl>标签开始。每个自定义列表项以 <dt>开始。每个自定义列表项的定义以 <dd>开始。
4、不同类型的有序列表
本例演示不同类型的有序列表。
5、这就是我们常用到的HTML列表标签
以上所有的列表项内部可以使用段落、换行符、图片、链接以及其他列表等
CSS优先级是根据等级的值相加得出选择器的权重来决定的。
!important >行内样式 >ID >类、伪类、属性 >标签名 >继承 >通配符
计算权重方式:
从图上看讲权重分为:
1. 第一等:代表内联样式,如: style=””,权值为1000。
2. 第二等:代表ID选择器,如:#content,权值为0100。
3. 第三等:代表类,伪类和属性选择器,如.content,权值为0010。
4. 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6. 继承的样式没有权值。
当权重一样时遵循准则:
1. 选择器越 具体 优先级越 高
2. 在同一个级别的情况下, 最后 指定的规则优先级就越 高 ,也就是我们通常说的就近原则;
权重计算例子:
1. li ->0 0 0 1 权重为 1
2. h1 + *[rel=up] ->0 0 1 1 这个相邻选择器由标签选择器与属性选择器组成,属性选择器为10,因此权重为11
3. ul ol li.red ->0 0 1 3 权重为13
4 li.red.level ->0 0 2 1 权重21
1. !important (width: 100% !important)
2. 行内样式 (style="width:100%")
3. id选择器 (#myIdName)
4. class选择器 (.myClassName)
5. 标签选择器 (div,h1,p)
1. 使用 " >>>" 符号,这种方式主要是用于普通css,方式为:
外层 >>>第三方组件样式: .wrapper >>>.swiper-pagination { color: #eee }
2. 使用 "/deep/" ,这种方式主要用于sass或less,方式为:
外层 /deep/ 第三方组件样式: .wrapper /deep/ .swiper-pagination { color: #eee }