CSS之分组选择器和嵌套选择器

分组选择器，

将一个样式应用于多个类，或者标签啥的

每个选择器用逗号隔开

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

h1,h2,p

{

    color:green;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<h2>Smaller heading!</h2>

<p>This is a paragraph.</p>

</body>

</html>

结果如下

CSS之分组选择器和嵌套选择器

嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了三个样式：

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

    body{

        background-color:darkgrey;

    }

p

{

    color:blue;

    text-align:center;

}

.marked

{

    background-color:red;

}

.marked p

{

    color:white;

}

p.marked{

    text-decoration:underline;

}

</style>

</head>

<body>

<p>这个段落是蓝色文本，居中对齐。</p>

<div class="marked">

<p>这个段落不是蓝色文本。</p>

</div>

<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>

<p class="marked">带下划线的 p 段落。</p>

</body>

</html>

CSS之分组选择器和嵌套选择器

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）

链接如下

http://www.runoob.com/css/css-combinators.html

CSS之分组选择器和嵌套选择器的更多相关文章

less可以做什么？less详解！(less嵌套选择器实现纯CSS二级导航)
前端技术众多,作为一名前端工程师,我们每接触新技术首先要懂得此技术的优势和劣势,这是最基本的.往深入了说还需要懂得技术的应用场景,配合的技术等,方便为以后架构做准备.而less作为一门CSS预处理语言 ...
CSS 分组和嵌套选择器
CSS 分组和嵌套选择器一.分组选择器在样式表中有很多具有相同样式的元素. h1 { color:green; } h2 { color:green; } p { color:green; } 为 ...
CSS分组和嵌套选择器
CSS 分组和嵌套选择器分组选择器在样式表中有很多具有相同样式的元素.直线模组哪家好 h1 { color:green; } h2 { color:green; } p { ...
CSS：CSS 分组和嵌套选择器
ylbtech-CSS:CSS 分组和嵌套选择器 1.返回顶部 1. CSS 分组和嵌套选择器 Grouping Selectors 在样式表中有很多具有相同样式的元素. h1 { col ...
CSS 分组和嵌套选择器
Grouping Selectors 在样式表中有很多具有相同样式的元素. h1{color:green;}h2{color:green;}p{color:green;} 为了尽量减少代码,你可以使用 ...
CSS（一）引入方式选择器权重
Css(一) Cascading Style Sheet 层叠样式表 css注释方式/* */ 一.Css引入方式 1. 行间样式 style=" key:value; " &l ...
CSS 简介、选择器、组合选择器
#CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &lt ...
CSS基础（三）：选择器
常用选择器元素选择器,即html标记如div,ul,li,p,h1~h6,table等. p { font-size:14px; } h1 { color:#F00; } 复合选择器, 由两个选择器 ...
CSS基础知识点（二）——选择器
在这一篇中,主要总结一下CSS中的选择器. 参考:http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html CSS中的选择器主要包括 ...

随机推荐

mac 端口被占用及kill端口
在本地部署 Web 应用时我有遇到过某网络端口已经被其他程序占用的情况,这时候就需要先退出占用该端口的进程,我们可以通过“终端”来实现结束占用某特定端口的进程 1.打开终端,使用如下命令: lsof ...
sql中in和exists效率问题转自百度知道
in和existsin 是把外表和内表作hash 连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询. 如果两个表中一个较小,一个是大表,则子查询表大的用exists,子查询 ...
Oracle连接查询内容整理
--内连接--select t.*,b.bumenmc from T_HQ_RYXX t,t_hq_bm b where t.bum = b.bumenbm--select * from t_hq_r ...
C/C++程序基础
作为一名cocos2dx前端(客户端)开发,知乎上看到一片文章,怎么看待做手游cocos前端开发,lua用的多,c++用的少面试会被鄙视? 为了不被鄙视,所以要学好C++,多做积累.本文主要是根据&l ...
安卓 Dialogs(对话框)
转载自:http://www.apkbus.com/home.php?mod=space&uid=679028&do=blog&id=61197 对话框是一个小的窗口用以提示用 ...
SharePoint 2016 每天预热脚本介绍
使用SharePoint的朋友们应该知道,SharePoint每天夜里有自动回收的机制,使环境每天把占用的内存都释放出来,以确保不会累计占用过多内存导致服务器崩溃. 我们可以打开IIS,选中我们的应用 ...
[NOIp 2012]国王游戏
Description 恰逢 H 国国庆,国王邀请 n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这 n 位大臣排成一排,国 ...
机器学习入门-文本数据-构造词频词袋模型 1&period;re&period;sub(进行字符串的替换) 2&period;nltk&period;corpus&period;stopwords&period;words(获得停用词表) 3&period;nltk&period;WordPunctTokenizer(对字符串进行分词操作) 4&period;np&period;vectorize(对函数进行向量化) 5&period; CountVectorizer(构建词频的词袋模型)
函数说明: 1. re.sub(r'[^a-zA-Z0-9\s]', repl='', sting=string) 用于进行字符串的替换,这里我们用来去除标点符号参数说明:r'[^a-zA-Z0- ...
Spark SQL利器：cacheTable/uncacheTable【转】
转自:http://www.cnblogs.com/yurunmiao/p/4936583.html Spark相对于Hadoop MapReduce有一个很显著的特性就是“迭代计算”(作为一个Map ...
Python爬虫框架Scrapy学习笔记原创
字号 scrapy [TOC] 开始 scrapy安装首先手动安装windows版本的Twisted https://www.lfd.uci.edu/~gohlke/pythonlibs/#twi ...