ylbtech-CSS:CSS 组合选择符
1.返回顶部
1、

CSS 组合选择符


CSS 组合选择符

组合选择符说明了两个选择器直接的关系。

CSS组合选择符包括各种简单选择符的组合方式。

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

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

后代选取器

后代选取器匹配所有值得元素的后代元素。

以下实例选取所有 <p> 元素插入到 <div> 元素中:

实例

div p
{
background-color:yellow;
}

尝试一下 »


子元素选择器

与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

以下实例选择了<div>元素中所有直接子元素 <p> :

实例

div>p
{
background-color:yellow;
}

尝试一下 »


相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

实例

div+p
{
background-color:yellow;
}

尝试一下 »


后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

实例

div~p
{
background-color:yellow;
}

尝试一下 »

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

CSS:CSS 组合选择符的更多相关文章

  1. CSS 组合选择符

    CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) ...

  2. java:CSS(定位,组合选择符,边距,Float,Table的样式,显示和隐藏,换行,盒子模型,iframe和frameset框架)

    1.绝对定位,相对定位,fixed定位(指浏览器窗口定位): <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  3. CSS组合选择符

    组合选择符说明了两个选择器直接的关系. 目录: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选取器 后代选取器匹配所有值得 ...

  4. 【代码笔记】Web-CSS-CSS组合选择符

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

  5. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

     水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...

  6. CSS那些事儿-阅读随笔1(CSS简介与选择符)

    最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...

  7. CSS知识点:选择符

    一.选择符的种类 1)通配选择符 它用来给页面所有的元素设置样式 *{margin:0;padding:0;}.但是实际当中不建议这么用,页面中用到了哪些样式,就统一设置样式,因为*影响性能.也可以给 ...

  8. CSS(二)选择符

     2019-04-11 22:14:23 1.类型选择符(标签选择符)  html中所有的标签都可以直接对元素选择  p em i a html body.....   特点:对页面中所有当前类型的元 ...

  9. css伪类选择符

    1):link/:visited/:hover/:active (爱恨原则 love/hate)2):first-child/:last-child/:only-child/:nth-child(n) ...

随机推荐

  1. nodejs在Windows 7上的搭建

    一.安装nodejs 去官网下载https://nodejs.org/download/,我选择下载node-v9.3.0-x64.msi ,最新版本, 安装路径放在了D盘,因为C盘的空间不够了,直接 ...

  2. I/O 优化

    数字的读入优化: /* I/O * Au: GG */ #include <cstdio> #include <cstdlib> #include <cmath> ...

  3. PAT 1042 Shuffling Machine (20 分)

    1042 Shuffling Machine (20 分)   Shuffling is a procedure used to randomize a deck of playing cards. ...

  4. 用FastDFS一步步搭建图片服务器(单机版)

    一.FastDFS介绍 FastDFS开源地址:https://github.com/happyfish100 参考:分布式文件系统FastDFS设计原理 参考:FastDFS分布式文件系统 1.简介 ...

  5. 原生JavaScript 模拟alert对话框

    Window.prototype._alert = function() { //创建一个大盒子 var box = document.createElement("div"); ...

  6. (转)Adaboost

    基本原理 Adaboost算法基本原理就是将多个弱分类器(弱分类器一般选用单层决策树)进行合理的结合,使其成为一个强分类器. Adaboost采用迭代的思想,每次迭代只训练一个弱分类器,训练好的弱分类 ...

  7. mac下jmeter的安装

    1.下载jmeter for jmeter 自行网络下载,也可以在我提供的网盘中下载 jmeter3.3链接:https://pan.baidu.com/s/1AVhZjKmN9s7AOxfyONeB ...

  8. java中接口的简单运用&java中的一些异常(运用myeclipse)

    package test;//创建一个名为test的包 public class A4paper implements Paper { public String getSize(){ return& ...

  9. FrameWork内核解析之Handler消息机制(二)

    阿里P7Android高级架构进阶视频(内含Handler视频讲解)免费学习请点击:https://space.bilibili.com/474380680 一.Handler 在Android开发的 ...

  10. window下eclipse搭建hadoop环境

    1 生成插件jar 1.1 安装java,ant运行环境 1.2 下载hadoop-2.5.0.tar.gz并解压到指定目录 1.3 下载hadoop2x-eclipse-plugin-master. ...