CSS 选择器

最新推荐文章于 2023-12-12 09:35:39 发布

小撤.

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量319

点赞数 3

分类专栏： CSS 笔记文章标签： css html

本文链接：https://blog.csdn.net/HongLingya/article/details/114988830

版权

笔记同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

1、选择器

作用：选择页面上的某一个或者某一类元素

1.1基本选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
            color: #7d61c8;
            background: #3cbda6;
        }
        p{
            font-size: 20px;
        }
    </style>

</head>

<body>

    <h1>Holle world</h1>
    <h1>Holle world</h1>
    <p>Holle world</p>

</body>

</html>

类选择器（class）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器格式，.class的名称{}
            好处：可以多个标签归类，是同一个class    可以复用
        */
        .hl{
            color: #00A000;
        }
        .hk{
            color: #0040D0;
        }
    </style>
</head>
<body>

    <h1 class="hl">1</h1>
    <h1 class="hk">2</h1>
    <h1 class="hk">3</h1>

</body>
</html>

Id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*
            id选择器
            #id名称{}
            id:ID必须保证全局唯一，不可复用
            不遵循就近原则，固定的
            ID选择器>class选择器>标签选择器
        */

        #hy{
            color: red;
        }

    </style>
</head>
<body>
    <h1 id="hy">1</h1>
    <h1 id="hn">2</h1>
    <h1 id="hs">3</h1>
    <h1>4</h1>

</body>
</html>

优先级： id > class > 标签

1.2层次选择器

后代选择器：在某个元素后面的祖爷爷爷爷 88 你

body p{
    background: green;
}

子选择器：只选择一代也就是你儿子
```
body>p{
    background: red;
}
```
相邻兄弟选择器
```
.active + p{
    backgroung: pink;
}
```
通用选择器
```
.active ~ p{
    background: blue;
}
```
1.3结构伪类选择器

/*u1的第一-个子元素*/
u11i:first-chi1d{
    background: #02ff00;
}
/*u1的最后一- 子元索*/
u11i:last-child{
    background: #ff4832;
}
/*选中p1 :定位到父元素，选择当前的第一个元素
选择当前p元素的父级元索，选中父级元素的第一个，并且是当前元索才生效!， 顺序*/
p:nth-chi1d(2){
background: #2700ff;
/*选中父元素，下的p元素的第二个，类型*/
p:nth-of-type(1){
    background: yellow;
}
    /*鼠标经过*/
    a:hover{
        background: blue;
    }

1.4 属性选择器

/*属性名，属性名=属性值(正则)
 =绝对等于
 *= 包含这个元素
 ^= 以？？开头
 $= 以？？结尾
 */


/*存在id属性的元素  a[]{}*/
a[id]{
    background:red;
}
/*id=frist的元素*/
a[id=first]{
    background: yellow;
}
/*class 中有links的元素*/
a[class*="links"]{
    background:#000000;
}
/*选中href中以http开头的元素*/
a[href^=http]{
    background: pink;
}

小撤.

关注

3
点赞
踩
1

收藏

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

1、选择器作用：选择页面上的某一个或者某一类元素1.1基本选择器标签选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器，会选择到页面上所有的这个标签的元素*/ h1{ co
复制链接

扫一扫