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

浏览: 162 发布日期: 2017-09-21 分类: css3

对于一个前端er,选择器是日常生活中必须接触的部分,这篇文章主要探讨一下选择其的分类及一些小技巧。

【分类】
1.基础选择器
2.结构选择器
3.伪类选择器
4.伪元素
5.属性选择器

【描述】
1.基础选择器(浏览器都兼容)

* 通配符 (可以匹配元素中所有的html元素)
    如:*{color:#000;}则代表将页面全部元素添加属性为#000的颜色值;
E 元素选择器(匹配特定的标签)
    如:a{text-decoration:underline;}则代表将页面所有的a标签设置下划线;
#id ID选择器(匹配页面特定的id)
    如:#my{color:#000}则代表将页面id为my的元素添加属性为#000的颜色值;
.class 类选择器(匹配页面特定的class)
    如:.my{color:#000}则代表将页面class为my的元素添加属性为#000的颜色值;
S1,S2 群组选择器(匹配包含S1,包含S2元素,匹配一个即可)
    如:.my,.you{color:#000}则代表将页面class为my和class为you的元素添加属性为#000的颜色值;
S1S2 合并选择器(匹配包含S1及S2的元素,该元素同时必须包含S1及S2)
    如:.my.you{color:#000}则代表将页面class有my及you的元素添加属性为#000的颜色值;

2.结构选择器

S1 S2 后代选择器(S1所有的后代S2)
S1>S2 子选择器(S1的子元素S2 IE7+)
S1+S2 相邻兄弟选择器(S1后面的相邻兄弟元素S2 IE7+)
S1~S2 通用兄弟选择器(S1后面的所有兄弟元素S2,IE7+)  

【举例图示】
a.区分S1 S2及S1,S2及S1S2三类选择器;

    <div class="you me">
        you and me
    </div>
    <div class="you">
        you
    </div>
    <div class="me">
        me
        <span class="you">
            you
        </span>
    </div>
    .me,.you{
        color: deeppink;
    }
    .you.me{
        background: #eee;
    }
    .me .you{
        color: #0f0;
    }

添加如上结构及样式,可得到下面的效果:

可以看出来.me,.you群组选择器即只要包含了任意一个即可生效;.me .you后代选择是只有.me的后代.you才会生效,.me.you合并选择器,是需要两个选择器都包含才会生效。

b.区分各类兄弟选择器

    <div class="parent">
        <div class="son son1">son1</div>
        <div class="son">son2</div>
        <div class="son">son3</div>
        <div class="son">son4</div>
    </div>
    <div class="son">
        son other
    </div>
    .parent >.son{
        color: #0f0;
    }
    .son1 + .son{
        text-align: center;
    }
    .son1 ~ .son{
        background: #eee;
    }

添加如上结构及样式,可得到下面的效果:

3.伪类选择器

动态伪类选择器
    :link
    :visited
    :acitve(IE8+)
    :hover
    :focus(IE8+)
目标伪类选择器
    :target(IE9+)
语言伪类选择器
   :lang(language)
ui元素状态伪类选择器(IE9+)
    :checked  选中态
    :enabled    启用态
    :disabled    禁用态
结构伪类选择器(IE9+)
    :first-child
    :last-child
    :root
    :nth-child(n) odd even
    :nth-last-child(n)
    :nth-of-type(n)
    :nth-last-of-type(n)
    :first-of-type
    :last-of-type
    :only-child
    :only-of-type
    :empty

    n的场景 n n*length n+length -n+length n*length+b odd even

否定伪类选择器
    :not (IE9+)

【举例图示】
以上伪类选择器,结构伪类选择器在日常效果中应用最为广泛,应用恰当可以得到很多意想不到的效果。【具体效果会另开文章再更新】

4.伪元素

::first-letter 第一个字母
::first-line 第一行文本
::before 在元素前插入内容,但不会生成dom,可以设置样式【会在下篇文章补充说明】
::after 在元素后插入内容,但不会生成dom,可以设置样式,常用于清除浮动【会在下篇文章补充说明】

5.属性选择器【IE7+】

E[attr] 匹配具有属性attr的元素E
E[attr=val] 匹配属性attr为val的元素E
E[attr|=val] 以val 或者val-开头
E[attr~=val] 属性值要包含val这个属性
E[attr*=val] 属性值中有val这个字符串就可以
E[attr^=val] 以val开头
E[attr$=val] 以val结束
返回顶部