class选择器

.className

id选择器

#idName

后代选择器

空格name

子物体选择器

>name

交集选择器

name1name2

并集选择器

name1，name2

兄弟选择器

相邻兄弟选择器（与name1相邻的name2被选中）：name1+name2
通用兄弟选择器（所有name2被选中）：name1~name2

序选择器

序选择器：name1：first-child(选择第一个）
name1:first-of-type（选择同级别同类型第一个）

1.同级别的第几个

:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签
注意点: 不区分类型

2.同类型的第几个

:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签

3.选择指定某个

:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增

属性选择器

[attribute]根据指定的属性名称找到对应的标签, 然后设置属性
[attribute=value]找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性

1.属性的取值是以什么开头的

[attribute|=value] CSS2写法
[attribute^=value] CSS3写法
两者之间的区别:
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开

2.属性的取值是以什么结尾的

[attribute$=value] CSS3写法

3.属性的取值是否包含某个特定的值得

[attribute~=value] CSS2写法
[attribute*=value] CSS3写法

两者之间的区别:

CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到

通配符选择器：给当前界面上所有的标签设置属性

*{
属性:值;
}

伪元素选择器

伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素

标签名称::before{
    属性名称:值;
}
给指定标签的内容前面添加一个子元素

标签名称::after{
    属性名称:值;
}

a标签的伪类选择器

a标签的伪类选择器专门用来修改a标签不同状态的样式

格式

  • 标签名字:link 修改从未被访问过状态下的样式
  • 标签名字:visited 修改被访问过的状态下的样式
  • 标签名字:hover 修改鼠标悬停在a标签上状态下的样式
  • 标签名字:active 修改鼠标长按状态下的样式

注意点

  • a标签的伪类选择器可以单独出现也可以一起出现
  • a标签的伪类选择器如果一起出现, 那么有严格的顺序要求
  • 如果默认状态的样式和被访问过状态的样式一样, 那么可以缩写
  • 在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面
  • 在企业开发中和a标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)
  • 在企业开发中和a标签文字/背景相关的都写在伪类选择器中

参考资料

「李南江」HTML+CSS 基础入门教程全套视频|HTML5+CSS3基础+案例

赏