css 选择器的使用

css选择器的使用方法

今天给大家分享一下css常用的选择器使用。首先我们先了解一下为什么要使用选择器。

引入、

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

HTML页面中的元素就是通过CSS选择器进行控制的，这就要用到我们的css选择器。

选择器的类别：

类型选择器
id选择器
class选择器
通用选择器
群组选择器
后代选择器
伪类选择器
属性选择器
层级选择器
...

一、类型选择器的用法：

样式：

<style>

div{

width: 500px;

height: 500px;

background: #000;

}

</style>

结构：

<body>

</body>

 <style>

        
        div{
            width: 500px;
            height: 500px;
            background: #000;
        }
    </style>
<body>

<div></div>


</body>

运行结果：

css通过类名来控制改变样式

二、id选择器的用法

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>


        #box{
            width: 200px;
            height: 100px;
            background: rgb(248, 2, 2);
        }
    </style>
</head>
<body>

<div id="box"></div>


</body>
</html>

　id选择器用法给标签取一个id=“名称”的属性与属性值，属性值是自己命名。选择器通过#号控制id的标签进行样式的改变。

结果如下：

三、class选择器

class选择器与id选择器比较相似。id选择器是通过di名称来控制标签改变样式，class则是用class名称来改变样式。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>


        .box{
            width: 300px;
            height: 100px;
            background: rgb(245, 13, 245);
        }
    </style>
</head>
<body>

<div class="box"></div>


</body>
</html>

　　结果如下：

class选择器是通过.小数点+名称来进行控制class的标签样式来改变的。

四、通用选择器（*）号

通用选择器就是一个*号控制所有的标签

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

*{
    width: 100px;
    height: 60px;
    background: rgb(219, 55, 55);
    margin: 20px 0;
}
    </style>
</head>
<body>

    <div>  我是一个盒子 </div>
    <h2>我是一个h2标签</h2>


</body>
</html>

　　结果如下：

由于是通用选择符所有会把所有的标签全部选中包括了html body 等标签是所有标签都选中了，这样我们一般都用来清楚内外边距的。

做法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

*{
    margin: 0;
    padding: 0;
}
    </style>
</head>
<body>

    <div>  我是一个盒子 </div>
    <h2>我是一个h2标签</h2>


</body>
</html>

结果如下：

五、群组选择器

通常一般用在带有共同属性的标签上简写代码量

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.box-1,#box-2{
    width: 200px;
    height: 100px;
    background: red;
    margin: 20px 0;
}

    </style>
</head>
<body>

    <div class="box-1">  我是一个盒子 </div>
    <h2 id="box-2">我是一个h2标签</h2>


</body>
</html>

结果如下：

、为了能看的更加清楚我在上下加了外边距。群组选择器的使用方法是在选择器之间用逗号隔开，表示使用共同属性，多个也是一样用逗号隔开。注：逗号需要在英文的状态下输入。

六、后代选择器的使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: red;
        }
.box .box-1{
    width: 100px;
    height: 100px;
    background:gold;
}

    </style>
</head>
<body>

    <div class="box"> 
        <h2 class="box-1">我是后代</h2>
    </div>
   


</body>
</html>

后代选择器就是在父类和子类之间用空格隔开表示第一个标签名称是第二个标签名称的父类，第三个标签名称是第二个标签名称的父类以此类推。

七、伪类选择器伪类选择器又分为许多种类的选择器

例如：

结构性伪类选择器
目标伪类选择器
动态伪类选择器
....

1. 结构性伪类选择器。

如果子集标签类型一致（类名一致）的情况下：采用的是 child
1 : 选择符:first-child{ } 表示第一个
2 : 选择符:last-child{ } 表示最后一个
3 : 选择符:nth-child(val){}
val :
可以是某个数值表示第几个
2n 或者 even 偶数
2n + 1 或者 odd 奇数
4 : 选择符:nth-last-child(){} 倒数第几个
5 : 选择符:only-child{} 当前子集只有一个元素的时候才会被选择

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       div:first-child{
           width: 200px;
           height: 100px;
           background: red;
       }
       div:nth-child(3){
           width: 200px;
           height: 200px;
           background: blue;
       }
       div:last-child{
           width: 100px;
           height: 50px;
           background:gold;
       }

    </style>
</head>
<body>

   <div>我是第一个盒子</div>
   <div>我是第二个盒子</div>
   <div>我是第三个盒子</div>
   <div>我是第四个盒子</div>
   <div>我是第五个盒子</div>
   


</body>
</html>

　结果如下：

这里上面分别展示了

1 : 选择符:first-child{ } 表示第一个
2 : 选择符:last-child{ } 表示最后一个
3 : 选择符:nth-child(val){}

的用法身下的几个类同。

上面一组是类名相同的情况下下面一组是类名不一致的情况下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2:first-of-type{
            width: 200px;
            height: 80px;
            background: blue;
        }
        h2:nth-of-type(4){
            width: 50px;
            height: 60px;
            background: cyan;
        }
        h2:last-of-type{
            height: 100px;
            width: 100px;
            background: red;
        }

    </style>
</head>
<body>

   <div>我是第一个盒子</div>
   <h2>我是第一个h2</h2>
   <h2>我是h2</h2>
   <div>我是盒子</div>
   <div>我是盒子</div>
   <h2>我是h2</h2>
   <h2>我是h2</h2>
   <h2>我是h2</h2>
   <h2>我是h2</h2>
   <div>我是盒子</div>
   <h2>我是h2</h2>
  
   <div>我是盒子</div>
   


</body>
</html>

结果如下：

在同等子集中如果类名不一致的情况下可以使用这一种方法。

4 : 选择符:nth-last-of-type(){} 倒数第几个
5 : 选择符:only-of-type{} 当前子集只有一个元素的时候才会被选择

此些用法类同。

动态伪类选择器：

E:link
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active
用户行为选择器
选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
**E:hover**
用户行为选择器
选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus
用户行为选择器
选择匹配的E元素，而且匹配元素获取焦点

八、属性选择器

1:选择符[属性名] 只要带有当前属性名就会被选中。
2: 选择符[属性名="属性值"] 不仅制定属性名，有指定属性值
3: 选择符[属性名~="属性值"] 属性值为一个词列表，只要包含当前词就会被选中
4: 选择符[属性名^="属性值"] 属性值必须是当前指定的属性值开头的
5：选择符[属性名$="属性值"] 属性值必须是当前指定的属性值结尾的
6: 选择符[属性名*="属性值"] 属性值中只要包含了指定的字符就会被选中
7: 选择符[属性名|="属性值"] 属性值仅是当前指定的属性值，或者是以属性值- 开头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        div[id]{
            width: 50px;
            height: 50px;
            /* 这里我给了上下5外边距的值 为了看的更加方便 */
            margin: 5px 0;
            background: red;
        }
        div[class]{
           width: 100px;
            height: 100px;
            background: blue;
            margin: 5px 0;
        }
        div[class="box3"]{
            width: 200px;
            height: 200px;
            background: gold;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div id="box2"></div>
    <div class="box3"></div>
    <div id="box4"></div>
    <div id="box5"></div>
    <div class="box6"></div>
</body>
</html>

　　代码结果如下：

上面代码就不一一列举了做法都是类同的。

九、层级选择器

父元素>子元素{}
说明：只能选择父元素的最近的一层子元素。

同级元素 + 同级元素{}
说明：通过当前的元素选择符离她最近的下面的同级元素

同级元素 ~ 同级元素{}
说明：通过当前的元素选择符下面的所有的兄弟元素

今天的css属性选择器就分享到这~

posted @ 2020-03-01 15:22 万事胜意。阅读(459) 评论(0) 收藏举报

刷新页面返回顶部

css 选择器的使用

css选择器的使用方法

引入、

选择器的类别：

公告