web前端——css高级选择器
时间:2019-10-21
本文章向大家介绍web前端——css高级选择器,主要包括web前端——css高级选择器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
高级选择器分为:
-
后代选择器
-
子代选择器
-
并集选择器
-
交集选择器
后代选择器
使用空格表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)
.container p{ color: red; } .container .item p{ color: yellow; }
子代选择器
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
1 .container>p{ 2 color: yellowgreen; 3 }
并集选择器
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素,可以使用并集选择器
/*并集选择器*/ h3,a{ color: #008000; text-decoration: none; }
比如像百度首页使用并集选择器。
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin: 0; padding: 0 } /*使用此并集选择器选中页面中所有的标签,页面布局的时候会使用*/
交集选择器
使用.表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.active
比如有一个<h4 class='active'></h4>这样的标签。
那么
h4{ width: 100px; font-size: 14px; } .active{ color: red; text-decoration: underline; } /* 交集选择器 */ h4.active{ background: #00BFFF; }
它表示两者选中之后元素共有的特性。
原文地址:https://www.cnblogs.com/bilx/p/11713498.html
- STL中的nth_element()方法的使用
- C++queue容器学习(详解)
- 牛客面经 |这可能不只是一篇面经
- 图的基本算法(BFS和DFS)
- C++STL中set的使用策略(详解)
- Codeforces Round #409 (rated, Div. 2, based on VK Cup 2017 Round 2)(A.思维题,B.思维题)
- 设计模式六大原则(1):单一职责原则
- 设计模式六大原则(2):里氏替换原则
- Selenium2+python自动化72-logging日志使用
- Codeforces Round #395 (Div. 2)(A.思维,B,水)
- php实现图形计算器
- Selenium2+python自动化73-定位的坑:class属性有空格
- 华中农业大学第五届程序设计大赛网络同步赛题解
- Java构造方法与析构方法实例剖析
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Android Studio 实现九宫格功能
- Android user版通过adb_enable开启adb 调试 不提示对话框的流程分析
- Android实现圆线按钮进度效果
- Flutter 透明状态栏及字体颜色的设置方法
- Android实现带有进度条的按钮效果
- Android 自定义View实现多节点进度条功能
- android studio无法添加 bmob sdk依赖问题及解决方法
- Android自定义ToolBar并实现沉浸式的方法
- python初学者笔记—入门基础知识
- Android SurfaceView画板操作
- Android利用Andserver搭建服务器的详细教程
- 位运算处理进制转换问题
- python的to_sql那点儿事
- Android自定义控件之刻度尺控件
- Android 使用Vibrator服务实现点击按钮带有震动效果