web前端：选择器

作者:九幽无泪更新于： 2020-03-05 21:33:34

　　要使用css对html页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

　　HTML页面中的元素就是通过CSS选择器进行控制的。

　　CSS的基本选择器:优先级ID>类>标签

　　标签选择器：直接使用标签名字来选择

　　类选择器：通过标签上面的class属性名称来获取一类标签css中通过.类名来设置

　　ID选择器：通过标签上面的ID属性名称来获取单一的标签css中通过#id名来设置

　　注意：ID属性具有唯一性，同一个HTML页面不可以出现相同的id名字

　　属性选择器：

　　选择器[属性名]{}选择具有某一个属性的一类标签

　　例：p[class]{color:red;}表示选择具有class属性的p标签，设置文字颜色是红色

　　选择器[属性名=属性值]{}选择具有某一属性，并且规定了属性值的一类标签

　　例：p[class=a1]{color:blue;}表示选择具有class属性并且属性值是a1的所有p标签，设置文字颜色是蓝色

　　选择器[属性名^=值]选择具有某一属性，并且属性值以什么值作为开头

　　例：p[class^=a]{color:green;}表示选择具有class属性，并且属性值以a开头的所有p标签，设置颜色为绿色

　　选择器[属性名$=值]选择具有某一属性，并且属性值以什么值作为结尾

　　例：p[class$=a]{color:green;}表示选择具有class属性，并且属性值以a结尾的所有p标签，设置颜色为绿色

　　选择器[属性名*=值]选择具有某一属性，并且属性值包含某一个内容

　　例：p[class*=a]{color:green;}表示选择具有class属性，并且属性值中带有a的所有p标签，设置颜色为绿色

　　伪类选择器：

　　a:link表示超链接没有被访问前的状态

　　a:visited表示超链接被访问后的状态

　　a:hover表示鼠标悬浮在超链接上的状态

　　a:active表示鼠标按下但并没有释放是的状态

　　注意a:hover必须位于a:link和a:visited之后，a:active必须位于a:hover之后

　　可靠的顺序是：l(link)ov(visited)eh(hover)a(active)te,即用喜欢(love)和讨厌(hate)两个词来概括

　　li:first-child表示选择父元素下的第一个子元素，并且该元素是li

　　li:last-child表示选择父元素下的最后一个子元素，并且该元素是li

　　li:nth-child(n)表示选择父元素下的第n个元素，并且该元素是li

　　li:first-of-type表示选择父元素下出现的第一个li标签

　　li:last-of-type表示选择父元素下出现的最后一个li标签

　　li:nth-of-type(n)表示选择父元素下的第n个li标签

　　odd代表奇数

　　even代表偶数

　　2n代表偶数

　　2n+1代表奇数

　　3n+1代表隔两行

　　要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。