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. lambda表达式与方法重载问题

    笔者之前在学习Java8新特性的时候,最吸引我的就是lambda表达式,它无疑为Java函数编程提供了强有力的支持.lambda表达式的使用方法很简单,下面给出最简单的用法. // Interface ...

  2. java web 方面

    1.Tomcat的优化经验. 2.http请求的GET与POST方式的区别. (1)get是从服务器上获取数据,post是向服务器传送数据. (2)get是把参数数据队列加到提交表单的ACTION属性 ...

  3. CPU、OpenGL/DirectorX、显卡驱动和GPU之间的关系

  4. （转）stm32启动文件详解

    在<<STM32不完全手册里面>>,用的是STM32F103RBT6,所有的例程都采用了一个叫STM32F10x.s的启动文件,里面定义了STM32的堆栈大小以及各种中断的名字 ...

  5. HTML第五章总结

    A Chapter for <img> 前言 这一章讲了 Web 图片 format 的各自的优缺点和elements of 's attributes. Section1:Q1:How ...

  6. Redisson实现分布式锁（二）

    本次基于注解+AOP实现分布式锁(招式与前文基于注解切换多数据源相同),话不多说,直接上样例: 首先自定义注解:设计时需要考虑锁的一般属性:keys,最大等待时间,超时时间,时间单位. package ...

  7. boke例子： freermarker：在使用ajax传递json数据的时候多出冒号

    boke例子: freermarker:在使用ajax传递json数据的时候多出冒号 json数据是用JSON.stringify()格式化的数据,然后用ajax传递,发现数据多出一个冒号:, 后来度 ...

  8. 【异常及源码分析】org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.type.TypeException: Could not set parameters for mapping: ParameterMapping

    一.异常出现的场景 1)异常出现的SQL @Select("SELECT\n" + " id,discount_type ,min_charge, ${cardFee} ...

  9. LeetCode--008--字符串转换整数 (atoi)(java)

    请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们寻找到的第一个非空字符为正或者负号时,则将该符号与之 ...

  10. javascript 两张图片切换 三目运算符

    <body> <script> function changeImage(){ var s = document.getElementById('myimage'); s.sr ...