CSS知识补足——选择器的知识补充

后代选择器

        /* 以下两种写法叫做子代选择器，第一个元素不管是标签名还是类名，都作为其代表标签，也是该选择器的最高级别（父类），然后向下搜寻，搜寻到底 */
 ​
         /* 会使所有 ul 里的li标签改变样式
         ul li{
             color: brown;
         }  */
 ​
         /* 这种写法就会让类名为 need 的ul 里的li 元素改变样式
         .need li{
             color: brown;
         }*/

     <ul class="need">
         <a href="#"> 22222222</a>
         <li><a href="#"> 11111111</a></li>
     </ul>

 

子元素选择器

         /* 以下方式为子元素选择器，这种方式只会将父元素的儿子辈的元素改变样式，而儿子辈内部的元素则不会被修改样式 */
         /* ul>a{
             color: green;
         } */

 <ul class="need">
         <a href="#"> 22222222</a>
         <li><a href="#"> 11111111</a></li>
     </ul>

 

并集选择器

         /* 以下为并集选择器 该选择器，用逗号分隔各个需要渲染的元素，同时还能够跟其他选择器同时使用 */
         /* ol,p,ul li>a{
                 color: pink;
             } */

 

     <ul class="need">
         <a href="#"> 22222222</a>
         <li><a href="#"> 11111111</a></li>
     </ul>
     <ol>
         <li>2222222</li>
     </ol>
     <p>并集选择器测试</p>

 

伪类选择器

         /* 以下为伪类选择器的测试代码，伪类选择器包含 ①连接伪类选择器，②focus伪类选择器
             连接伪类选择器命令：
                         :hover(鼠标悬浮的时候除法) , :visited（当连接不是第一次被访问的时候触发） , 
                         :active（鼠标按下未弹起时触发）, :link（当连接还未被访问的时候触发）
             注意：连接伪类一定要按照LVHA的顺序来声明，否则将会无效。
 ​
             focus伪类选择器（用于表单的状态焦点的选择器）：
                         :focus
          */

         div {
             text-align: center;
             font-size: large;
         }
 ​
         div a:link {
             color: #333;
             text-decoration: none;
         }
 ​
         div a:visited {
             color: red;
         }
 ​
         div a:hover {
             color: teal;
             text-decoration: none;
         }
 ​
         div a:active {
             color: skyblue;
             font-size: 50px;
             color: black;
         }
 ​
         div input:focus {
             border-color: tomato !important;
             outline: none;
             height: 30px;
         }

     <div>
         <a href="#">伪类选择器测试连接</a>
     </div>
 ​
     <div><input type="text" placeholder="focus伪类选择器测试"></div>