CSS list-style-type 属性
# 实例
设置一些不同的列表样式:
# 无序列表实例
ul.circle {list-style-type: circle} | |
ul.square {list-style-type: square} |
# 有序列表实例
ol.upper-roman {list-style-type: upper-roman} | |
ol.lower-alpha {list-style-type: lower-alpha} |
设置一些不同的列表样式:
ul.circle {list-style-type: circle} | |
ul.square {list-style-type: square} |
ol.upper-roman {list-style-type: upper-roman} | |
ol.lower-alpha {list-style-type: lower-alpha} |
在 css 中,list-style-type 属性是使用来设置列表项标记的类型,在有序列表和无序列表中经常都会使用该属性。
目前,所有主流浏览器都支持 list-style-type 属性,但是任何版本的 Internet Explorer(包括 IE8)都不支持属性值 "decimal-leading-zero"、"lower-greek"、"lower-latin"、"upper-latin"、"armenian"、"georgian" 或 "inherit";
如果需要同时设置多个列表属性,可以使用 list-style 属性,list-style 属性可以在一个声明中同时设置 list-style-type(列表项标记的类型), list-style-position(何处放置列表项标记), list-style-image(图像来替换列表项的标记)属性;
选择器 | 示例 | 示例说明 |
---|---|---|
:checked | input:checked | 选择所有选中的表单元素 |
:disabled | input:disabled | 选择所有禁用的表单元素 |
:empty | p:empty | 选择所有没有子元素的 p 元素 |
:enabled | input:enabled | 选择所有启用的表单元素 |
:first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
:in-range | input:in-range | 选择元素指定范围内的值 |
:invalid | input:invalid | 选择所有无效的元素 |
:last-child | p:last-child | 选择所有 p 元素的最后一个子元素 |
:last-of-type | p:last-of-type | 选择每个 p 元素是其母元素的最后一个 p 元素 |
:not(selector) | :not(p) | 选择所有 p 以外的元素 |
:nth-child(n) | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素 |
:nth-last-child(n) | p:nth-last-child(2) | 选择所有 p 元素倒数的第二个子元素 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有 p 元素倒数的第二个为 p 的子元素 |
:nth-of-type(n) | p:nth-of-type(2) | 选择所有 p 元素第二个为 p 的子元素 |
:only-of-type | p:only-of-type | 选择所有仅有一个子元素为 p 的元素 |
:only-child | p:only-child | 选择所有仅有一个子元素的 p 元素 |
:optional | input:optional | 选择没有 "required" 的元素属性 |
:out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
:read-only | input:read-only | 选择只读属性的元素属性 |
:read-write | input:read-write | 选择没有只读属性的元素属性 |
:required | input:required | 选择有 "required" 属性指定的元素属性 |
:root | root | 选择文档的根元素 |
:target | #news:target | 选择当前活动 #news 元素 (点击 URL 包含锚的名字) |
:valid | input:valid | 选择所有有效值的属性 |
:link | a:link | 选择所有未访问链接 |
:visited | a:visited | 选择所有访问过的链接 |
:active | a:active | 选择正在活动链接 |
:hover | a:hover | 把鼠标放在链接上的状态 |
:focus | input:focus | 选择元素输入后具有焦点 |
:first-letter | p:first-letter | 选择每个 <p> 元素的第一个字母 |
:first-line | p:first-line | 选择每个 <p> 元素的第一行 |
:first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
:before | p:before | 在每个 <p> 元素之前插入内容 |
:after | p:after | 在每个 <p> 元素之后插入内容 |
:lang(language) | p:lang(it) | 为 <p> 元素的 lang 属性选择一个开始值 |
display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是 W3C 提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。
Flex 是 Flexible Box 的缩写,意为 "弹性布局",用来为盒状模型提供最大的灵活性。设为 Flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。
我们在使用 vue 脚手架时,为了规范团队的代码格式,会有一个代码规范检测,如果不符合规范就会报错,有时候我们不想按照他的规范去写。这时我们需要关闭。这里有两种方法。
这个只能自己去覆盖样式,通过元素审查查看原代码
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { | |
background-color: #f0f7ff; | |
} |