选择器

作者: 勿以浮沙筑高台 | 来源:发表于2016-08-28 19:54 被阅读21次

css3选择器总结
「CSS 」选择器
CSS 理解
CSS 学习总结
CSS选择器
CSS知识树
CSS 选择器
CSS3 基本选择器
## CSS选择器
css选择器

CSS有一套用于描述其语言的术语。

strong {
   color:red;
}

在CSS的术语中，上面这段代码被称为一条规则（rule）。这条规则以选择器strong开始，它选择要在DOM中哪些元素上使用这条规则。

Tip:

花括号中的部分称为**声明（declaration）**

关键字color是一个属性, red是其对应的值.

同一个声明中的 属性和值组成一个名值对（property-value pairs），名值对用分号分隔.

这个教程中将类似strong的选择器称为标签选择器（tag selector）
.CSS规范中称之为类型选择器（*type* selector）.

除了标签名称，你还可以在选择器中使用属性值。这样你就可以更具体的
描述你的规则.
其中class和id两个属性具有比较重要的地位。

类型选择器(Class selectors)#####

通过设置class属性，可以为元素指定类名。类名由开发者自己指定。文档中的多个元素可以拥有同一个类名。

在写样式表时，类选择器是以英文句号（.）开头的。

ID选择器(ID selectors)#####

通过设置元素的id属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。
在写样式表时，ID选择器是以#开头的。

如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。

Tips:

你也可以将多个选择器组合起来构成更确定的选择器。

比如，选择器.key 选中所有class属性为 key的元素. 选择器 p.key 选中所有class属性为key的元素<p>元素。

除了class和 id,你还可以用方括号的形式指定其他属性。比如，选择器 [type='button'] 选中所有 type 属性为 button 的元素。

如果样式中包含冲突的规则，且它们具有相同的确定度。那么，后出现的规则优先级高

伪类选择器(Pseudo-class)#####

CSS伪类(pseudo-class) 不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过(:visited)，内容状态(如:checked) , 鼠标位置 (如:hover).
语法：

selector:pseudo-class { 
    property: value;
}

伪类列表

:link
:visited
:active
:hover
:focus
:first-child
:nth-child
:nth-last-child
:nth-of-type
:first-of-type
:last-of-type
:empty
:target
:checked
:enabled
:disabled

基于关系的选择器#####

CSS还有多种机遇关系的选择器。通过它们你可以更精确的选择元素。

常见的基于关系的选择器#####

:限定修饰符

选择器	选择的元素
A E	元素A的任一后代元素E(后代节点指A的子节点，子节点的子节点，以此类推)
A>E	元素A的任一子元素E(直系后代)
E:first-child	任一是其父母结点的第一个子节点的元素E
B + E	元素B的任一下一个兄弟元素E
B ~ E	B元素后面的拥有共同父元素的兄弟元素E

你可以任意组合以表达更复杂的关系。
你还可以使用星号（*）来表示”任意元素“。

使用类型选择器和ID选择器#####

创建一个HTML文件

<!doctype html>
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title>Sample document</title> 
    <link rel="stylesheet" href="style1.css"> 
  </head> 
  <body> 
    <p id="first"> 
      <strong class="carrot">C</strong>ascading 
      <strong class="spinach">S</strong>tyle 
      <strong class="spinach">S</strong>heets 
     </p> 
     <p id="second"> 
      <strong>C</strong>ascading 
      <strong>S</strong>tyle  
      <strong>S</strong>heets 
    </p> 
  </body>
 </html>

创建style.css

strong { color: red; }
.carrot { color: orange; }
.spinach { color: green; }
#first { font-style: italic; }

在浏览器中的效果：

重新组织样式中规则的顺序，你会发现改变这几条规则的顺序不会影响最终效果。

类选择器 .carrot和.spinach比标签选择器 strong 拥有更高优先级。

ID 选择器 #first比类选择器和标签选择器更优先。

使用基于关系的选择器和伪类选择器#####

通过使用基于关系的选择器和伪类选择器，你可以构造出复杂的叠加算法。这是一个常用的技巧，比如可以用来创建纯CSS无JavaScript的下拉菜单（pure-CSS dropdown menus）。关键点就是创建下面这类规则：

div.menu-bar ul ul { 
  display: none;
}
div.menu-bar li:hover > ul { 
display: block;
}

然后将这些规则应用到下面的HTML结构中：

<div class="menu-bar"> 
  <ul> 
    <li> <a href="example.html">Menu</a> 
      <ul> 
        <li> <a href="example.html">Link</a> </li>
        <li> <a class="menu-nav" href="example.html">Submenu</a> 
          <ul> 
            <li> <a class="menu-nav" href="example.html">Submenu</a> 
            <ul> 
              <li><a href="example.html">Link</a></li> 
              <li><a href="example.html">Link</a></li> 
              <li><a href="example.html">Link</a></li> 
              <li><a href="example.html">Link</a></li> 
            </ul> 
          </li> 
          <li><a href="example.html">Link</a></li> 
         </ul> 
        </li> 
      </ul> 
    </li> 
  </ul>
</div>

在浏览器中的效果：