NotionNext BLOG
*
hover
>
active
+ ~
visited
ㅤ
focus
ㅤ
target
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
 
选择器
权重值
示例
通用选择器
0
*
标签选择器
1
p div
伪元素选择器
1
p:first-child div::before
类选择器
10
.ew-col .ew-row
属性选择器
10
[src] [type="password"]
伪类选择器
10
a:hover div:focus
ID选择器
100
#user #container
 
和后代选择器相比，子选择器在结构控制上会更加精确，在处理一些html代码结构比较复杂，担心会破坏其它同名元素的样式时可以派上用场。虽然说这个选择器在选择精度上更高，但也应该避免滥用。
如之前后代选择器的示例“section p span”，在那个页面所有的section标签里就只有一处出现了span标签，而且按目的来说只要在section里出现的span我们希望使用同一个样式，也就没有必要在中间写上p选择器了，可以直接写成“section span”就可以了，而子选择器就必须要写成“section > p > span”，后者的写法增加了一定代码量，也会增大权重值，不利于后续的维护。
font-weight
font-size
text-align
vertical-align
text-indent
ㅤ
normal
px
left
baseline
2em
ㅤ
bold
em
center
top
40px
ㅤ
bolder
%
right
middle
30pt
ㅤ
lighter
rem
justify
bottom
ㅤ
ㅤ
100 ~ 900
pt (1px = 0.75pt)
ㅤ
sub
ㅤ
ㅤ
ㅤ
pc
text-align-last
super
ㅤ
ㅤ
ㅤ
mm
ㅤ
text-top
ㅤ
ㅤ
ㅤ
cm
ㅤ
text-bottom
ㅤ
ㅤ
ㅤ
in
ㅤ
90%
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
font ~-family
text-decoration ~-line ~-style ~-color ~-skip
text-transform
text-shadow
line-height
ㅤ
ㅤ
none
none
hoff-shadow
ㅤ
ㅤ
ㅤ
overline
capitalize
voff-shadow
ㅤ
ㅤ
“宋体”、“微软雅黑”、“黑体”、“楷体”、“幼圆”等
line-through
uppercase
blur
ㅤ
ㅤ
“Arial”、“Helvetica”、“Tahoma”、“Verdana”、“Lucida Grande”、“Times New Roman”、“Georgia”等
underline
lowercase
color
ㅤ
ㅤ
 
border边框样式
在CSS中，border属性是一个简写属性，用于设置元素的边框样式。border可以指定边框的宽度、样式和颜色。下面是border属性的主要参数：
  1. 边框宽度（Border Width）：
      • 例如：1px, 2px, 0.5em 等。
      • 也可以使用关键字：thin, medium, thick。
  1. 边框样式（Border Style）：
      • none：无边框。
      • solid：实线边框。
      • dotted：点状边框。
      • dashed：虚线边框。
      • double：双线边框。
      • groove：凹槽效果（视觉效果取决于边框颜色）。
      • ridge：脊状效果（与groove相反的视觉效果）。
      • inset：内嵌效果（使元素看起来像是嵌入页面）。
      • outset：突出效果（与inset相反的视觉效果）。
  1. 边框颜色（Border Color）：
      • 可以是颜色名称（如 red, blue）。
      • 也可以是十六进制值（如 #FF0000）。
      • 或者是RGB、RGBA、HSL、HSLA值（如 rgb(255, 0, 0), rgba(255, 0, 0, 0.5), hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.5)）。
你可以将这些参数组合使用，如 1px dashed red（1像素宽的红色虚线边框）。在使用时，参数的顺序通常是：宽度、样式、颜色。如果省略了其中某个参数，浏览器会使用默认值。