CSS选择器的阅读方式
来源:互联网 发布:阿里云 dns服务器地址 编辑:程序博客网 时间:2024/05/14 00:49
最近在学CSS选择器的部分:
元素选择器器
类选择器
Id选择器
属性选择器
后代选择器
子元素选择器
相邻兄弟选择器
真的是蛮多的了,记录下点自己觉得重要的东西。
选择器的阅读方式应该是从右向左的:
eg1.
在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”,但是要求必须从右向左读选择器。
因此,h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器,可以换成以下说法:“包含 em 的所有 h1 会把以下样式应用到该 em”。
eg2.
h1 + p {margin-top:50px;}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。所以这个选择器的作用对象也就是最右边开始的p。
这种从右向左的阅读方式,在几个选择器结合起来使用的时候尤其有效:
eg1.
html > body table + ul {margin-top:20px;}
这个选择器解释为:选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。
eg2.
table.company td > p上面的选择器会选择作为 td 元素子元素的所有 p 元素,这个 td 元素本身从 table 元素继承,该 table 元素有一个包含 company 的 class 属性
eg3
同样伪类中也应该从右向左读:
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素(在 HTML 中,这肯定是 ol 或 ul 元素)第一个子元素的所有 li 元素变成大写。
请访问该链接,来查看这个 :first-child 实例的效果。
提示:最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。
个人感觉这边有点像C#中依赖属性的意思。
- CSS选择器的阅读方式
- css 引入方式,选择器,选择器的优先级
- CSS基础知识一(CSS的应用方式、CSS选择器、选择器的声明、文字CSS效果、)
- CSS-引入方式,选择器
- CSS 引入方式及选择器的用法 的初体验
- css引入方式和选择器
- css的4种引入方式5种选择器
- 嵌入css 的三种方式和css3 选择器
- css选择器&选择器的优先级
- CSS——CSS的三种书写方式 CSS选择器
- 关于css的选择器
- CSS选择器的优先级
- 常用css的选择器
- CSS的选择器
- 基本的CSS选择器
- CSS的选择器
- CSS选择器的顺序
- CSS的选择器
- 【计蒜客】难题题库 002 整除问题
- Python实现Linux环境下的ls命令
- 对象——原型属性
- Convolutional Networks(要点)
- jquery实现图片轮换
- CSS选择器的阅读方式
- 黑马程序员——OC语言基础---封装的概念及原理
- PagerSlidingTabStrip+ViewPager
- java className失败的原因
- Ubuntu下如何找回 /var/log/messages
- 初学Kruskal——Prime
- iOS 使用MJRefresh刷新
- java基础
- springmvc 集成apache cxf 开发webservice 示例