<新人报到,欢迎拍砖#- ->

一、后代选择器

  说起CSS的后代选择器。它属于派生选择器中的一种,两者附属关系如下:

-->派生选择器

----CSS 后代选择器

----CSS 子元素选择器

----CSS 相邻兄弟选择器

  那么问题来了,什么时候需要用到后代选择器嘞?假设你需要为p元素中的span元素(.A类)设置特殊样式,可以用后代选择器选择该元素:

/*方式1*/
p span{...}
/*方式2*/
p .A{...}

注意,上述代码的两个选择器间以空格空格空格分隔。另外,后代选择器使用起来灰常自由。这么说吧,上述例子中p元素不一定必须是span的老爸,只要是span的直系长辈比如爷爷都可以。换句话说,在p元素包含span元素的情况下,后代选择器就可以发挥作用了。

二、多类选择器

  接下来,来说说多类选择器。举个例子:

.funny{...}
.handsome{...}
.funny.handsome{...}

注意,上述代码的两个选择器间没有没有没有空格分隔。好的,现在有.funny和.handsome这两个类,显然“我是个有趣并且帅的boy,两者缺一都不是我”是一个真命题,所以只有“.funny.handsome”这个多类选择器才可以选择我。但是单独的“.funny”不能选择我,原因见前文提到的真命题,“.handsome”选择器同理。

好吧不闹了,多类选择器的用处挺多的,比如要设置“1、被点击(.selected);2、按钮(button)”的样式,就可以用:

button.selected{...}

这是我在博客园写下的第一篇博文,XD。完毕。

CSS之后代选择器与多类选择器的更多相关文章

  1. Css详解之(伪类选择器)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. HTML&CSS基础-子元素的伪类选择器

    HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

  3. CSS3每日一练之选择器-结构性伪类选择器

    <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...

  4. CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

    使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

  5. HTML[2种特殊选择器]_伪类选择器&属性选择器

    本文介绍两种特殊的选择器 1.伪类选择器 2.属性选择器 1.伪类选择器 ...: nth-of -type (x) x为同类型兄弟元素中的排名 例如: <body> <ul> ...

  6. css3类选择器之结合元素选择器和多类选择器

    css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  8. css选择器(常规选择器,伪类选择器,伪元素选择器,根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  9. 第49天学习打卡(CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型)

    推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...

随机推荐

  1. 2661: [BeiJing wc2012]连连看

    Description 凡是考智商的题里面总会有这么一种消除游戏.不过现在面对的这关连连看可不是QQ游戏里那种考眼力的游戏.我们的规则是,给出一个闭区间[a,b]中的全部整数,如果其中某两个数x,y( ...

  2. oracle timestamp的转换

    select to_char(stime,'yyyy-mm-dd HH24:MI:ss.ff3') from e_bmp_log_operation t where t.sdetail like '% ...

  3. C# IOCP服务器

    C# IOCP服务器 @by  群63438968 这是我写的unity 网络斗地主的服务器源码,本来我想只公开部份服务端代码的,但是为了回报大家的热情,以及曾经和现在的好兄弟,我计划慢慢开源! 告诉 ...

  4. Git基本操作(Windows下)

    在开始使用Git之前,我觉得是很有必要了解下Git与其他版本控制系统的差异与文件在Git中的三种状态.可以到下面这个网站看下:Git详解之一 Git起步,了解之后,可以对Git的基本操作有一个更清晰的 ...

  5. parted命令分区

    http://soft.chinabyte.com/os/447/12439447.shtml http://blog.163.com/warking_xp/blog/static/103910320 ...

  6. Palindrome(最长公共子序列)

    Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 48526   Accepted: 16674 Description A p ...

  7. Luogu 考前模拟Round. 1

    A.情书 题目:http://www.luogu.org/problem/show?pid=2264 赛中:sb题,直接暴力匹配就行了,注意一下读入和最后一句话的分句 赛后:卧槽 怎么只有40 B.小 ...

  8. Divide Two Integers —— LeetCode

    Divide two integers without using multiplication, division and mod operator. If it is overflow, retu ...

  9. HDOJ 2052 Picture

    Problem Description Give you the width and height of the rectangle,darw it. Input Input contains a n ...

  10. 移动UI自动化-Page Objects Pattern

    移动UI自动化,看起来美好,践行起来却难.做个目光短见的务实主义者.Page Objects Pattern是Selenium官方推崇的方式,最近研究写测试用例最佳实践之Page Objects,同时 ...