CSS:CSS 组合选择符
ylbtech-CSS:CSS 组合选择符 |
1.返回顶部 |
CSS 组合选择符
CSS 组合选择符
![]() |
组合选择符说明了两个选择器直接的关系。 |
---|
CSS组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式:
- 后代选取器(以空格分隔)
- 子元素选择器(以大于号分隔)
- 相邻兄弟选择器(以加号分隔)
- 普通兄弟选择器(以破折号分隔)
后代选取器
后代选取器匹配所有值得元素的后代元素。
以下实例选取所有 <p> 元素插入到 <div> 元素中:
子元素选择器
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
以下实例选择了<div>元素中所有直接子元素 <p> :
相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:
后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :
2.返回顶部 |
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
6.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
CSS:CSS 组合选择符的更多相关文章
- CSS 组合选择符
CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) ...
- java:CSS(定位,组合选择符,边距,Float,Table的样式,显示和隐藏,换行,盒子模型,iframe和frameset框架)
1.绝对定位,相对定位,fixed定位(指浏览器窗口定位): <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- CSS组合选择符
组合选择符说明了两个选择器直接的关系. 目录: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选取器 后代选取器匹配所有值得 ...
- 【代码笔记】Web-CSS-CSS组合选择符
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...
- CSS那些事儿-阅读随笔1(CSS简介与选择符)
最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...
- CSS知识点:选择符
一.选择符的种类 1)通配选择符 它用来给页面所有的元素设置样式 *{margin:0;padding:0;}.但是实际当中不建议这么用,页面中用到了哪些样式,就统一设置样式,因为*影响性能.也可以给 ...
- CSS(二)选择符
2019-04-11 22:14:23 1.类型选择符(标签选择符) html中所有的标签都可以直接对元素选择 p em i a html body..... 特点:对页面中所有当前类型的元 ...
- css伪类选择符
1):link/:visited/:hover/:active (爱恨原则 love/hate)2):first-child/:last-child/:only-child/:nth-child(n) ...
随机推荐
- jekins—持续集成
json转换为Python的字典形式 Martin fowler:通过自动化的构建,编译-发布-自动化测试,尽早的发现集成的错误 持续集成的要素: 统一的代码库 自动构建编译 自动测试(单元测试) 每 ...
- win10配置 samba
一.先確認Linux中smb正確配置可以使用命令smbclient -L //localhost/ 二.win10配置1.打開win10對smb1.0/cifs檔共用支援2.本地群組原則編輯,修改如下 ...
- python re模块常用的正则表达式
'.' 默认匹配除\n之外的任意一个字符,若指定flag DOTALL,则匹配任意字符,包括换行 '^' 匹配字符开头,若指定flags MULTILINE,这种也可以匹配上(r&qu ...
- PHP 图片裁切
PHP CLASS TO CREATE IMAGE THUMBANILS Some years ago, I wrote a PHP class to create image thumbnails ...
- maven命名
<dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpcl ...
- java部署:CentOS 7下Tomcat安装与配置教程(Tomcat开机启动)
一.前言 1.本教程主要内容 Tomcat安装与基础配置 Tomcat开机启动配置 2.本教程适用范围与环境信息 适用范围 软件/工具 版本说明 CentOS CentOS 7 Tomcat Tomc ...
- Python:如何获取一个用户名的组ID
getpwname只能得到gid一个username. import pwd myGroupId = pwd.getpwnam(username).pw_gid getgroups只能获取groups ...
- 备份一下alias喽
# 每次grep都显示出行号示出行号 alias grep="grep -n" # grep反向选择并显示行号显示行号 alias vgrep="grep -n -v&q ...
- Android中使用VideoView 播放视频
VideoView一般结合MediaController类使用,它会提供一个友好的图形界面,通过该界面可以控制视频的播放 package com.test.videoview; import andr ...
- shell script test指令的测试功能 &和&&,|和|| 区别 变量名赋值=号前后的空格问题(天坑)
小程序告一段落,达到阶段性目标.下一步继续Linux的学习....脑子不够用啊...真费... 书中介绍..检测系统某些文件或者相关属性时,用test指令.. 例如.测试某个文档目录是否存在可以 t ...