为成为前端架构师的一天奋斗的gggxc--CSS笔记--1.选择器

1.标签选择器：又叫元素选择器，文档的元素就是最基本的选择器，使用元素名称直接选中元素即可。

<style> 
  p{ 
    height:100px; 
    border:1px solid red; 
  } 
</style>
  <p>one</p> 
  <p>two</p> 
  <p>three</p>

2.类选择器：以点"."开头，后面紧跟一个类名。类名不允许有空格，与元素中class属性的值保持一致。

<style> 
  .first{font-weight: bold;} 
  .done {text-decoration: line-through;} 
</style> 
<ul> 
  <li class="first done">啦啦啦啦啦啦啦</li> 
  <li class="second done">啦啦啦啦啦啦啦</li> 
</u>

      类名相同的元素属于一类元素。

3.ID选择器：以"#"开头，后面紧跟一个ID名(在选择文档中唯一元素的时候该选择器比较有用)

<style> 
  #good { font-family: cursive;} 
</style> 
  <p id="good">啦啦啦啦啦</p>

4.普通选择器：使用"*”来表示普遍选择器，表示选择所有元素(通常用在组合选择器中)

<style> 
  .left>* { width:200px; background-color:#fff} 
</style> 
<div class="left"> 
  <span></span> 
  <dl>
    <dt>推荐</dt> 
    <dd class="current">
      <i class="current_nar"></i>啦啦啦啦啦啦
    </dd> 
  </dl> 
</div>

5.层次选择器

•  相邻同胞选择器----下一个兄弟元素：使用 “+” 隔开两个选择器。
• 一般同胞选择器 之后所有的兄弟元素 ： 使用 “~” 隔开两个选择器。
• 后代选择器： 使用 “ ” 隔开两个选择器。
• 子代选择器 ：使用 “>” 隔开两个选择器。

6.多选择器

• 组合选择器
  多个选择器组合使用，使用 “ , ” 分割。
• 嵌套选择器

  l 多个选择器嵌套使用。

7.属性选择器

• [attr] 选择具有attr属性的元素、无论该属性的值是什么
• [attr = val] 选择具有attr属性的、并且attr的值为val元素
• [attr ^= val] 选择具有attr属性的、并且attr的值以val开头的元素
• [attr $= val] 选择具有attr属性的、并且attr的值以val结尾的元素
• [attr *= val] 选择具有attr属性的、并且attr的值包含val的元素
• [attr ~= val] 选择具有attr属性的、并且attr的值之一为val的元素

8.伪类选择器：伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中。

• 子代元素相关的伪类选择器

      :only-child 选中独生子元素  

      :first-child 选中作为别人第一个孩子的元素  

      :last-child 选中作为别人最后一个孩子的元素 

      :nth-child(n) 选中作为别人第几个孩子元素的元素    

      :nth-last-child(n) 选中作为别人倒数第几个孩子的元素

      :first-of-type 选中作为别人每种类型中的第一个孩子的元素  

      :last-of-type 选中作为别人每种类型中的最后一个孩子的元素 

      :nth-of-type(n) 选中作为别人每种类型中的第几个孩子的元素  

      :nth-last-of-type(n) 选中作为别人每种类型中的倒数第几个孩子的元素

上面的n可以为元素的序号，也可以为特殊的字符：odd，even，n从1开始

• 元素状态相关伪类选择器

      :link 未被访问的状态， a 标签

      :visited 已访问过的状态， a 标签

      :hover 鼠标悬停的状态， a 标签，其他标签也可用

      :active 活动的状态， a 标签，其他标签也可用

      :focus 聚焦的状态

      :checked 用户选中的单选按钮和复选按钮

      :default 默认选中的单选按钮和复选按钮

      :enabled 、 :disabled 可用的表单控件、禁用的表单控件

      :valid 、 :invalid 通过验证的、不通过验证的

      :required 、 :optional 必填的和选填的

      :in-range 、 :out-of-range 在范围内的、在范围外的

9.伪元素选择器：以"::"开头，用在选择器后，用于选择指定的元素。

      ::after 选中之后的不存在的节点，可配合content属性进行内容填充

      ::before 选中之前的不存在的节点，可配合content属性进行内容填充

      ::first-letter 选中第一个文本字符

      ::selection  选中用户在选择的时候的文本

      ::first-line 选中 第一行 文本