Hybird App之选择器详解(一)

学习混合app开发,要学会一些基础才能上手。本文主要介绍元素选择器、选择器分组、类选择器

元素选择器

最常见的选择器就是元素选择器,文档的元素就是最基本的选择器 例如:h1{} a{} 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>Hello Dwyane!</p>
</body>
</html>

style.css

p{
    color: green;
}
选择器分组
<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
</body>

style.css

h1, h2{
    color: green;
}

结果:

image.png

另外还有个通配符*,通常在通配符设置marigin值、padding值

*{
    margin: 0px;
    padding: 0px;
}
类选择器

1、类选择器允许以一种独立于文档元素的方式来指定样式 例如:.class{} 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 class="div">hello,Dwyane</div>
</body>
</html>

style.css

.div{
    color: blue;
}

结果:

image.png

2、结合元素选择器:例如:a.class{} index.html

<body>
    <div class="div">hello,Dwyane</div>
    <a class="div">hello,Dwyane</a>
</body>

style.css

a.div{
    color: blue;
}

只指定a标签的div更改,所以未指定的div不会更改 结果:

image.png

3、多类选择器 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 class="p1">this is my web page</p>
    <p class="p2">this is my web page</p>
    <p class="p3">this is my web page</p>
</body>
</html>

style.css

.p1{
    color: blue; //p1更改颜色
}
.p2{
    font-size: 30px; //p2更改字号
}
.p3{
    font-style: italic; //p3斜体
}

结果:

image.png

运用多类选择器,我们可以 index.html

<body>
    <p class="p1">this is my web page</p>
    <p class="p2">this is my web page</p>
    <p class="p1 p2">this is my web page</p> //p1 p2中间用空格隔开,这样继承了前两个class的特性
</body>

style.css

.p1{
    color: blue; //p1更改颜色
}
.p2{
    font-size: 30px; //p2更改字号
}
.p1.p2{
    font-style: italic; //p1 p2斜体
}

结果:

image.png

.p1.p2继承了p1和p2的特性,再加上自己的斜体

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏杨龙飞前端

checkbox的常见问题

23950
来自专栏知道一点点

bootstrap快速入门笔记(七)-表格,表单

2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

27330
来自专栏每日一篇技术文章

weex-16-image组件

DE2586BB-4A0A-4904-AA87-EF44A8A5BC74.png

10110
来自专栏十月梦想

css3 zoom属性兼容ie的缩放

文本缩放,在之前我们使用过css3的transform中scale进行比例扩大或者缩放,但是这个属性兼容性差,在IE10一下基本就失效(蔫了),今天带来的zoo...

12140
来自专栏CDA数据分析师

【爬虫基础】网页是怎么构成的?

作者 张俊红 本文为 CDA 志愿者张俊红原创作品,转载需授权 所谓的网络爬虫就是从网页中指定位置找到对应的数据并下载,要想知道数据在什么位置,我们需要首...

25250
来自专栏柠檬先生

jquery mobile 移动web(3)

可折叠功能块。   div 元素的 data-role 属性设置为 collapsible   代码如下:     <div data-role="...

216100
来自专栏PPV课数据科学社区

【学习】如何快速批量删除Excel单元格中的“换行符”

在Excel单元格中按Alt+Enter就会进行换行,就像在Word中按回车键一样。如果许多单元格中都包含这样的“换行符”,现在要将其全部删除掉,...

32830
来自专栏破晓之歌

JS 事件绑定、事件监听、事件委托详细介绍 转

在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等。这些名词是什么意思呢,有什么作用...

35330
来自专栏一“技”之长

标签之美十——用户交互元素 原

任何一个网页都会提供用户交互的功能,包括账号密码的提交,留言板等用户信息的的获取。

9130
来自专栏闻道于事

第二天0605下午——超链接<a>与图片<img>

今天下午学习了超链接<a>标签和图片<img>标签,以下面代码为例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

36880

扫码关注云+社区

领取腾讯云代金券