1.选择器

1.通配选择符: *

 

2.元素选择符: body、h1、p

 

3.群组选择符: h1,h2,h3,p（“,”分隔）

 

4.关系选择符: 　  E F　　　　E>F　　　　　　　　　　　　　　(css1/2/2/3 都作用于F元素)

　　　　　　　   E+F　　　  E~F

 

 

 

 

5.id 及 class选择器（id：锚点用“name”）

 

6.伪类选择器:　　

E:link	E:visited	E:hover	E:active	“爱恨原则”（LoVe/HAte）
E:focus	E:lang(zh-cn)	E:not(s)	E:root
E:first-child	E:last-child	E:nth-child(n)	E:nth-last-child(n)	E:only-child
E:first-of-type	E:last-of-type	E:nth-of-type(n)	E:nth-last-of-type(n)	E:only-of-type
E:empty	E:checked	E:enabled	E:disabled	E:target

　　　　　　　　　　　　　

 

 :focus-within  自己及子元素聚焦

7.属性选择符:

　　　　　　　　E[att]　　　　　　E[att=”val”]　　　　  E[att~=”val”]　　　　E[att|=”val”]

　　　　　　　　E[att^=”val”]　　　E[att$=”val”]　　　　E[att*=”val”] 　　　　

 

8.伪对象选择符:

E:first-letter/E::first-letter	E:before/E::before	E::placeholder
E:first-line/E::first-line	E:after/E::after	E::selection

 

 

 

9.深入选择器

::v-deep(vue专用)）   

/deep/ .child-class {}

>>> (适用于css

/deep/（适用于less或scss）、         文档

::v-deep ::-webkit-scrollbar{width:8px;}
::v-deep ::-webkit-scrollbar-thumb{width:8px;border-radius: 4px;}/* 滚动条宽度 */
::v-deep ::-webkit-scrollbar-track{background-color: transparent;}/* 滚动条轨道颜色 */
::v-deep ::-webkit-scrollbar-thumb{background: #E1E4EB;}/* 滚动条颜色 */
::v-deep ::-webkit-scrollbar-thumb:hover {background-color: #ddd;}/* 鼠标移动到滚动条上后显示的颜色 */
::v-deep ::-webkit-scrollbar-thumb:active {background-color: #ddd;}/* 点击时滚动条的颜色 */

 

 

命名规范：https://bemcss.com/

以妓会友