当前位置: 首页 > Web前端 > CSS

【前端学习】-选择器浅谈

时间:2023-03-31 12:46:28 CSS

对于一个前端er来说,选择器是日常生活中必须要接触的部分。本文主要讨论分类和选择它的一些技巧。【分类】1.基本选择器2.结构选择器3.伪类选择器4.伪元素5.属性选择器【说明】1.基本选择器(浏览器兼容)*通配符(可以匹配元素html元素中的所有元素)如:*{color:#000;}表示给页面所有元素加上#000的颜色值;E元素选择器(匹配特定标签)如:a{text-decoration:underline;}表示给页面所有a标签加下划线;#idID选择器(匹配页面的具体id)如:#my{color:#000}表示给pageid为my的元素添加#000的颜色值;.class类选择器(匹配page-具体类)如:.my{color:#000}表示给页面类为my的元素添加#000的颜色值;S1,S2组选择器(匹配ContainsS1,containsS2元素,只匹配一个)例如:.my,.you{color:#000}表示给classmy和classyou的元素加上#000的颜色值在页面上;S1S2合并选择(匹配包含S1和S2的元素,该元素必须同时包含S1和S2)例如:.my.you{color:#000}表示将#000的颜色值添加到带有my和的元素中你在页面类中;2。结构选择器S1S2后代选择器(S1的所有后代S2)S1>S2子选择器(S1子元素S2IE7+)S1+S2相邻兄弟选择器(S1后面的相邻兄弟元素S2IE7+)S1~S2一般兄弟选择器(所有兄弟元素S1后面是S2,IE7+)【示例说明】a.区分S1S2和S1、S2、S1S2三类选择器;你和我

.me,.you{颜色:深粉红色;}.you.me{背景:#eee;}.me.you{颜色:#0f0;}添加上面的结构体和样式,可以得到如下效果:可以看到.me,.you组选择器是只要包含其中一个,就会生效;.me.you的后代选择器只有在.me.you的后代才生效,.me.you的合并选择器只有在两个选择器都包含时才生效b.区分各种兄弟选择器son1
son2son3son4sonother.parent>.son{color:#0f0;}。son1+.son{文本对齐:居中;}.son1~.son{背景:#eee;}添加上面的结构和样式,得到如下效果:3.伪类选择器动态伪类选择器:link:visited:acitve(IE8+):hover:focus(IE8+)target伪选择器:target(IE9+)languagepseudo-selector:lang(language)ui元素状态伪选择器(IE9+):checkedselected:enabledenabledstate:disabledDisabled状态结构伪类选择器(IE9+):first-child:last-child:root:nth-child(n)奇偶数:nth-last-child(n):nth-of-type(n):nth-last-of-type(n):first-of-type:last-of-type:only-child:only-of-type:emptynscenenn*lengthn+length-n+lengthn*length+boddeven否定伪类选择器:not(IE9+)【图例】上面的伪类选择器和结构化伪类选择器是日常效果中使用最广泛的。适当的应用可以得到很多意想不到的效果【具体效果另文更新】4.伪元素::first-letter首字母::first-line文本首行::before在元素前插入内容,但是不会生成dom,可以设置样式【下一篇会补充】::after在元素后插入内容,但是不会生成dom,可以设置样式,常用于清除浮动【下一篇会补充】5.属性选择器[IE7+]E[attr]匹配属性attr的元素EE[attr=val]匹配属性attr为val的元素EE[attr|=val]开头valorval-E[attr~=val]属性值必须包含属性valE[attr*=val]属性值包含val字符串可以是E[attr^=val]以val开头E[attr$=val]以val结尾