站在CSS3的肩上定义选择器

时间 2020-05-11

标签站在 css3 css 肩上定义选择器栏目 CSS 繁體版

原文原文链接

按上下文选择元素

按祖先元素选择要格式化的元素
- 输入ancestor，这里的ancestor是但愿格式化的元素的祖先元素的选择器。
- 输入一个空格（必不可少）。
- 若是须要，对后续的每一个祖先元素重复第（1）和（2）步。
- 输入descendant，这里的descendant是要格式化的元素的选择器。
按父元素选择要格式化的元素
- 输入parent，这里的parent是包含直接格式化的元素的选择器。
- 输入>（大于号）。
- 若是须要，对后代每一个父元素重复第（1）步和第（2）步。
- 输入child，这里的child是要格式化的元素的选择器。

.architect > p{
    　　color:red;
}
/*这个选择器仅仅选择architect类元素的子元素（而非子子元素，子子子元素等）的p元素。包含于任何其余元素的p元素均不会被选择*/

按相邻同胞元素（sibling）选择要格式化的元素

...
<body>
            <h1></h1>
            <p></p>
            <h2></h2>
</body>    

/*
    相邻同胞元素是直接相互毗邻的元素，即他们之剑没有其余的同胞元素
*/

- 　输入sibling，这里的sibling是包含在同一元素中的、直接出如今目标元素钱的元素的选择器。
- 　输入 + （加号）。
- 　若有须要，对每一个后续的同胞元素重复第（1）步和第（2）步。
- 　输入element，这里的element是要求格式化的元素的选择器。

 .architect  p+p{
          color:red;  
    }    
　　/*相邻同胞结合符只选择直接跟在同胞p元素以后的元素*/

/*
　　普通同胞元素结合符：能够选择那些并不是直接出如今另外一个同胞元素后面的同胞元素。它与相邻同胞结合符的惟一区别是使用~（波浪号）代替 +（加号）。例如，h1~h2{color：red;}会让任何属于同一父元素的同胞h1后面的h2元素显示为红色（它们能够直接相邻，也能够不直接相邻）
*/

选择第一个或最后一个元素

　　：first-child 选择第一个子元素css

　　：last-child 选择最后一个子元素html

选择元素的第一个字母或者第一行

　　：first-letter 选择元素的第一个字母htm

　　：first-line 选择元素的第一行blog

几个经常使用的伪类element

　　：link 未被激活的连接样式字符串

　　：visited 已激活过的连接样式it

　　：focus 获取鼠标焦点的样式ast

　　：hover 设置光标指向连接是连接的外观class

　　：active 激活过的连接的外观样式

按属性选择元素

　　a：[attribute] 匹配具备指定属性attribute，不管具体值是什么的a标签

　　a: [attribute="value"] 匹配指定属性值的a标签

　　a：[attribute~="value"] 属性值是以空格分隔的多个单词，其中有一个彻底匹配指定值

　　a：[attribute|="value"] 属性值以value-打头

　　a：[attribute^="value"] 属性值以value开头，value为完整的单词或单词的一部分

　　a：[attribute$="value"] 属性值以value结尾，value为完整的单词或单词的一部分

　　a：[attribute*="value"] 属性值为指定值的子字符串

站在CSS3的肩上定义选择器

按上下文选择元素

按祖先元素选择要格式化的元素

按父元素选择要格式化的元素

按相邻同胞元素（sibling）选择要格式化的元素

选择第一个或最后一个元素

选择元素的第一个字母或者第一行

按属性选择元素