当前位置: 首页>前端>正文

css 怎么选中elementplus 元素 css选择器 菜鸟教程

目录

一、CSS简介

二、CSS书写位置

三、常用选择器

四、复合选择器

五、关系选择器

 六、属性选择器

 七、伪类选择器

 八、a元素的伪类

九、伪元素选择器

十、选择器的权重    


一、CSS简介

1、 网页分成三个部分

结构 20个左右标签,先用一段时间

表现 外在显示的样子

行为

2、css -层叠样式表

-网页实际上是一个多层的结构,通过css可以分别为网页的每一层来设置样式

而最终我们能看到的只有最上边的一层

-设置网页中元素的样式

二、CSS书写位置

第一种方式:内联样式/行内样式

写在开始标签里,写一个style属性,在style属性值里面写样式

样式分为 样式名:样式值; 名值对的结构

可以写多组样式,以;隔开即可

缺点:

1、结构和样式耦合

2、不容易修改

第二种方式:内部样式表

在head标签中,写一个style标签,在style里先选中对应的元素,然后设置样式

可以多组样式,以;隔开即可,最后一个样式,可以不写;,但我们一般都写

缺点:

1、不方便复用

三、常用选择器

1、元素选择器

         作用:选中对应的标签

         语法:标签名{}

         例如:h1{},h3{},p{}

2、id选择器  

        作用:选中对应的id属性值的内容,id属性值不能复用

        语法:#id属性值{}

3、class选择器

       作用:选中对应的class属性值的内容,可以复用属性值

       语法:.class属性值{}

 4、通配选择器

         语法:*{}

四、复合选择器

      1、交集选择器

              作用:选中符合多个选择器条件的内容

              语法:选择器1选择器2选择器3···{}

              例如:div.red{},#div2.red{}

注意:如果选择器中有元素选择器,必须把元素选择器放在前面

      2、并集选择器

                作用:同时选中符合多个选择器对应的内容

                语法:选择器1,选择器2,选择器3····{}

                例如:.red,#p2,h1{}

五、关系选择器

1、子元素选择器

      作用:通过指定的父元素找到指定的子元素

      语法:父元素>子元素{}

#school > p {
        color: red;}

 2、后代选择器

       作用:通过指定的祖先元素找到指定的后代元素

       语法:祖先元素 后代元素{}

#school span {
        font-size: 30px;
      }

3、选择下一个兄弟选择器

      作用:通过指定的元素找到下一个兄弟元素

      语法:兄+弟{}

.p1 + .p2 {
        color: blue;
      }

4、选择下面所有的兄弟(前面的不选)

      语法:兄~弟{}  

.p1 ~ p {
        font-size: 40px;
      }

 六、属性选择器

1:属性选择器

            语法:[属性名]{} 选择含有指定属性的元素

                 [属性名=属性值]{} 选择含有指定属性和属性值的元素

                 [属性名^=属性值]{} 选择属性值以指定值开头的元素  

                 [属性名$=属性值]{} 选择属性值以指定值结尾的元素

                 [属性名*=属性值]{} 选择属性值含有某值的元素

 

[title*="ab"] {

        color: red;

      }

 七、伪类选择器

一 、伪类(不存在的类,特殊的类)

          -伪类用来描述一个元素的特殊状态

          -比如:第一个元素,被点击的元素,鼠标移入的元素···

          -特点:一般请情况下,使用:开头

             1、 :first-child  第一个子元素

             2、 :last-child   最后一个子元素

             3、 :nth-child()  选中第n个子元素

                   特殊值: n    所有的

                          2n或even  选中偶数

                          2n+1或odd  选中奇数

          —以上这些伪类都是根据所有的子元素进行排序

             1、:first-of-type   第一个子元素

             2、:last-of-type     最后一个子元素

             3、:nth-of-type()    选中第n个子元素

                  功能跟上面相似,

              不同的是,这是在同类型的子元素中去选择

二、:not() 否定伪类

           -将符合条件的元素从选择器中去除

li:not(.l1){

        color: red;

      }

 八、a元素的伪类

1、:link  用来表示未访问过的链接(正常链接)

2、:visited 用来表示访问过的链接

               由于隐私的原因,所以visited只能改颜色

3、:hover 用来表示鼠标移入的状态

4、:active  鼠标点击后的状态

九、伪元素选择器

伪元素,表示页面中一些特殊的并不真实存在的元素(元素的位置)

          ::first-letter  表示第一个字母

          ::first-line  表示第一行

          ::selection  选中的内容

          ::before  元素的开始位置

          ::after   元素的结束位置

               before和after必须要结合content使用

p::first-letter{
          font-size: 34px;
        }
        p::first-line{
          background-color: yellow;
        }
        p::selection{
          color: red;
        }
        p::before{
          content: '你好';
        }
        p::after{
          content: '大家好';
        }

十、选择器的权重    

           !important               最高优先级  

           内联样式                                1000  

           id选择器                                100

           类和伪类选择器/属性选择器                   10

           元素选择器                                1

           通配符、子选择器、相邻选择器等。如*、>、+     0000

           继承的样式      没有优先级

       

        注意:

            1、比较优先级时,需要将所有选择器的优先级进行相加计算,最后优先级越高,则优先显示

            2、(并集选择器)分组选择器是单独计算的

            3、如果优先级计算后相同,此时则优先使用靠下的样式

            4、选择器的累加,不会超过上一级数量级,例如:类选择器再高也不会超过id选择器  量变达不到质变 


https://www.xamrdz.com/web/2nm1942899.html

相关文章: