Web前端新人之CSS样式选择器

时间:2023-03-08 17:10:28

最近在学习css样式。那么我就想先整理一下css样式的选择器

规则结构:

每个规则都有两个基本部分:选择器和声明块。声明块由一个或者多个声明组成,每个声明则是一个属性—值对(property-value)

1、元素选择器

*      通用元素选择器,匹配任何元素  *{margin:0;padding:0};

x      标签选择器  h1{color:#000},p{color:#000};

.info   class选择器  .info{background-color:red};

#target  ID选择器  #target{font-size:15px};

2、选择器分组

x,y    多元素选择器  x,y{font-weight:bold};

x y    后代选择器   x y{display:inline};

x>y    子元素选择器  x>y{color:#333};

x+y    相邻元素选择器 x+y{color:#ddd};

说明:

还有个更为高级的CSS选择器模块,早在CSS2完成之后就发布了。其中包含更多的部分值属性选择器又称之为“子串匹配属性选择器”。

3、子串匹配属性选择器

[x^=“y”]  选择属性以x开头的y的所有元素;
[x$=“y”]  选择属性以x结尾的y的所有元素;
[x*=“y”]  选择属性以x包含子串的y的所有元素;

4、伪类选择器

:link   指示为超链接(有一个href属性)并指向一个未访问地址的所有锚链接。

:visited  指示为已访问的地址超链接所有的锚链接

5、动态伪类

:focus  指示为当前拥有输入焦点的元素。也就是可以接受键盘输入或者可以以某种方式激活的元素;

:hover  指示为鼠标指针停留在某个元素上。例如鼠标停留在超链接上。字体会由黑色变为红色;

:active  指示为被用户输入激活的元素。例如鼠标指针在超链接上后。当用鼠标点击这个链接后。就会激活这个:active