CSS选择器

dilidili131

已于 2022-07-07 22:43:15 修改

阅读量240

点赞数

分类专栏：前端html / css 文章标签： css css3

于 2021-05-01 22:20:25 首次发布

本文链接：https://blog.csdn.net/qq_40619550/article/details/116331775

版权

前端html / css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS选择器

标签选择器

可以同时给多个同类型标签设置属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: blue;
            font-size: 20px;
        }
        p{
            color: red;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>张三</div>
    <div>李四</div>
    <div>王二麻子</div>
    <p>关羽</p>
    <p>马可波罗</p>
    <p>貂蝉</p>
</body>
</html>

在这里插入图片描述

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .c-red{
            color: red;
        }
        .c-blue{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="c-red">张三</div>
    <div>李四</div>
    <div>王二麻子</div>
    <p class="c-red"> 关羽</p>
    <p>马可波罗</p>
    <p class="c-blue">貂蝉</p>
</body>
</html>

在这里插入图片描述

ID选择器

使用方法同class，但只能用一次

伪类选择器

用于给某些选择器添加特殊的效果。

链接伪类选择器

:link /未访问的链接/
:visited /已访问的链接/
:hover /鼠标移动到连接上/
:active /选定的链接/
顺序尽量不要颠倒,按照lvha的顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link{
            font-size: 16px;
            color: gray;
            font-weight: 700;
        }
        a:visited{
            font-size: 16px;
            color: blue;
            font-weight: 700;
        }
        a:hover{
            font-size: 16px;
            color: red;
            font-weight: 700;
        }
        a:active{
            font-size: 16px;
            color: green;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">链接</a>
        <a href="#">登录</a>
    </div>
</body>
</html>

结构（位置）伪类选择器

:first-child ：选取属于其父元素的首个子元素的制定选择器
:last-child ：选取属于其父元素的最后一个子元素的制定选择器
:nth-child(n) ：选取其父元素的低N个子元素，不论元素的类型,even：偶数，odd：奇数
:nth-last-child(n) ：选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       li:first-child{
            color: blue;
       }
       li:last-child{
           color: red;
       }
       li:nth-child(5){
           color: burlywood;
       }
    </style>
</head>
<body>
    <ul>
        <li>第一个孩子</li>
        <li>第二个孩子</li>
        <li>第三个孩子</li>
        <li>第四个孩子</li>
        <li>第五个孩子</li>
        <li>第六个孩子</li>
        <li>第七个孩子</li>
    </ul>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       li:nth-child(even){  /*也可用2n*/
           color: burlywood;
       }
       li:nth-child(odd){  /*也可用2n+1*/
           color: red;
       }
    </style>
</head>
<body>
    <ul>
        <li>第一个孩子</li>
        <li>第二个孩子</li>
        <li>第三个孩子</li>
        <li>第四个孩子</li>
        <li>第五个孩子</li>
        <li>第六个孩子</li>
        <li>第七个孩子</li>
    </ul>
</body>
</html>

在这里插入图片描述

目标伪类选择器

:target ：用于选取当前活动的目标元素

dilidili131

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

CSS选择器标签选择器可以同时给多个同类型标签设置属性。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal
复制链接

扫一扫

专栏目录