专栏首页技术总结Hybird App之选择器详解(二)

Hybird App之选择器详解(二)

Hybird App之选择器详解(一)

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

ID选择器详解

1、ID选择器:

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

index.html

<!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

#div{
    color:blue;
}

结果:

image.png

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

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

属性选择器

1、简单属性选择:

<!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、根据具体属性值选择: 除了选择拥有某些的元素,还可以进一步缩小选择范围,只选择特定属性值的元素

<!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、属性和属性值必须完全匹配

<!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的例子稍微改动,把

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

改为(title后加上'~')

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

完整例子为

<!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

<!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

p strong{
    color: orangered;
}

结果:

image.png

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

子元素选择器

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

<!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

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

结果:

image.png

跟后代选择器有点相像

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

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

<!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

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

结果:

image.png

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Hybird App之选择器详解(一)

    Dwyane
  • 设计模式的作用

    Dwyane
  • Swift封装-滑出式导航栏

    Dwyane
  • ES6系列笔记-数组方法filter(过滤)

    祈澈菇凉
  • flask第十九篇——模板【3】

    用户2149234
  • 爬取网站文章将图片保存到本地并将HTML的src属性更改到本地

    每次当你爬取一篇文章时,不管是从csdn或者其他网站,基本内容都是保存在一个富文本编辑器中,将内容提取出来还是一个html,保存之后图片还在别人...

    andrew_a
  • Elasticsearch读写中间件的设计

    相比之下大家对数据库中间件的项目背景会比较熟悉,其实搜索中间件的项目背景也类似,搜索系统总的来说可以分两种,一种是业务为主的搜索推荐系统,另一种是以提供基础搜索...

    tiaotiaoba
  • Python基础学习_10_网页爬虫实战爬取百度百科词条(源码下载)

    下面使用Python开发一个网页爬虫,爬取百度百科词条信息,整个程序涉及到url管理器,html下载器,html解析器,html显示以及调度程序:

    用户2292951
  • 机器学习算法实现解析——libFM之libFM的训练过程之SGD的方法

    本节主要介绍的是libFM源码分析的第五部分之一——libFM的训练过程之SGD的方法。 5.1、基于梯度的模型训练方法 在libFM中,提供了两大类的模型训练...

    zhaozhiyong
  • 彻底弄懂CSS优先级规则

    当 html 元素拥有多个 css 样式时,浏览器会根据优先级规则计算 css,如果对优先级规则不够熟悉,在实际的开发过程中往往会产生很多困扰,本文总结css的...

    CS逍遥剑仙

扫码关注云+社区

领取腾讯云代金券