Blogger Information
Blog 49
fans 0
comment 4
visits 41642
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
常用选择器的使用(时间:1月16日 15:03)
过儿的博客
Original
643 people have browsed it

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>CSS常用选择器</title>

    <link rel="stylesheet" href="css/demo-1501.css">

</head>

<body>

    <!--基本选择器-->

    <ul>

        <li class="s2">1</li>

        <li id="s1">2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

        <li>9</li>

        <li>10</li>

    </ul>


    <div>

        <p>语文</p>

        <li>数学</li>

        <p>英语</p>

    </div>

    <div>

        <p>春天</p>

        <li>夏天</li>

    </div>


    <!--表单选择器-->

    <form action="">

       <label for="email">邮箱:</labe>

        <input type="email" id="email">

<br>

        <label for="password">密码:</label>

        <input type="password" id="password">

<br>

        <input type="radio" id="week" value="7"  name="save" checked><label for="week">保存一周</label>

        <input type="radio" id="month" name=save value="30"><label for="month">保存一月</label>

         <br>

         <button>登录</button>

    </form>

</body>

</html>



以下是样式文件:demo-1501.css

/*标签选择器*/

ul {

    border:1px solid red;

    margin-top:0;

    margin-bottom: 0;

    padding-left:0;

    overflow: hidden;

    padding:10px;

}


/*层级选择器*/

ul li{

   list-style-type: none;

   width: 40px;

   height: 40px;

   background-color: antiquewhite;

   float: left;

   border-radius: 50%;

   text-align: center;

   line-height: 40px;

   box-shadow: 2px 2px 1px #888888;

   margin-left: 10px;

}

/*id选择器*/

#s1 {

    background-color: aqua;

}

/*类选择器*/

.s2{

    background-color: blueviolet;

}

/*属性选择器*/

li[id="s1"]{

    border:2px solid red;

}

/*群组选择器*/

#s1,.s2{

    border:2px solid gold;

}

/*兄弟选择器

#s1 ~ *{

    background-color: blueviolet;

}*/

/*相邻选择器*/

#s1 + *{

    background-color: blue;

}

/*伪类选择器*/

ul :first-child{

  background-color: aqua;

}

ul :last-child{

    background-color:red;

}

/*选择任一个元素*/

ul :nth-child(6){

    background-color:green;

}

/*倒数选择元素*/

ul :nth-last-child(3){

    background-color:rosybrown;

}

/*选择ul下最后一个为li的元素*/

ul li:last-of-type{

    background-color:gray;

}


/*选择每个div元素下的第二个元素*/

div :nth-child(2){

    background-color: aqua;

}

/*只想选择英语*/

div :nth-child(3){

    background-color: blueviolet;

}

p:nth-of-type(2){

    background-color:yellow;

}

/*表单选择器*/

form :enabled{

    background-color: bisque;

}

/*将被选中的单选按钮改变前景色*/

form :checked+ *{

    background-color: aqua;

    color:red;

}

form :focus{

    background-color: gray;

}

/*设置鼠标悬停样式*/

button:hover{

    width:56px;

    height: 28px;

    background-color:gray;

    color:rebeccapurple;

}

/*表单无效值提示*/

form :invalid{

    color:red;

}

Q{~WZ`JJTE52W$CW}`5GD60.png


重点:1.群组选择器可以选择多个选择器同时对格式进行设置;

          2.兄弟选择器可以改变一个范围内元素的样式;

         3.伪类选择器的优先级低于兄弟选择器;

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post