css随笔2

最新推荐文章于 2023-08-17 14:49:59 发布

weixin_30823683

最新推荐文章于 2023-08-17 14:49:59 发布

阅读量154

点赞数

原文链接：http://www.cnblogs.com/qq1193447294/p/5755403.html

版权

　　关系选择符

包含选择符 e f

html:
    <body>
       <ul>
           <li>...</li>
           <li>...</li>
       </ul>
    </body>

css:
    ul li{
            color:red;
}

子选择符 e>f

html:
<ul class="nav">
        <li><a href="">AAA</a>
          <UL>
            <LI>111</LI>
            <LI>222</LI>
          </UL>
        </li>
        <li><a href="">BBB</a>
            <UL>
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </UL>
        </li>
        <li><a href="">CCC</a>
            <ul>
                <li>111</li>
                <li>222</li>
            </ul>
        </li>
    </ul>

css:
nav>li{
            list-style:none;
        }

相邻选择符 e+f 兄弟选择符 e~f

html:
        <h2>H2</h2>
    <h1>H1</h1>
    <h3>h3</h3>
    <h2>h2</h2>
    <p>p</p>
    <p>p</p>
    <h1>h1</h1>
    <h2>h2</h2>
    <h2>h2</h2>
    <h3>h3</h3>
    <h2>h2</h2>

css:
      h1+h2{
            color:red;
        }
        h3~h1{
            color:green;
        }
    #p1{
            color:red;
        }
    .p1{
            color:cyan;
        }

ps:如果是业内引入记得放在style标签里！

id选择符

HTML：
<p id="p1">...</p>

 css:
#p1{
      color:red;
}

class选择符

HTML：
<p class="p1">...</p>

css:
.p1{
     color:red;       
}

ps:在同一个网页中，id名称只能使用一次，不得重复；class可以重复。

id用“#”来定义，class用“.”来定义。

伪类选择符

HTML：
 <a href="">链接</a>

     <input type="search" >


    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

CSS：
     a:link{
            color:#000;
        }
        a:visited{
            color:#ccc;
        }
        a:hover{
            color:red;
            text-decoration:none;
        }
        a:active{
            color:cyan;
        }



        input:focus{
            outline:1px solid red;
        }
        ul li{
            border-bottom:1px double red;
        }
        /*倒数第一个*/
                        ul li:last-child{
                        border:none;
                              }
        /*第1个*/
                        ul li:first-child{
                             color:cyan;
                            }