Grouping Selectors

在样式表中有很多具有相同样式的元素。

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

为了尽量减少代码,你可以使用分组选择器。

每个选择器用逗号分隔.

在下面的例子中,我们对以上代码使用分组选择器:

实例

h1,h2,p
{
color:green;
}

尝试一下 »


嵌套选择器

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

在下面的例子,为所有p元素指定一个样式,为所有元素指定一个class="marked"的样式,并仅用于class="标记",类内的p元素指定第三个样式:

实例

p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}

尝试一下 »

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

  1. CSS 分组和嵌套选择器

    CSS 分组和嵌套选择器 一.分组选择器 在样式表中有很多具有相同样式的元素. h1 { color:green; } h2 { color:green; } p { color:green; } 为 ...

  2. CSS分组和嵌套选择器

    CSS 分组 和 嵌套 选择器 分组选择器 在样式表中有很多具有相同样式的元素.直线模组哪家好 h1 {     color:green; } h2 {     color:green; } p { ...

  3. CSS:CSS 分组 和 嵌套 选择器

    ylbtech-CSS:CSS 分组 和 嵌套 选择器 1.返回顶部 1. CSS 分组 和 嵌套 选择器 Grouping Selectors 在样式表中有很多具有相同样式的元素. h1 { col ...

  4. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  5. 【代码笔记】Web-CSS-CSS 分组和嵌套

    一, 效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

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

    分组选择器, 将一个样式应用于多个类,或者标签啥的 每个选择器用逗号隔开 <!DOCTYPE html> <html> <head> <meta charse ...

  7. 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器

    今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...

  8. 前端知识之CSS(1)-css语法、css选择器(属性、伪类、伪元素、分组与嵌套)、css组合器

    目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.c ...

  9. less可以做什么?less详解!(less嵌套选择器实现纯CSS二级导航)

    前端技术众多,作为一名前端工程师,我们每接触新技术首先要懂得此技术的优势和劣势,这是最基本的.往深入了说还需要懂得技术的应用场景,配合的技术等,方便为以后架构做准备.而less作为一门CSS预处理语言 ...

随机推荐

  1. Delphi-idHttp-JSON用法

    从国外网站抄来的代码 Delphi source: http := TIdHttp.Create(nil);http.HandleRedirects := True;//允许头转向http.ReadT ...

  2. CodeForces 573A Bear and Poker

    题目链接:http://codeforces.com/problemset/problem/573/A 题目大意:此题要求一组数中的元素乘以2或者乘以3后得到的数都一样,其实就是判断这些数除去2和3这 ...

  3. leecode Binary Tree Level Order Traversal II java

    做完这道题,只能说基本功很重要,数组中套数组就不会用了,过几天吧1做了,看自己到底等没. https://oj.leetcode.com/problems/binary-tree-level-orde ...

  4. [LeetCode] 287. Find the Duplicate Number 解题思路

    Given an array nums containing n + 1 integers where each integer is between 1 and n (inclusive), pro ...

  5. Dijkstra算法求解最短路径分析

    最短路径是图论算法中的经典问题.图分为有向图.无向图,路径权值有正值.负值,针对不同的情况需要分别选用不同的算法.在维基上面给出了各种不同的场景应用不同的算法的基本原则:最短路问题. 针对无向图,正权 ...

  6. zoj3329 One Person Game

    One Person Game Time Limit: 1 Second Memory Limit: 32768 KB Special Judge There is a very simple and ...

  7. [置顶] 在Ubuntu下实现一个简单的Web服务器

    要求: 实现一个简单的Web服务器,当服务器启动时要读取配置文件的路径.如果浏览器请求的文件是可执行的则称为CGI程序,服务器并不是将这个文件发给浏览器,而是在服务器端执行这个程序,将它的标准输出发给 ...

  8. AppiumLibrary

    Strategy Example Description identifier Click Element|identifier=my_element Matches by @id or @name ...

  9. ABAP程序的效率(转)

    在网上看到的一篇文章: 程序的效率是每个程序员都应该重视的,无论您是采用哪一种语言进行开发. 程序有时候越短,并不一定越快,有时候程序很多代码,但不一定会很慢. 性能是一把双刃剑, 获得时间效率的同时 ...

  10. jquerymobile-可折叠内容(Collapsible content)

    可能我们在开发中遇到过这样的问题,我们只是看到一个题目或者简单的介绍,然后一点击会在下面展开对应的详细的内容.在jqm中实现这个效果很简单.下面给出一段例子代码: <!DOCTYPE html& ...