Skip to content
静心静心
HOME
DoubtfulCases
github icon
  • CSS

    • 标签
      • a标签
        • Label 标签
          • background
            • background属性
              • border和outline
                • borderAndoutline
                  • css - padding
                    • css 单位
                      • css 所有的居中(仅限参考)
                        • CSS 之 重构 回流
                          • Css选择器 权重
                            • css选择器
                              • CSS之阴影
                                • css之float
                                  • css重点
                                    • grid布局
                                      • HTML基础标签+表单
                                        • table布局

                                        css选择器 + hover 悬停

                                        author iconYYtimer icon大约 4 分钟

                                        # css选择器 + hover 悬停

                                        # 1、什么是css选择器

                                        ​ 就是改变样式的对象 😛😛😛😛😛😛😛😛😛

                                        # 2、有哪些选择器

                                        ​ 2.1 类选择器

                                        .box1{
                                                width:200px;
                                                height: 200px;
                                                background-color: darkorchid;
                                            }
                                        
                                        1
                                        2
                                        3
                                        4
                                        5

                                        ​ 2.2 id选择器

                                        #box1-id{
                                                background-color: darkred;
                                            }
                                        
                                        1
                                        2
                                        3

                                        ​ 2.3 标签选择器

                                         div{
                                                width:200px;
                                                height: 200px;
                                                background-color: darkturquoise;
                                            }
                                        
                                        1
                                        2
                                        3
                                        4
                                        5

                                        ​ 2.4 群组选择器

                                            .box1,.box2{
                                                width: 200px;
                                                height: 200px;
                                                background-color: darkorange;
                                                margin-top: 20px;
                                            }
                                        
                                        1
                                        2
                                        3
                                        4
                                        5
                                        6

                                        ​ 2.5 包含选择器

                                        ​ 语法:h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色,h1为祖先,其他的em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,为后代选择器。

                                        .box1 .box1-child {
                                                width:100px;
                                                height: 100px;
                                                background-color: darkseagreen;
                                            }
                                        
                                        1
                                        2
                                        3
                                        4
                                        5

                                        语法:h1>em{color:red;} 表示的是从h1开始里面的第一层em元素变成红色,h1为祖先,em为儿子,就像世袭制一样,只能传给儿子,孙子和其他堂亲都不行

                                        .box1 > .box1-child{
                                                width:100px;
                                                height: 150px;
                                                background-color: darkseagreen;
                                            }
                                        
                                        1
                                        2
                                        3
                                        4
                                        5

                                        ​ 2.6 相邻兄弟选择器

                                        ​ 加号有递进的效果

                                        h1 + p {margin-top:50px;} 表示是“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”这是官方的说法,理解的误区在于这个加号,h1和p并不是同时被选中的,而是选择的是h1紧跟着后面的p元素,是递进的关系,

                                        .box1-child + div{
                                                background-color: brown;
                                            }
                                        
                                            ###很重要
                                        <style type="text/css">
                                        h1 + p + p + p + p  {font-size:50px;}
                                        </style>
                                        
                                        1
                                        2
                                        3
                                        4
                                        5
                                        6
                                        7
                                        8

                                        2.7 所有兄弟选择器

                                        ​ 表示该h1的所有带有p标签的兄弟的字体为80px;

                                        
                                        <style>
                                        		h1~p{
                                        			font-size:80px
                                        		}
                                        </style>
                                        
                                        1
                                        2
                                        3
                                        4
                                        5
                                        6
                                        class.intro选择class="intro"的所有元素1
                                        #id#firstname选择id="firstname"的所有元素1
                                        **选择所有元素2
                                        elementp选择所有p元素1
                                        element,elementdiv,p选择所有div元素和所有p元素1
                                        element elementdiv p选择div元素内部的所有p元素1
                                        element>elementdiv>p选择父元素为div元素的所有p元素2
                                        element+elementdiv+p选择紧接在div元素之后的p元素2
                                        [attribute][target]选择带有target属性所有元素2
                                        [attribute=value][target=_blank]选择target="_blank"的所有元素2
                                        :linka:link选择所有未被访问的链接1
                                        :visiteda:visited选择所有已被访问的链接1
                                        :activea:active选择点击那一刻的链接1
                                        :hovera:hover选择鼠标指针位于其上的链接1
                                        :focusinput:focus选择获得焦点的input元素2
                                        :first-letterp:first-letter选择每个p元素的首字母1
                                        :first-linep:first-line选择每个p元素的首行1
                                        :first-childli:first-child选择属于父元素的第一个子元素的每个li元素2
                                        :beforep:before在每个p元素的内容之前插入内容2
                                        :afterp:after在每个p元素的内容之后插入内容2
                                        element1~element2div~p选择前面有div元素的p元素3
                                        [attribute^=value]a[src^="https"]选择其src属性值以“https”开头的每个a元素3
                                        [attribute$=value]a[src$=".pdf"]选择其src属性以“pdf”结尾的所有a元素3
                                        [attribute*=value]a[src*="abc"]选择其src属性中包含“abc”子串的每个a元素3
                                        :nth-child(n)p:nth-child(n)选择属于其父元素的第二个子元素的每个p元素3
                                        :nth-last-child(n)p:nth-last-child(n)同上,从最后一个子元素开始计数3
                                        :nth-of-type(n)p:nth-of-type(n)选择属于其父元素第二个p元素的每个p元素3
                                        :nth-last-of-type(n)p:nth-last-of-type(n)同上,但是从最后一个子元素开始计数3
                                        :last-childli:last-child选择属于其父元素最后一个子元素每个li元素3
                                        :root:root选择文档的根元素3
                                        :emptyp:empty选择没有子元素的每个p元素(包括文本节点,空格,换行也不可以)3
                                        :target#news:target选择当前活动的#news元素3
                                        :enabledinput:enabled选择每个启用的input元素3
                                        :disabledinput:disabled选择每个禁用的input元素3
                                        :checkedinput:checked选择每个被选中的input元素3
                                        :not(selector):not(p)选择非p元素的每个元素,需要设定p元素属性3
                                        ::selection::selection选择被用户选取的元素部分3

                                        辅助地址:https://www.cnblogs.com/zxy37/archive/2004/01/13/14255279.html

                                        edit icon编辑此页open in new window
                                        上一页
                                        Css选择器 权重
                                        下一页
                                        CSS之阴影
                                        傻瓜都能写出计算机可以理解的代码。唯有能写出人类容易理解的代码的,才是优秀的程序员。
                                        Copyright © 2022 YY

                                        该应用可以安装在您的 PC 或移动设备上。这将使该 Web 应用程序外观和行为与其他应用程序相同。它将在出现在应用程序列表中,并可以固定到主屏幕,开始菜单或任务栏。此 Web 应用程序还将能够与其他应用程序和您的操作系统安全地进行交互。

                                        详情