1、父子选择器/派生选择器

<div calss="wrapper">

<span calss="box">123</span>

</div>

<span>456</span>

1)方式一

div span{

background-color:red;

}

2）方式二

.wrapper span{

background-color:red;

}

3)方式三

.wrapper .box{

background-color:red;

}

2、直接子元素选择器

<div>

<em>1</em>

<strong>

<em>2</em>

</stong>

</div>

div > em{

background-color:red;

}

3、选择器内核选择方式

从左到右，从右往左？

从右往左

4、并列选择器（重点）

标签、class、id、直接子元素等随便组合

组合后的选择器优先级，按照组合元素相加，权重越高，越优先；

如果权重一样，则后面代码覆盖前面代码，后来先到；

!important跟在选择器后面，则此选择器为权重最高等级;

如果选择器后面都有!important，则根据前面组合元素的权重来决定优先级。

div.demo{

}

#id div p.class{

}

div .classP#idP{

}

5、分组选择器

列子：让下面标签内的元素的背景色都为红色

<body>

<em>1</em>

<strong>2</strong>

<span>3</span>

</body>

方法一

em{

background-color:red;

}

strong{

background-color:red;

}

span{

background-color:red;

}

方法二

em,

strong,

span{

background-color:red;

}

HTML(三)选择器--复杂选择器的更多相关文章

  1. jQuery-1.9.1源码分析系列（三） Sizzle选择器引擎——总结与性能分析

    Sizzle引擎的主体部分已经分析完毕了,今天为这部分划一个句号. a. Sizzle解析流程总结 是时候该做一个总结了.Sizzle解析的流程已经一目了然了. 1.选择器进入Sizzle( sele ...

  2. 《CSS3实战》读书笔记 第三章：选择器：样式实现的标记

    第三章:选择器:样式实现的标记 选择器的魔力在于,让你完全实现对网页样式的掌控.不同的选择器可以用在不同的情况下使用.总之把握的原则是:规范的编码,根据合理地使用选择器,比去背选择器的定义有价值的多. ...

  3. CSS基础（三）：选择器

    常用选择器 元素选择器,即html标记如div,ul,li,p,h1~h6,table等. p { font-size:14px; } h1 { color:#F00; } 复合选择器, 由两个选择器 ...

  4. 锋利的Jquery解惑系列（三）------ 各路选择器大聚会

    申明:初次学习Jquery的选择器时只记得几个和css选择器类似的几个,在这里列出书上写上的各路选择器方便以后的查询和现在的学习 所有例子都来自书上 测试画面: 一.基本选择器 #id, $(&quo ...

  5. HTML-HTML5+CSS3权威指南阅读（三、CSS选择器）

    1.伪元素选择器 first-line, first-letter, before, after 2.属性选择器 [attr*=val]: 如果元素的 attr 属性中包含用 val 指定的字符的话, ...

  6. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  7. CSS3选择器——基本选择器

    CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选 ...

  8. CSS3 选择器——基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  9. CSS中的选择器之类选择器和id选择器

    1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...

随机推荐

  1. iframe和ajax文件上传方法

    为什么使用这两种方法文件上传呢,主要是因为局部刷新问题 上传问题,主要是使用form表单,或者用请求一个文件上传 iframe 大多网站都是有一个整体的固定结构,然后进行局部刷新,我们可以使用AJAX ...

  2. （转）SPI时钟极性、时钟相位

    SPI协议是一个 4 线.全双工的串口协议.根据串口时钟SCLK的相位SCPH和极性SCPOL的不同,有 4 种组合. CPOL CPHA MODE0 0 0 MODE1 0 1 MODE2 1 0 ...

  3. (7)Pool进程池

    (1)# 开启过多的进程并不一定提高你的效率 因为进程池可以实现并行的概念,比Process单核并发的速度要快 # 如果cpu负载任务过多,平均单个任务执行的效率就会低,反而降低执行速度. 1个人做4 ...

  4. 百度Apollo学习(一)

    产品介绍 Nuvo-5095GC为工业电脑打开了新的篇章.作为首款面向CUDA计算.自动驾驶.深度学习及虚拟现实等新兴领域的嵌入式工控机,Nuvo-5095GC是一个高度集成.体积紧凑.稳定可靠的高性 ...

  5. Learn Python3 the hard way 第二天总结 命令行(2)

    复制文件 命令:cp含义:很简单,就是把一个文件复制成一个新文件而已.使用 cp -r命令可以复制一些包含文件的目录 移动文件 命令:mv含义:对文件进行"rename". 查看文 ...

  6. Effective java 系列之避免过度同步和不要使用原生态类型，优先考虑泛型

    避免过度同步(67):在一个被同步的方法或代码块中,不要调用哪些被设计成被覆盖的方法或者是由客户端以函数对象的形式提供的方法(21). 有点拗口,书上提供的创建者与观察者模式,add方法太多,看得眼花 ...

  7. WAV和PCM文件转换的程序

    using System;using System.IO;using System.Text;using System.Windows.Forms;using System.Runtime.Inter ...

  8. c++-pimer-plus-6th-chapter04

    Chapter Review 1 a. char actors[30]; b. short betsie[100]; c. float chunk[13]; d. long double dipsea ...

  9. 以太坊 web3.js 文档翻译及说明

    这些天,为了录制以太坊DAPP开发实战课程,我准备把web3文档全部翻译一下(并做适当的补充),目前web3.js 0.20.x 版本 已经翻译完成,欢迎大家前往查阅. 这里还几个实用DEMO,供大家 ...

  10. 使用scp上传和下载文件

    利用scp传输文件 1.从服务器下载文件 scp username@servername:/path/filename /tmp/local_destination 例如scp codinglog@1 ...