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. U8工具栏特别小是怎么回事

    用友的工具栏特别窄了,填制凭证里的保存.增加凭证等按钮因为工具栏特别窄都看不清了 解决方法:正常机器下的system32下面的mscomctl.ocx文件替换到有问题的机器下,您的系统应该是XP的,这 ...

  2. Asp.net core 学习笔记 ( ViewComponent 组件 )

    refer : https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components core 和 Angular 的 comp ...

  3. 广播小案例-监听系统网络状态 --Android开发

    本例通过广播实现简单的监听系统网络状态改变的小案例. 1.案例效果演示 当手机连网后,系统提示“已连接网络”, 当手机断网后,系统提示“当前网络不可用”. 2.案例实现 在主活动中动态注册广播,然后写 ...

  4. Java类成员变量的默认值

    1.布尔型(boolean)变量默认值为false,byte.short.int.long为0,字符型为'\u0000'(空字符),浮点型(float double)为0.0,引用类型(String) ...

  5. javaweb课程信息管理系统

    1.DBUtil包连接数据库 2.Bin包设计成员函数及方法 3.Dao包设计sql语句 4.servlet包增删改查方法 5.service连接servlet 6.设计jsp增删改查页面 7.连接各 ...

  6. You Don't Know JS: Scope & Closures (第2章: Lexical Scope)

    2种主要的models for how scope work. 最普遍的是Lexical Scope. 另一种 Dynamic Scope.(在Appendix a中介绍.和Lexical Scope ...

  7. p2739 Shuttle Puzzle

    观察样例得知就是和离'_'左边最近的'w'交换位置,然后和离'_'右边最近的'b'交换位置,轮流进行. #include <iostream> #include <cstdio> ...

  8. SQL SERVER 子查询使用Order By；按In排序

    [子查询]使用order by percent * from table order by id) a 这时发现结果没有按id排序,需要将100 percent 改成 99.999 percent 或 ...

  9. 『MXNet』第一弹_基础架构及API

    MXNet是基础,Gluon是封装,两者犹如TensorFlow和Keras,不过得益于动态图机制,两者交互比TensorFlow和Keras要方便得多,其基础操作和pytorch极为相似,但是方便不 ...

  10. 创建springboot的聚合工程（二）

    前篇已经成功创建了springboot的聚合工程并成功访问,下面就要开始子工程木块之间的调用: springboot项目的特点,一个工程下面的类必须要放在启动类下面的子目录下面,否则,启动的时候会报错 ...