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并在生成的请求中 ...
随机推荐
- 使用Varnish加速Web
通过配置Varnish缓存服务器,实现如下目标: - 使用Varnish加速后端Web服务 - 代理服务器可以将远程的Web服务器页面缓存在本地 - 远程Web服务器对客户端用户是透明的 - 利用缓存 ...
- jmeter性能工具 之 cookie 管理器 （二）
上一篇主要介绍了jmeter 的基本使用方法,编写了登陆脚本,这一篇在登陆基础上,进行充值操作. 问:什么时候需要用到cookied 管理器? 答:需要登陆信息时,如果充值,提现,淘宝的下单,添加到购 ...
- PHP与CI学习笔记
CodeIgniter框架学习 安装 下载好包后,解压复制 system 和 application 目录到网站目录下 配置 配置目录 打开index.php设置好 $system_path . $a ...
- c++11 快速退出
C++程序中有以下几种推出方式:terminate abort exit terminate: 实际上是c++语言中异常处理的一部分(包含在<exception>头文件中),一般而言,没有 ...
- web高拍仪图片上传
公司引进高拍仪,想拍完照片点上传按钮直接上传图片.高拍仪接口能提供照片的本地路径,现在的问题是不用file控件选择,只有路径,不知道如何上传到服务器,求解决方案. 方法: 使用泽优Web图片上传控件( ...
- FastDFS整合普通Maven项目(四)
1.下载官方的源代码:https://codeload.github.com/happyfish100/fastdfs-client-java/zip/master 2.采用maven命令编译成jar ...
- Centos7防火墙和SELinux的开启和关闭
在虚拟机里面开启多个服务,对应多个端口,在防火墙开启的情况下,就要对外开放端口,这样客户端才能正常访问,但比较繁琐,关闭更直接点. 防火墙 临时关闭防火墙 systemctl stop firewal ...
- ORA-00020: maximum number of processes (800) exceeded
[oracle@db04-1 ~]$ sqlplus -prelim / as sysdba SQL*Plus: Release 11.2.0.3.0 Production on 星期四 8月 31 ...
- Java常用工具——java异常
package com.imooc.exception; import java.util.Scanner; public class TryCatchDemo1 { public static vo ...
- day16—正是Github，让社会化编程成为现实。
转行学开发,代码100天——2018-04-01 今天简单了解了一下GitHub的使用. 对于GitHub,在很多年前开始写程序的时候就频繁听到,也早早地注册之后看了真容.但是由于自己一直未产出较大型 ...