学习选择器

标签选择器

选择器的功能：

    选中要添加样式的标签元素。
    什么是标签选择器？
    通过标签名直接选择相应的标签。
    不管有多复杂的嵌套关系，标签的位置就算藏得很深，依然可以被标签选择器命中。

    格式：标签名{
        声明;
    }
    标签选择器的作用：
        1.利用标签选中所有的特性，进行默认样式的清除。
        2.复杂选择器中一部分使用。

eg:

我是div盒子

我是段落3

我是一级标题

我是段落

我是段落2

百度一下

• 
  
• 我是li
• 
  

ID选择器

ID选择器作用：
选中页面中唯一的一个标签。

    格式：#ID值{
        声明;
    }
    【注】：
    1.id值必须是唯一的，在一个页面中只能出现一次。如果多次出现重复的ID值是不符合规范的。
    2.所有的标签都有ID属性。ID命名的规范：由字母，下划线，中划线，数字组成。不能以数字开头。
    3.见名知意。不要起毫无意思的名字。
    4.驼峰写法：SearchButton(大驼峰) searchButton(小驼峰，推荐) 多个单词，从第二个单词开始，每个单词的首字母大写。
    5.下划线写法：search_button   多个单词，从第二个单词开始，每个单词的前面添加一条下划线。
    【注】：id选择器尽量不要在css中使用，而是配合js使用。

我是div1

我是div2

我是div3

年轻人不讲武德

我大意了没有闪

类选择器

类选择器：
通过标签中的class属性来选择标签

    格式：
    .class值{
        声明;
    }
    优点：可以选择一部分标签，设置相同的样式。
    【注】
    1.class值可以不唯一。类选择器选中的是拥有相同class值得标签元素。
    2.一个标签可以拥有多个class值。
    3.命名规则与ID相同。

    类上写样式，ID写行为。
-->

我是div1

我是div2

我是div3

年轻人不讲武德

我大意了没有闪

后代选择器

后代选择器：

通过标签的嵌套关系，来缩小选择范围，在范围内查找相关的元素。

格式：选择器1  选择器2{
    声明;
}
选择器1必须是选择器2的祖先元素。 
IE7开始兼容，IE6不兼容。
【注】
1.定义时，选择器之间使用空格隔开。空格左侧必须是右侧的祖先元素。
2.当要把某些元素中的某些元素进行样式修改时，就要想要使用后代选择器。
-->

我是span标签

我是span标签2

我是span标签3

子代选择器

子代选择器：

通过标签间的嵌套关系，来选中相应标签的子元素。
格式：
选择器1>选择器2{
    声明;
}
【注】>左右两边的关系必须是父子关系。

-->

我是span标签

我是span标签2

我是span标签3

交集选择器

交集选择器
既满足条件1，又满足条件2.
格式：
选择器1选择2{
声明;
}
【注】
1.交集选择器如果是标签选择器与类选择器的混写，则必须将标签选择器放在前面。
2.连续交集 既满足条件1，又满足条件2，还满足条件3.

我是span标签

我是span标签2

我是span标签3

并集选择器

交集选择器
既满足条件1，又满足条件2.
格式：
选择器1选择2{
声明;
}
【注】
1.交集选择器如果是标签选择器与类选择器的混写，则必须将标签选择器放在前面。
2.连续交集 既满足条件1，又满足条件2，还满足条件3.

我是span标签

我是span标签2

我是span标签3

序选择器

序选择器
first-child
判断当前元素是否为父元素的第一个子元素，如果是，则选中。
last-child
判断当前元素是否为父元素的最后一个子元素，如果是，则选中。
only-child
判断当前元素是否为父元素的唯一一个子元素，如果是，则选中。
–>
//

• 
  
• 我是第一个li
• 
  
• 我是第二个li
• 
  
• 我是第三个li
• 
  
• 我是第四个li
• 
  
• 我是第五个li
• 
  

-->

• 我是第一个li
• 我是第二个li
• 我是第三个li
• 我是第四个li
• 我是第五个li

相邻选择器

序选择器
first-child
判断当前元素是否为父元素的第一个子元素，如果是，则选中。
last-child
判断当前元素是否为父元素的最后一个子元素，如果是，则选中。
only-child
判断当前元素是否为父元素的唯一一个子元素，如果是，则选中。
–>

• 我是第一个li
• 我是第二个li
• 我是第三个li
• 我是第四个li
• 我是第五个li