潭州学院html学习（day04）

一.毗邻选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧邻在另一元素后的元素,且两者有相同的父类

实例代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{padding:0;margin: 0;}
 8         p{
 9             width: 100px;
10             height: 100px;
11             background-color: fuchsia;
12         }
13         .p1 p+p{        /* 毗邻选择器：选中p相邻的元素p */
14             background-color: gold;
15         }
16         ul{
17             background-color: red;
18         }
19         .p2 ul+li{   /*毗邻选择器：选中ul相邻的元素*/
20             font-size: medium;
21             background-color: green;
22         }
23     </style>
24 </head>
25 <body>
26 <div class="p1">
27     <p >今天是2018年7月21号</p>
28     <p>今天是2018年7月21号</p>
29 </div>
30 <div class="p2">
31     <ul>
32         <li>今天是2018年7月21号</li>
33         <li>今天是2018年7月21号</li>
34         <li>今天是2018年7月21号</li>
35     </ul>
36 </div>
37 </body>
38 </html>

二.伪类选择器

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

静态伪类和动态伪类

伪类选择器分为两种。

（1）静态伪类：只能用于超链接的样式。如下：

:link 超链接点击之前
:visited 链接被访问过之后

PS：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

PS：以上三种样式，只能用于超链接。

超链接a标签

超链接的四种状态

a标签有4种伪类（即对应四种状态），要求背诵。如下：

:link “链接”：超链接点击之前
:visited “访问过的”：链接被访问过之后
:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。

对应的代码：

/*让超链接点击之前是红色*/
        a:link{
            color:red;
        }

        /*让超链接点击之后是绿色*/
        a:visited{
            color:orange;
        }
        /*鼠标悬停，放到标签上的时候*/
        a:hover{
            color:green;
        }
        /*鼠标点击链接，但是不松手的时候*/
        a:active{
            color:black;

在css中，这四种状态必须按照他特定的顺序写：a:link 、a:visited 、a:hover 、a:active

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ padding: 0; margin: 0; }
        /*color: inherit;继承父级元素的字体颜色*/
        /*text-decoration: none;去除下划线*/
        a{color: inherit; text-decoration: none;}
        p{
            width: 100px;
            height: 100px;
            background: #ccc;
        }

        /*伪类选择器
        hover: 当鼠标移入移出的时候触发

        */
        .box1 a:hover{
            color: deeppink;
            /*没有下划线*/
            /*text-decoration: none;*/
            /*有下划线*/
            /*text-decoration: underline;*/
            /*上划线*/
            /*text-decoration: overline;*/
            /*中划线*/
            text-decoration: line-through;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: green;
        }
        .box2 p:hover{
            background: deeppink;
        }
        /*其实是依赖于后代选择器实现的*/
        .box2:hover p{
            background: deeppink;
        }
        /*以下是错误的，因为box1不是box2的后代*/
        .box2:hover .box1{}

        .box3{
            width: 100px;
            height: 100px;
            background: darkblue;
            color: #fff;
        }

        /*伪类元素: 在元素内容前或者后插入元素(是行级元素)
        display: block; 将其他类型转为块级类型

            content 为必须的属性且格式必须完整 content:'';
            其解析出的效果基本等同于写入一个标签，因此，可以设置宽高，但默认是行级，需要转换为块级。
            .box3:after或者.box3:before中的所有属性都是为伪类元素添加不影响使用伪类的元素
            after常用于清除浮动时使用


        */
        .box3:before{
            display: block;
            content: '我是小阳，';
            background: deeppink;
            height: 40px;
            width: 60px
        }
        .box3:after{
            display: block;
            content: '';
            background: green;
            height: 40px;
        }
    </style>
</head>
<body>


<div class="box1">
    <a href="http://www.baidu.com">百度一下你就知道</a>
</div>

<div class="box2">
    <p></p>
</div>

<!--<div class="box3"><span></span>我是小阳，我是box3，我是小鬼儿<span></span></div>-->
<div class="box3">我是box3</div>
</body>
</html>

三.选择器的优先级

单个选择器的优先级：id选择器>类选择器>标签选择器

多个选择器：

id个数不等，id个数越多优先级越高

id个数相等，class类个数越多优先级越高

class类相等，标签选择器越多，优先级越高

总结：当你判断两个选择器的优先级的时候，先数id个数，id个数多的优先级高。如果id个数相等数class的个数，class类个数多的优先级高，如果class类的个数相等，看标签选择器的个数，标签选择器多的优先级别更高

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>
    <style>
        *{padding: 0;margin: 0;}
        p{
            width:100px;
            height: 100px;
            background-color: rebeccapurple;
        }
        #id1{background-color: fuchsia;}
        .box1{background-color: red}
        div{
            width:150px;
            height:150px;
        }
        #id1 #id11{background-color: blue}
        #id1{background-color: green}
        p{background-color: cadetblue}
        .box1 p{
            background-color: rebeccapurple;
        }
        div a p {background-color: pink;}
        a p{background-color: green}
    </style>
</head>
<body>
<div class="box1" id="id1">
    <p id="id11"></p>
</div>

<div class="box2">
    <p></p>
</div>

<div class="box3">
    <a href="">
        <p></p>
    </a>
</div>
</body>
</html>