>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 20630 个阅读者 刷新本主题
 * 贴子主题:  CSS 分组和嵌套 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2019-08-10 19:50:15     消息  查看  搜索  好友  邮件  复制  引用

  

CSS  分组 和  嵌套 选择器

分组选择器

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

h1
{
    color:green;
}

h2
{
    color:green;


p
{
    color:green;
}

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

     每个选择器用逗号分隔。

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

范例

h1 , h2 , p
{
     color: green  ;
}

嵌套选择器

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

     在下面的例子设置了三个样式:    
  •   p{ }: 为所有 p 元素指定一个样式。
  •   .marked{ }: 为所有 class="marked" 的元素指定一个样式。
  •   .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
  •   p.marked{ }: 为所有 class="marked" p 元素指定一个样式。

范例

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

       程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-03-01 09:23:22 重新编辑]
  Java面向对象编程-->第一个Java程序
  JavaWeb开发-->在Web应用中访问Web服务
  JSP与Hibernate开发-->数据库事务的概念和声明
  Java网络编程-->基于MVC和RMI的分布式应用
  精通Spring-->绑定CSS样式
  Vue3开发-->创建综合购物网站应用
  10个 Web 开发人员的常用的 Chrome 扩展程序
  最新的Vue面试题大全含源码级回答,吊打面试官系列
  常用CSS样式属性大全
  axios 发 post 请求,后端接收不到参数的解决方案
  拯救React的hooks:react的问题和hooks的作用
  Vue CLI内网安装(禁止运行vue指令解决方案)
  Vue经典面试题: Vue.use和Vue.prototype.$xx有血缘关系吗? -
  JS对树形数据的遍历和过滤,
  JavaScript 进制转换的实用代码
  jQuery 删除元素
  JavaScript的HTML DOM MenuItem 对象
  CSS3 多列布局
  CSS 网页布局
  JavaScript 的HTML DOM 事件
  JavaScript prototype(原型对象)
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。