阿特我自己
[email protected]
Hello WvT
CSS 基础
CSS 基础

基本规则语法

selectorlist {
property: value;
[more property:value; pairs]
}

选择器

元素选择器

元素选择器直接选择一个元素
例如 p {}

类选择器 .

类选择器会选择一个具有指定类的元素

类选择器需要结合元素选择器一起使用
例如 p.bodytext {} 代表选择具有 bodytext 类的 p 元素

元素可以使用通配符(*)代替,表示选择所有具有该类的元素,例如 .redtext {}

通配符可以被省略,例如 .redtext {}

类选择器还可以选择同时具有多个类的元素,只需要追加在后面即可,例如 .redtext.bigtext {}

ID 选择器 #

ID 选择器可以选择一个指定 ID 的元素

与类选择器相同,ID 选择器也需要与元素选择器结合使用,可以使用通配符并允许省略

ID 选择器使用 井号(#) 连接,例如 p#article {}  *#article {}

不允许选择同时具有多个指定 ID 的元素,因为 ID 是唯一指定的

属性选择器 []

属性选择器可以选择具有指定属性的元素

属性选择器需要与元素选择器结合使用,例如 p[disable] {}
元素可以用通配符代替且可以省略

如果需要选择同时具有多个属性的元素,将其他属性追加至后面即可,例如 p[disable][hidden] {}

此外,还可以指定属性的值即匹配方式

[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

后代选择器 ‘ ‘

后代选择器会选择指定元素的所有指定后代元素

后代选择器使用空格分隔,左边是祖先元素,右边是后代元素

例如 ul[aaa] li.bbb {}

子元素选择器 >

子元素选择器会选择指定元素的所有子元素,与后代选择器相同,使用 > 隔开

相邻兄弟选择器 +

相邻兄弟选择器会选择紧接在另一个元素后的元素,而且二者有相同的父元素

使用 + 隔开,例如 h1 + h2 {} 选择紧贴着 h1 的同级 h2 元素

选择器分组 ,

将多个选择器用逗号隔开,可以让它们指定同一个样式块

例如 p, button[red], #aaa { color=red }

伪类 :

伪类用于向某些选择器添加特殊的效果,例如设定当鼠标悬停在按钮上时,按钮的效果

使用 : 将其他选择器与伪类隔开。例如 a[hover-red] : hover { color: red;}

伪元素 :

伪元素用于向某些选择器设置特殊效果,与伪类格式相同

例如 first-line 伪元素用于向文本的首行设置特殊样式

赞赏

发表评论

textsms
account_circle
email

Hello WvT

CSS 基础
基本规则语法 selectorlist { property: value; [more property:value; pairs] } 选择器 元素选择器 元素选择器直接选择一个元素 例如 p {} 类选择器 . 类选择器会选择一个具有…
扫描二维码继续阅读
2019-09-16


没有激活的小工具