前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Hybird App之选择器详解(二)

Hybird App之选择器详解(二)

作者头像
Dwyane
发布2018-05-22 17:50:08
5830
发布2018-05-22 17:50:08
举报
文章被收录于专栏:技术总结

Hybird App之选择器详解(一)

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

ID选择器详解

1、ID选择器:

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

index.html

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="div">你好!Dwyane</div>-
</body>
</html>

style.css

代码语言:javascript
复制
#div{
    color:blue;
}

结果:

image.png

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

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

属性选择器

1、简单属性选择:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        [title]{
            color: red;
        }
    </style>
</head>
<body>
    <p title="title">属性选择器</p>
</body>
</html>

结果:

image.png

2、根据具体属性值选择:

除了选择拥有某些的元素,还可以进一步缩小选择范围,只选择特定属性值的元素

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <!--<link href="style.css" type="text/css" rel="stylesheet">-->
    <style>
        a[href="http://www.baidu.com"]{
            color: darkgreen;
            font-size: 30px;
        }
    </style>

</head>
<body>
    <a href="http://www.baidu.com">百度搜索</a>
    <a href="http://www.sina.com.cn">新浪网</a>
</body>
</html>

结果:

image.png

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

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

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <!--<link href="style.css" type="text/css" rel="stylesheet">-->
    <style>
        [title="title"]{
            color: red;
        }
    </style>

</head>
<body>
    <p title="title">属性选择器</p>
    <p title="t">属性选择器2</p>
</body>
</html>

结果:

image.png

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

4、根据部分属性选择

在上面3的例子稍微改动,把

代码语言:javascript
复制
[title="title"]{
            color: red;
        }

改为(title后加上'~')

代码语言:javascript
复制
[title~="title"]{
            color: red;
        }

完整例子为

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <!--<link href="style.css" type="text/css" rel="stylesheet">-->
    <style>
        [title~="title"]{
            color: red;
        }
    </style>
</head>
<body>
    <p title="title">属性选择器</p>
    <p title="t">属性选择器2</p>
    <p title="title html">属性选择器3</p>
</body>
</html>

结果:

image.png

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

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

index.html

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p>This is my <strong>web</strong> page</p>
</body>
</html>

style.css

代码语言:javascript
复制
p strong{
    color: orangered;
}

结果:

image.png

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

子元素选择器

1、与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素

例如:h1>strong{};

index.html

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <h1>你好!<strong>hybird app</strong> 我来了</h1>
</body>
</html>

style.css

代码语言:javascript
复制
h1 > strong{
    color: blue;
    font-size: 50px;
}

结果:

image.png

跟后代选择器有点相像

相邻兄弟选择器(使用不多)

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

index.html

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
</body>
</html>

style.css

代码语言:javascript
复制
li+li{
    color: blue;
    font-size: 30px;
}

结果:

image.png

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

总结:大家主要熟悉常用的类选择器、ID选择器、属性选择选择器、元素选择器,其余选择器作为理解即可
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.01.01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ID选择器详解
  • 属性选择器
  • 后代选择器(针对子标签)
  • 子元素选择器
  • 相邻兄弟选择器(使用不多)
  • 总结:大家主要熟悉常用的类选择器、ID选择器、属性选择选择器、元素选择器,其余选择器作为理解即可
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档