Hybird App之选择器详解(二)

Hybird App之选择器详解(一)

学习混合app开发，要学会一些基础才能上手。本文主要介绍ID选择器、属性选择器、后代选择器、子元素选择器，其中ID选择器和属性选择器较为常用

ID选择器详解

1、ID选择器：

ID选择器类似于类选择器；不过也有一些重要差别
例如： #id{}

index.html

    
    
    


    
你好！Dwyane
-

style.css

#div{
    color:blue;
}

结果：

image.png

2、类选择器和ID选择器区别：

ID只能在文档中使用一次，而类可以多次使用
ID选择器不能结合使用
当使用js时候，需要用到id

属性选择器

1、简单属性选择：

    
    
    


    
属性选择器

结果：

image.png

2、根据具体属性值选择：
除了选择拥有某些的元素，还可以进一步缩小选择范围，只选择特定属性值的元素

    
    
    
    



    百度搜索
    新浪网

结果：

image.png

由上可看出，只限定了特殊属性值 http://www.baidu.com为深绿色和字号30px,其他属性值无反应

3、属性和属性值必须完全匹配

    
    
    
    



    
属性选择器
    
属性选择器2

结果：

image.png

由上可看出，只有属性title的属性值为title="title"才为红色

4、根据部分属性选择
在上面3的例子稍微改动，把

[title="title"]{
            color: red;
        }

改为(title后加上'~')

[title~="title"]{
            color: red;
        }

完整例子为

    
    
    
    


    
属性选择器
    
属性选择器2
    
属性选择器3

结果：

image.png

由上可看出，改动加了"~"后，只要包含"title"即可生效

后代选择器(针对子标签)

index.html

    
    
    


    
This is my web page

style.css

p strong{
    color: orangered;
}

结果：

image.png

针对子标签的strong标签里面的文字进行改变，用于着重特殊字符

子元素选择器

1、与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素
例如：h1>strong{};
index.html

    
    
    


    
你好！hybird app 我来了

style.css

h1 > strong{
    color: blue;
    font-size: 50px;
}

结果：

image.png

跟后代选择器有点相像

相邻兄弟选择器（使用不多）

可选择紧接在另一个元素后的元素，且二者有相同父元素
index.html

    
    
    


    

        
hello
        
hello
        
hello
    

style.css

li+li{
    color: blue;
    font-size: 30px;
}

结果：

image.png

都有共同的父元素ul，第一个li的标签都将改变颜色和字号

总结：大家主要熟悉常用的类选择器、ID选择器、属性选择选择器、元素选择器，其余选择器作为理解即可