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. Golang websocket

    环境:Win10 + Go1.9.2 1.先下载并引用golang的websocket库 ①golang的官方库都在https://github.com/golang下,而websocket库在/ne ...

  2. [C#]获取连接MySql数据库及常用的CRUD操作

    测试如下: 首先添加引用:MySql.Data.dll 链接:http://pan.baidu.com/s/1dEQgLpf 密码:bnyu *将链接数据库的信息放入配置文件中(app.config) ...

  3. Python + Selenium WebDriver Api 知识回顾

    一直再用 Selenium WebDriver 但是用的都比较零散,也没有做过总结,今天借此机会,整理一下,方便大家使用时查阅 webDriver  的属性 ['CONTEXT_CHROME', 'C ...

  4. 如何在ubuntu中安装中文输入法？

    如何在ubuntu中安装中文输入法  在桌面右上角设置图标中找到“System Setting”,双击打开. 在打开的窗口里找到“Language Support”,双击打开.  可能打开会说没有安装 ...

  5. Axure 全局变量公式的使用和局部变量

    全局变量和全部变量的公式: 1.全局变量在当前用例所有的动作里面都有,都可以设置 2.全局变量的公式在中括号里面的变量可以运算,但是在中括号外面的变量只是起到连接的作用 局部变量: 局部变量只可以在当 ...

  6. 倒排索引（Inverted Index）

    倒排索引(Inverted Index) 倒排索引是一种索引结构,它存储了单词与单词自身在一个或多个文档中所在位置之间的映射.倒排索引通常利用关联数组实现.它拥有两种表现形式: inverted fi ...

  7. Confluence 6 为边栏添加自定义内容

    你可以使用 wiki 标记和自定义内容来对边栏进行更进一步的自定义. 希望添加自定义内容到你的边栏中: 进入空间后,然后从边栏的底部选择 空间工具(Space tools) > 外观和感觉(Lo ...

  8. pytorch构建自己设计的层

    下面是如何自己构建一个层,分为包含自动反向求导和手动反向求导两种方式,后面会分别构建网络,对比一下结果对不对. -------------------------------------------- ...

  9. laravel安装Excel安装不上

    1.生明版本号 composer require maatwebsite/excel 2.1我的PHP是7.0安装Excel得2.1 2.在composer.json中加入 "maatweb ...

  10. php算法，冒泡排序

    冒泡排序 /*** *从小到大排列 * 逻辑分析 假设数组 $arr=[a,b,c,d]; * 总数=4; * 比较对象 第几个元素 比较次数 * a 1 3 * b 2 2 * c 3 1 **/ ...