css选择器

小hi胖胖

已于 2024-07-02 08:22:38 修改

阅读量1.7k

点赞数 14

文章标签： css css3

于 2024-07-01 17:09:52 首次发布

本文链接：https://blog.csdn.net/weixin_67252311/article/details/140101162

版权

1.兄弟选择器css2与通用区别

1.1相邻兄弟选择器 CSS2

作⽤ : 给指定选择器后⾯紧跟的那个选择器选中的标签设置属性

注意点 :

1. 相邻兄弟选择器必须通过 + 连接

2. 相邻兄弟选择器只能选中紧跟其后的那个标签 , 不能选中被隔开

的标签

<!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>
        /* css2中+选择相邻的标签，如果是p那就选不上 */
        .div1+div {
         width: 100px;
         height: 100px;
         background-color: red;
        }
    </style>
</head>
<body>
    <div class="div1">我是div1</div>
    <div class="div2">我是div2</div>
    <div class="div3">我是div3</div>
    <p>我是p </p>
    <div class="div4">我是div4</div>
</body>
</html>

1.2通⽤兄弟选择器 CSS3

作⽤ : 给指定选择器后⾯的所有选择器选中的所有标签设置属性

注意点:

1. 通⽤兄弟选择器必须⽤ ~ 连接

2. 通⽤兄弟选择器选中的是指定选择器后⾯某个选择器选中的所有

标签 , ⽆论有没有被隔开都可以选中

<!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>
        
        /* css3 通用兄弟选择器 */ 
        .div1~div {
         width: 100px;
         height: 100px;
         background-color: red;
        }
    </style>
</head>
<body>
    <div class="div1">我是div1</div>
    <div class="div2">我是div2</div>
    <div class="div3">我是div3</div>
    <p>我是p </p>
    <div class="div4">我是div4</div>
</body>
</html>

2.伪类选择器

伪类以 ":" 开头，⽤在选择器后，⽤于指明元素在某种特殊的状态下才

能被选中

2.1序选择器（结构伪类选择器）

CSS3 中新增的选择器最具代表性的就是序选择器

1. 同级别中的第⼏个

:first-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: 100px;
            height: 100px;
            background-color: red;
        }
   
    </style>
</head>
<body>
     <div>div1</div>
     <div>div2</div>
     <div>div3</div>
     <div>div4</div>
     <div>div5</div>
     <div>div6</div>
     <div>div7</div>
     <div>div8</div>
</body>
</html>

:last-child

选中同级别中的最后⼀个标签

 div:last-child{
            width: 100px;
            height: 100px;
            background-color: green;
        }

:nth-child(n)

选中同级别中的第 n 个标签

选择的是第五个还是第四个为什么会出这个问题因为大部分编程语言是从0开始，但是这边从1开始，在js里面利用for循环创建对象也是从1开始

div:nth-child(5){
            width: 100px;
            height: 100px;
            background-color: orange;
        }

:nth-child(odd) 选中同级别中的所有奇数

:nth-child(even) 选中同级别中的所有偶数

  div:nth-child(odd){
            width: 100px;
            height: 100px;
            background-color: orange; 
         }
         div:nth-child(even){
            width: 100px;
            height: 100px;
            background-color: blue; 
         }

:nth-child(xn+y) x 和 y 是⽤户⾃定义的 , ⽽ n 是⼀个计数器 , 从0 开始递增例如(3n+1) 分别对应 1,4,7.....

:nth-last-child(n) 选中同级别中的倒数第 n 个标签（不常用）

:only-child 选中⽗元素仅有的⼀个⼦元素E 。仅有⼀个⼦元素时⽣效

注意点 : 不区分类型

2.2动态伪类选择器

四个同时存在，必须严格顺序要求（link visites hover active）,否则就会报错

以下是动态伪类和a标签结合使用

<!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>
        /* 未被点击的 */
        a:link{
            color:rgb(0, 3, 3)
        }
        /* 被点击了 */
        a:visited{
            color: brown;
        }
        /* 鼠标移入或者悬浮 */
        a:hover{
            font-size: 30px;
        }
        /* 长按点击 */
        a:active{
            color: yellowgreen;
        }
       
    </style>
</head>
<body>
    <a href="https://mp.csdn.net/mp_blog/creation/editor?spm=1011.2124.3001.6217">点一下么</a>
</body>
</html>

2.3否定伪类

作⽤：可以从已选中的元素中剔除出某些元素

语法：

:not( 选择器 )

<!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:not(.div4){
            width: 100px;
            height: 100px;
            background-color: blue; 
          }
    </style>
</head>
<body>
     <div class="div1">div1</div>
     <div class="div2">div2</div>
     <div class="div3">div3</div>
     <div class="div4">div4</div>
     <div class="div5">div5</div>
     <div class="div6">div6</div>
     <div class="div7">div7</div>
     <div class="div8">div8</div>
</body>
</html>

2.4伪元素选择器

使⽤伪元素来表示元素中的⼀些特殊的位置

::after（浮动布局）

向一个标签添加内容，并且不可选中

::before

表示元素最前边的部分

::first-letter

为第⼀个字符来设置⼀个样式

::first-line

为第⼀⾏设置⼀个样式

<!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>
        P::after{
            content:"我是后加的";
        }
        P::before{
            content:"我是前加的";
        }
        p::first-letter{
            color: red;
            font-size: 30px;
        }
        P::first-line{
            color:blueviolet
        }
    </style>
</head>
<body>
    <p>
        我是p 我是p 我是p
        我是p啊啊啊啊啊啊啊啊啊啊啊啊
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        我是p
    </p>
</body>
</html>

3.属性选择器（面试题）

(不推,明明可以用class选择的，但是他还得写个{} 还会变慢的)

作⽤ : 根据指定的属性名称找到对应的标签 , 然后设置属性

4..CSS三⼤特性（必须理解）

继承性

作⽤: 给⽗元素设置⼀些属性, ⼦元素也可以使⽤, 这个我们就称之为继承性
注意点:
1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承（background的颜色不能继承）
2.在CSS的继承中不仅仅是⼉⼦可以继承, 只要是后代都可以继承
3.继承性中的特殊性
a标签的⽂字颜⾊和下划线是不能继承的,当做⼦元素
h标签的⽂字⼤⼩是不能继承的，在做⼦元素

层叠性

优先级

谁离得近听谁的
但是如果id和class同时存在会听谁的呢？
id>类>标签>通配符>继承>浏览器默认
!important 提高优先级（不推荐）