CSS之后代选择器与多类选择器
<新人报到,欢迎拍砖#- ->
一、后代选择器
说起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之后代选择器与多类选择器的更多相关文章
- Css详解之(伪类选择器)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML&CSS基础-子元素的伪类选择器
HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...
- CSS3每日一练之选择器-结构性伪类选择器
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- HTML[2种特殊选择器]_伪类选择器&属性选择器
本文介绍两种特殊的选择器 1.伪类选择器 2.属性选择器 1.伪类选择器 ...: nth-of -type (x) x为同类型兄弟元素中的排名 例如: <body> <ul> ...
- css3类选择器之结合元素选择器和多类选择器
css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...
- HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- css选择器(常规选择器,伪类选择器,伪元素选择器,根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
- 第49天学习打卡(CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型)
推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...
随机推荐
- 【转】C#正则表达式详解
正则表达式通常包含字母文本(Literaltext)和元字符(metacharacter) 字母文本指的是普通文本如"abcde"可匹配字符串中任何包含"abcde&qu ...
- php开发环境安装配置(1)
个人记录高手请勿喷! 下载xampp我这是个中文版的可以自己搜索下载安装别的版本也行. 双击下载的xampp会提示路径相当于解压到指定的路径 到对应路径去可看到如下: 打开 2.配置: 成功之后会如下 ...
- IOS--UIButton的使用方法
设置UIButton的文字显示位置.字体的大小.字体的颜色 分类: iphone界面详解2012-12-21 14:32 27269人阅读 评论(2) 收藏 举报 btn.frame = CGRect ...
- Google测试精华文章(1) - 测试行为,而非实现
Your trusty Calculator class is one of your most popular open source projects, with many happy users ...
- Oracle问题解决(远程登录失败)
远程机: 安装 Oracle 的计算机: 本地机: 访问远程机 Oracle 的计算机. 一.问题描述 远程机安装 Oracle 成功. 本地机配置 InstantClient 后, PLSql De ...
- mapreduce (六) MapReduce实现去重 NullWritable的使用
习题来源:http://www.cnblogs.com/xia520pi/archive/2012/06/04/2534533.htmlfile1 2012-3-1 a 2012-3-2 b 2012 ...
- ExtJS简单的动画效果2(ext js淡入淡出特效)
Ext 开发小组则提供了 Fx 类集中处理了大部分常用的 js 动画特效,减少了我们自己手写代码的复杂度. 面我给出一个简单的实例代码,其中囊括了大部分的 Ext 动画效果: (注意导入js和css文 ...
- X-Plosives
uvaLive 3644:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&pa ...
- C语言中如何使用宏
C(和C++)中的宏(Macro)属于编译器预处理的范畴,属于编译期概念(而非运行期概念).下面对常遇到的宏的使用问题做了简单总结. 宏使用中的常见的基础问题 #符号和##符号的使用 ...符号的 ...
- 【Linux】鸟哥的Linux私房菜基础学习篇整理(二)
1. dumpe2fs [-bh] devicename:查询superblock信息.参数:-b:列出保留为坏道的部分:-h:列出superblock的数据,不会列出其他的区段内容. 2. df [ ...