对于一个正在逆战班学习的小白来说,css选择器大致有ID选择器、CLASS选择器(类选择器)、标签选择器(TAG选择器)、群组选择器(分组选择器)、通配选择器、层次选择器和伪类选择器等等选择器。
一.ID选择器
- 在一个页面中,ID可以出现多次,但ID是具有唯一值的;例:
2.命名规范:
常规:leftsidebar
驼峰式:leftSideBar
下划线式: left_side_bar
短线式:left-side-bar ( W3C推荐的写法 )
还有少数人喜欢这样去写:left-side_bar
二.CLASS选择器(类选择器)
1.class选择器是可以复用的,复用代码的能力非常强;这与ID选择器是有很大区别的。
2.可以添加多个class样式,通过空格隔开。
3.命名规范:
与ID选择器的命名规范相同,常规式、驼峰式、下划线式、短线式及少数人的写法。
4.在多个样式的时候,样式的优先级根据css决定,而不是class属性中的样式决定。
三.标签选择器(TAG选择器)
标签选择器,一般使用的地方是在去掉某一些标签的默认样式。例:
四.群组选择器(分组选择器)
可以将不同的标签,但css样式相同的写在一起。
五.通配选择器
该选择器一般使用的场景:需要去掉所有标签的默认样式。
六.层次选择器
- 后代 : M N:找M下的所有N
- 父子 : M > N: 找M下的子标签N
- 兄弟 : M ~ N,相邻兄弟: M + N
特点: ~ 是找M标签下面的所有N标签 - 是找M标签下相邻的N标签
无论用~ + 都是找下面的兄弟,上面的兄弟是不会有任何作用的。
七.伪类选择器
1.CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候,用伪类来添加。
主要这四个伪类是针对a标签的
:link 访问前的选择器 ( 只能加给a标签 )
:visited 访问过后的选择器 ( 只能加给a标签 )
:hover 鼠标移入的选择器 ( 所有标签都能添加 )
:active 鼠标按下的选择器 ( 所有标签都能添加 )
2.注意:
a标签如果四个伪类都添加的话,那么是有顺序的 L V H A
一般的网站都只会设置a{ color:red;} a:hover{ color:blue;}
3.其他伪类选择器:
:before :after ( 特点,不用单独在创建一个标签,就可以给文本添加样式 )
input:checked{ width:100px; height:100px;}
input:disabled{ width:100px; height:100px;}
当标签能够获取焦点的时候,会触发 :focus
input:focus{ background:Red;}
4.结构性伪类选择器:
父元素下的第几个子元素 :nth-of-type()、 :nth-child()
()中可以添加的值:number(第几个,从1开始) | n(表示一个0到无穷大的数)
代码与效果如下:
父元素下的第一个子元素 :first-of-type、 :first-child
代码与效果如下:
父元素下的最后一个子元素 :last-of-type、 :last-child
代码与效果如下:
父元素下唯一的一个子元素 :only-of-type、 :only-child
代码与效果如下: