style中各种选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
id选择器
#i1{
background-color: burlywood;
height: 48px;
}
class选择器
.c{
background-color: red;
height: 48px;
}
.c2{
background-color: blue;
height: 48px;
}
标签选择器
span{
background-color: yellowgreen;
height: 48px;
}
a{background-color: blue;
height: 48px;
}
层级选择器（中间有空格）
div span{
background-color: black;
color:white;
height: 48px;
}
.c2 div{
background-color: yellow;
font-size: 45px;
color:red;
height: 48px;
}
.c2 div div{
background-color: yellow;
color:black;
height: 48px;
}
组合选择器（用逗号隔开）
#i5,#i6,#i7,.c3,.c4{
background-color: yellow;
color:blue;
height: 48px;
}
属性选择器
input[type='text']{
width:100px;
height: 200px;
}
对选择到的标签再通过属性再进行一次筛选
.c1[type='zq']{
width:200px;
height: 200px;
}
</style>
</head>
<body>
<!--/* 第一种 在标签里面加style属性*/-->
<div style="background-color: burlywood;height: 200px;">ffffffff</div>
<!--/* 第二种 在title下面加入style属性，里面给对应id设定style属性，比如下面这个标签为#i1，
那么就会使用上面设定的style,但是每个标签的ID都是唯一的，所以这种方法不太使用，如果要设置多个标签的style那么就要写多个id选择器*/-->
<div id="i1">id选择器</div>
<!--/* 第三种 在style标签里面加入class选择器设定style属性，标签用的时候方法如下
同一个class选择器可以被多个标签应用，这种方法比较广泛*/-->
<div class="c">class选择器1</div>
<div class="c">class选择器2</div>
<div class="c2">class选择器3</div>
<!--/* 第四种 标签选择器，在style标签里面写对应标签模式的style，那么之后所有的这个模式都会使用此style*/-->
<span>标签选择器1</span>
<span>标签选择器2</span>
<a href="https://www.duba.com">标签选择器3</a>
<!--/* 第五种 关联选择器（层级选择器）*/-->
<div>
<span>关联选择器</span>
</div>
<!--/* 或者 关联选择器第二种形式*/-->
<div class="c2">
<div>关联选择器第二种形式</div>
</div>
<div class="c2">
<div>
<div>3层升入</div>
</div>
</div>
<!--/* 第六种 组合选择器*/--> <div id="i5">组合选择器1</div>
<div id="i6">组合选择器2</div>
<div id="i7">组合选择器3</div>
<div class="c3">组合选择器4</div>
<div class="c4">组合选择器5</div>
<div></div>
<!--/* 第七种 属性选择器*/-->
<input class="c1" type="text"/>
<input class="c1" type="zq"/>
</body>
</html>
style中各种选择器的更多相关文章
- CSS中的选择器之类选择器和id选择器
1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...
- 03-CSS中的选择器
高级选择器分为: 后代选择器 子代选择器 并集选择器 交集选择器 后代选择器 使用空格表示后代选择器 , 顾名思义 父元素的后代(包括儿子,孙子,重孙子) 中间空格隔开 是后代 .container ...
- js进阶 11-18 jquery中操作选择器的方法有哪些
js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...
- js进阶 10-4 jquery中基础选择器有哪些
js进阶 10-4 jquery中基础选择器有哪些 一.总结 一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...
- jQuery中的选择器<思维导图>
选择器是jQuery的重要组成部分,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. 下面是关于jQuery中 ...
- HTML5中class选择器属性的解释
设置有class属性值的元素,可以被css中的选择器调用,也可以在javascript中以getElementsByClassName()方法调用. 可以给各个元素添加class而且名称可以相同与id ...
- jQuery中的选择器《思维导图》
学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...
- js中对style中的多个属性进行设值
js中对style中的多个属性进行设值: 看一下案例自然就明白: document.getElementById("my_wz1").style.cssText="bac ...
- 使用scrapy中xpath选择器的一个坑点
情景如下: 一个网页下有一个ul,这个ur下有125个li标签,每个li标签下有我们想要的 url 字段(每个 url 是唯一的)和 price 字段,我们现在要访问每个li下的url并在生成的请求中 ...
随机推荐
- 基于impi zabbix监控r720 测试过程
1.F2进入服务器bios 修改network 使这台服务器能够被远程访问. 2.在远程的centos 7 服务器上安装 impitool工具包 #ipmitool -I lanplus -H X ...
- PTA 错题记录
程设期中考, 记录一下曾经做错的选择填空. 1. 2. 3. 4. 5. 6.
- 五、Ubuntu 16.04 安装PyCharm
方法一,在终端用指令通过第三方源安装pycharm. 本文通过第三方源安装PyCharm,好处是升级方便. 添加源: $ sudo add-apt-repository ppa:mystic-m ...
- java类实现序列化的方法？collection框架中实现什么样的接口
- hdu 4717: The Moving Points 【三分】
题目链接 第一次写三分 三分的基本模板 int SanFen(int l,int r) //找凸点 { ) { //mid为中点,midmid为四等分点 ; ; if( f(mid) > f(m ...
- SPFA的两个优化
评测题:洛谷[模板]单源最短路径 不加任何优化: queue<int>q; void spfa(ll s) { ;i<=n;i++) d[i]=(ll)(); d[s]=;q.pus ...
- P2627 修剪草坪 (单调队列优化$dp$)
题目链接 Solution 70分很简单的DP,复杂度 O(NK). 方程如下: \[f[i][1]=max(f[j][0]+sum[i]-sum[j])\]\[f[i][0]=max(f[i-1][ ...
- 阿里云code下载代码和更新代码
1- 本地新建一个文件夹,进入文件夹下面右击打开git 2- Git init初始化一个.git文件夹 3- Git clone git@code.aliyun.com:username/space- ...
- UVA 111 历史考试
题目描述:最长公共子序列的变形 题目序列中第i项是学生给第i号历史事件排出的序号,另外还给出了第i号历史事件的正确序号 求按照学生给出的序号排好历史事件后,所得的事件排序与历史事件实际发生的序列的最长 ...
- Android中国官网资源网站
现在android开发者官网在中国有中文版已经不是太大的新闻,为了平时查询资料和学习方便,记录如下. PS:建议用Google浏览器浏览,你懂的!! https://developers.google ...