时间的法外狂徒

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

统计

css选择器概述

css选择器种类

  • id选择器
  • 类选择器、属性选择器、伪类选择器
  • 元素选择器、伪元素选择器
  • 通配符选择器、子类选择器、后代选择器、相邻兄弟选择器、选择器分组

一、id选择器

            <p id="id"></p>

            #id{
                color:red;
            }

二、类选择器、属性选择器、伪类选择器

  1、类选择器

            <p class="class"></p>

            .class{
                color:black;
            }

 

  2、属性选择器

复制代码
            <p text="text"></p>

            [text]{
                color:white;
            }
            [text:text]{
                color:white;
            }
            p[text:text]{
                color:white;
            }
复制代码

  3、伪类选择器

  :link    向未被访问的超链接添加样式

  :visited     向已被访问的超链接添加样式

  :active   向被激活的元素添加样式 

  :hover   当鼠标悬停至元素上方是,向该元素添加样式

  :focus    当元素获取焦点时,向该元素添加样式 

            <p>345</p>

            p:foucs{
                color:blue;
            }

三、元素选择器、伪类选择器

  1、元素选择器

            <p>345</p>

            p{
                color:pink;
            }

  2、伪元素选择器

  :first-letter  向文本的第一个字母添加特殊样式。

  :first-line   向文本的首行添加特殊样式。

  :before      在元素之前添加内容。

  :after     在元素之后添加内容。

<p>345</p>
//"first-line" 伪元素用于向文本的首行设置特殊样式。 p:first-line
{ color:#ff0000; }

四、通配符选择器、子类选择器、后代选择器、相邻兄弟选择器、分组选择器

  1、通配符选择器

复制代码
        <div id="te">
            <p>345</p>
            <p id="id"></p>
            <p class="class"></p>
            <p text="text"></p>
            <input type="text">
        </div>

            *{
                /*选择页面上的所有元素*/
                color:pink;
            }

            #te*{
                /*选择id为te元素下的所有元素*/
                color:pink;
            }
复制代码

  2、子类选择器

复制代码
        <div id="te">
            <p>345</p>
            <p id="id"></p>
            <p class="class"></p>
            <p text="text"></p>
            <input type="text">
        </div>

            #te > p{
                /*选择id为te元素下的所有的直接子类p元素*/                    
                color:pink;
            }
复制代码

 

  3、后代选择器

复制代码
        <div id="te">
            <p>345</p>
            <p id="id"></p>
            <p class="class"></p>
            <p text="text"></p>
            <input type="text">
        </div>

            #te p{
                /*选择id为te的元素下的所有p元素*/    
                color:pink;
            }
复制代码

 

  4、相邻兄弟选择器

复制代码
        <div id="te">
            <p>345</p>
            <p id="id"></p>
            <p class="class"></p>
            <p text="text"></p>
            <input type="text">
        </div>

            p + input{
                /*选择紧接在 p 元素后出现的<input>,p 和 input 元素拥有共同的父元素*/
                color:pink;
            }
复制代码

 

  5、选择器分组

  

复制代码
        <div id="te">
            <p>345</p>
            <p id="id"></p>
            <p class="class"></p>
            <p text="text"></p>
            <input type="text">
        </div>

            p,input{
                /*选择所有的p和input元素*/
                color:pink;
            }
复制代码

 

posted on   抄手砚  阅读(519)  评论(0编辑  收藏  举报

编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
点击右上角即可分享
微信分享提示