首页 > > 网页制作 > css >

css选择器概述

2019-02-20 00:44:19来源：博客园阅读 ()

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;
            }

原文链接:https://www.cnblogs.com/whalesea/p/10400957.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有