css-选择器相关
1.选择器是什么?
在html学习当中,我们写完了html页面的时,我靠,感觉不对劲,别人的一个按钮都能花样奇多,我们却只是使用input的type="button"来实现按钮这个显示效果,但并没有美化效果,这时不必惊慌,刚出炉的html代码,就像素颜的她,需要化妆,才能映入眼帘,化妆得一步一步化,先在哪里点眉笔,再在哪里,都是有选择性,但是css它不知道你化哪里,这时候我们就需要对它说先去哪儿给我装饰,再去哪儿.接下来我们看下怎么指定它去化妆(渲染页面)
2.css基础选择器如下4类
id选择器,class选择器(类选择器),标签选择器以及通配符选择器(因为通配符选择器会遍历文档所有元素,在实际开放中,需要酌情使用),在html当中,有4个通用属性,id,class,title,style,通用属性就是在所有标签中都能设置这些属性,id选择器就是在标签的开始当中设置id名,class选择器就是在开始标签中设置class属性以及属性值
1 /* 标签选择器*/ 2 标签名{ 3 属性名:属性值; 4 属性名:属性值; 5 } 6 /*id选择器*/ 7 #id名{ 8 属性名:属性值; 9 属性名:属性值; 10 } 11 /*class选择器*/ 12 .class名{ 13 属性名:属性值; 14 属性名:属性值; 15 }
3.关联选择器
关联选择器,可以认为是关系联系选择器.因为html当中,我们仅仅依靠基础选择器去选择,并不能实现选择所有我们需要选择的,这时候需要搭配关系选择器去处理相对复杂的选择需求.
1 /*关联选择器*/ 2 s1 s2{ ... } 3 /*匹配s1里面所有的后代s2*/ 4 s1 > s2{ ... } 5 /*匹配s1里面所有的儿子s2*/ 6 s1 + s2{ ... } 7 /*匹配s1后一个兄弟s2*/ 8 s1 ~ s2{ ... } 9 /*匹配s1后面所有的兄弟s2*/
4.属性选择器
1 /* 2 属性选择器 3 s :需要匹配的标签 4 attr:属性 5 value :属性值 6 */ 7 s[attr]:匹配含有attr属性的s标签 8 s[attr="value"]:匹配attr=value的s标签 9 s[attr="value"]:匹配attr含有value(分词)的s标签 10 s[attr*"value"]:匹配attr中含有value的s标签 11 s[attr^="value"]:匹配attr以value开头的s标签 12 s[attr$="value"]:匹配attr以value结束的s标签
5.伪类选择器
1 /*常用伪类选择器*/ 2 3 /*鼠标悬停时触发,当鼠标悬停s1上,则触发css样式*/ 4 s1:hover{ ... } 5 /*当获取焦点时触发,当s1获取焦点,则触发css样式,多用于input标签当中*/ 6 s1:hocus{ ... } 7 8 /*首先找到s1的父级元素,然后找到第一个子元素,看是不是s1,是就给后面的css样式给s1*/ 9 s1:first-child{ ... } 10 /*首先找到s1的父级元素,然后找到最后一个子元素,看是不是s1,是就给后面的css样式给s1*/ 11 s1:last-child{ ... } 12 /* 13 这里的num可以为三种数据类型 14 1.数字:1,2,3,4就是s1父级元素的第几个子元素 15 2.字母:odd奇数,even偶数 16 3.一元二次方程:n+2,2n+1,n等于0开始计算 17 */ 18 s1:nth-child(num){ ... }
/* first-child与first-of-type的区别
s:first-child{ ... }:先寻找s1父级,然后再按顺序找元素,第一个是s元素就触发 s:first-of-type{ ...}:先找到s1父级,然后看s元素中的第一个 */