CSS选择器

最新推荐文章于 2024-07-14 12:57:13 发布

QKain

最新推荐文章于 2024-07-14 12:57:13 发布

阅读量43

点赞数 1

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

本文链接：https://blog.csdn.net/qq_44491532/article/details/115429870

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS选择器：

基本选择器：

选择器优先级：id选择器>类选择器>标签选择器

标签选择器：标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器-标签选择器</title>
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>我是h1标签</h1>
</body>
</html>

类选择器：.类{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器-类选择器</title>
    <style>
        .c1{
            color: red;
        }
    </style>
</head>
<body>
<h1 class="c1">我是h1标签</h1>
</body>
</html>

id选择器：#id{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器-id选择器</title>
    <style>
        #i1{
            color: red;
        }
    </style>
</head>
<body>
<h1 id="i1">我是h1标签</h1>
</body>
</html>

层次选择器：

后代选择器：元素元素{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器-后代选择器</title>
    <style>
        body .c1{
            color: red;
        }
    </style>
</head>
<body>
<h1 class="c1">我是h1标签</h1>
</body>
</html>

子选择器：元素>元素{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器-子选择器</title>
    <style>
        body>h1{
            color: red;
        }
    </style>
</head>
<body>
<h1 class="c1">我是h1标签</h1>
<ul>
    <li>li1</li>
    <li>li2</li>
</ul>
</body>
</html>

相邻兄弟选择器（向下一个）：元素 + 元素{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器-相邻兄弟选择器</title>
    <style>
        .li2 + li{
            color: red;
        }
    </style>
</head>
<body>
<h1 class="c1">我是h1标签</h1>
<ul>
    <li>li1</li>
    <li class="li2">li2</li>
    <li>li3</li>
</ul>
</body>
</html>

通用兄弟选择器（选择的元素下面所有的）：元素 ~ 元素{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器-通用兄弟选择器</title>
    <style>
        .li2 ~ li{
            color: red;
        }
    </style>
</head>
<body>
<h1 class="c1">我是h1标签</h1>
<ul>
    <li>li1</li>
    <li class="li2">li2</li>
    <li>li3</li>
    <li>li4</li>
</ul>
</body>
</html>

结构伪类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
        ul li:first-child{
            color: red;
        }
        ul li:last-child{
            color: blue;
        }
        /* p父元素的第一个子p元素 受类型干扰*/
        p:nth-child(1){
            color: yellow;
        }
        /* p父元素的第一个子p元素 不受类型干扰*/
        p:nth-of-type(1){
            color: palegoldenrod;
        }
    </style>
</head>
<body>
<h1 class="c1">我是h1标签</h1>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
</ul>
</body>
</html>

属性选择器（可以加正则表达式通配符）：元素[ 属性]{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
       li[id="id1"]{
           color: yellow;
       }
    </style>
</head>
<body>
<ul>
    <li id="id1">li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
</ul>
</body>
</html>

QKain

关注

1
点赞
踩
0

收藏

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

CSS选择器：基本选择器：选择器优先级：id选择器>类选择器>标签选择器标签选择器：标签{}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css选择器-标签选择器</title> <style> h1{ color: red; .
复制链接

扫一扫