常见选择器

选择器

一、元素选择器

1.标签选择器

选择器的功能：选中要添加样式的标签元素。

标签选择器

• 通过标签名直接选择相应的标签。
• 不管有多复杂的嵌套关系，标签的位置就算藏得很深，依然可以被标签选择器命中。

(1)格式

标签名{

​ 声明;

​ }

eg：

        div{
        color: red;
        }
        p{
            background-color: sandybrown;
        }
        a{
            text-decoration: none;
        }
        li{
            list-style: none;
        }

(2)作用

• 利用标签选中所有的特性，进行默认样式的清除。
• 复杂选择器中一部分使用。

2.ID选择器

(1)格式

#ID值{

​ 声明;

​ }

eg:

        #fristP{
            font-size: 24px;
            color: #a06649;
        }

(2)作用

​ 选中页面中唯一的一个标签。

注意：

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

3.类选择器

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

(1)格式

.class值{

​ 声明;

​ }

eg:

        .redFont{
            color: red;
        }
        .div1{
            background-color: seagreen;
        }

(2)优点

​ 可以选择一部分标签，设置相同的样式。

注意：

• class值可以不唯一。类选择器选中的是拥有相同class值得标签元素。
• 一个标签可以拥有多个class值。
• 命名规则与ID相同。
• 类写样式，ID写行为。

4.通配符（*）

*:表示选中所有标签。（包含body标签。慎用）

eg;

        *{
            color: seagreen;
            /* 外边距 */
            margin: 0;
            /* 内边距 */
            padding: 0;
          }

**使用场景：**清除默认的样式。

现在已经不常用了，因为效率不高(一刀切，所有的标签都会去执行一次css代码)。

二、关系选择器

1.后代选择器

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

格式

选择器1 选择器2{

​ 声明;

}

eg:

        p span{
            background-color: rebeccapurple;
        }

注意：

• 选择器1必须是选择器2的祖先元素。
• IE7开始兼容，IE6不兼容。
• 定义时，选择器之间使用空格隔开。空格左侧必须是右侧的祖先元素。
• 当要把某些元素中的某些元素进行样式修改时，就要使用后代选择器。

2.子代选择器

子代选择器：通过标签间的嵌套关系，来选中相应标签的子元素。

格式

选择器1>选择器2{

​ 声明;

}

eg:

        div>p{
            background-color: rosybrown;
        }

注意: > 左右两边的关系必须是父子关系。

3.相邻选择器

格式

选择器1+选择器2{

​ 声明;

}

eg:

        h3+p {
            color: slateblue;
        }

选择紧贴在选择器1元素之后的选择器2元素，两者必须同属于一个父级。

(IE7兼容，IE6不兼容。)

4.兄弟选择器

兄弟选择器:同属于一个父级。

格式

选择器1 ~ 选择器2{

声明;

}

eg:

        h3 ~ p{
            color: slateblue;
        }

选中的是选择器1元素之后的所有同级的选择器2元素。

5.交集选择器

交集选择器：既满足条件1，又满足条件2

格式

选择器1选择器2{

​ 声明;

}

eg:

        span.nav.span1{
            background-color: royalblue;
        }

注意：

• 交集选择器如果是标签选择器与类选择器的混写，则必须将标签选择器放在前面。
• 连续交集；既满足条件1，又满足条件2，还满足条件3.

6.并集选择器

格式

选择器1,选择器2{

​ 声明;

}

eg:

        h1,h2,span{
            color: royalblue;
        }

三、伪类选择器

(1)定义

同一个标签，根据不同的状态，拥有不同的样式，这就叫做“伪类”。伪类使用：（冒号）来表示。

(2)格式

选择器：伪类名{

​ 声明;

}

1.序选择器

first-child:

​ 判断当前元素是否为父元素的第一个子元素，如果是，则选中。

last-child:

​ 判断当前元素是否为父元素的最后一个子元素，如果是，则选中。

only-child;

​ 判断当前元素是否为父元素的唯一一个子元素，如果是，则选中。

格式

选择器:first-child{

​ 声明;

}

eg:

        li:first-child {
            color: royalblue;
        }

2.nth-child(n)选择器

格式

​ n表示父元素下的第几个子元素。

​ E：nth-child（n）{

​ 声明;

​ }

eg:

        /*n 表示一个乘法因子，可以是0,1,2....自然数  */
        li:nth-child(2n+1) {
            color: slateblue;
        }
        li:nth-child(2n) {
            color: green;
        }

3.nth-of-type选择器

格式

E：nth-of-type(n){

声明;

}

eg:

        /* 选中父元素下的第二个p标签 */
        p:nth-of-type(2) {
            background-color: indianred;
        }
         /* 选中父元素下的第三个span标签 */  
        span:nth-of-type(3) {
            background-color: green;
            font-size: 30px;
        }

选中父元素下的同类型中的第n个元素

• 要使该属性生效，E必须是某个元素的子元素，E的父元素最高可以是html。
• 该选择器命中的是父元素中的第n个为E的子元素，不管第n个子元素是否为E.

4.link

静态伪类 只能用于超链接的样式。

：link 超链接点击之前

        a:link{
            color: green;
        }

5.visited

静态伪类 只能用于超链接的样式。

：visited 超链接被访问过之后。

        a:visited{
            color: pink;
        }

6.hover

动态伪类 针对所有的标签都适用

：hover “悬停” 鼠标放在标签上时。

        a:hover{
            text-decoration: none;
        }

7.active

动态伪类 针对所有的标签都适用

：active “激活” 鼠标点击标签，不松手时。

       a:active{
            color: red;
        }    

8.focus

特殊 针对表单元素。

：focus 是某个标签获得焦点时的样式。

       input:focus{
           background-color: sienna;
       }

对于a标签有4种伪类

对应四种状态:

• ：link 点击之前

• ：visited 访问之后

• ：hover 鼠标悬停

• ：active 激活 鼠标点击时。

  使用时的顺序：link visited hover active（lvha—爱恨准则）