css选择器

选择器

基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器*/biao
        span{
            color: yellow;
        }
        div{
            color: greenyellow;
        }
        a{
            color: red;
        }
1.样式的继承:子元素会继承父元素的样式(但是a标签除外)
2.要想对a标签进行样式设置,必须直接找到a标签的位置,对a单独设置
3.样式之间的重叠部分是有优先级的,继承下来的样式的优先级为0(最低)
        #div1{
            color: aqua;
        }
        .sp{
            color: darkseagreen;
        }
通用选择器:所有的标签都会被中
        *{
            color: chocolate;
        }
    </style>

</head>
<body>
<div id="div1">
    wahaha1
    <span>我是一个div1-span</span>
</div>
<span>只有span</span>
<div>
    wahaha2
    <span class="sp">我是一个div2-span</span>
    <a href="http://www.baidu.com">这是个百度链接</a>
</div>

</body>
</html>

高级选择器

1.后代\子代

后代\子代
    后代选择器:找的是子孙
    子代选择器:只找子代
后代选择器:div span
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div span{
           color: tomato;
        }
    </style>
</head>
<body>
    <div>
        我是div标签的content
        <span>西红柿色1</span>      /*变色*/
        <p>
            在div-p标签中
           <span>西红柿色2</span>   /*变色*/
        </p>
    </div>
    <span>我只是一个单纯的span标签</span>
</body>

子代选择器:div>span
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div>span{
           color: tomato;
        }
    </style>
</head>
<body>
    <div>
        我是div标签的content
        <span>西红柿色1</span>     /*变色*/
        <p>
            在div-p标签中
           <span>西红柿色2</span>
        </p>
    </div>
    <span>我只是一个单纯的span标签</span>
</body>

2.毗邻+\弟弟~

毗邻+:
    <style>
       span+a{
           color: tomato;
        }
    </style>
    <div>
        <a>我是a0标签</a>
        <span>span标签</span>
        <a>我是a1标签</a>  <!--变色-->
        <a>我是a2标签</a>
    </div>

弟弟~:
    <style>
       span~a{
           color: tomato;
        }
    </style>
    <div>
        <a>我是a0标签</a>
        <span>span标签</span>
        <a>我是a1标签</a>   <!--变色-->
        <a>我是a2标签</a>   <!--变色-->
    </div>

3.属性选择器 [属性]/[属性="值"]

<style>
       /*a[href]{*/
            /*color: green;*/
        /*}*/
        /*a[href='http://www.taobao.com']{*/
            /*color: lightpink;*/
        /*}*/
        input[type='text']{
            background-color: lightblue;
        }
 </style>
 <body>
     <div>
        <a href="http://www.taobao.com">我是a0标签</a>
        <span>span标签</span>
        <a href="http://www.jd.com">我是a1标签</a>
        <a href="http://www.mi.com">我是a2标签</a>
        <a>没有href属性</a>
    </div>
    <input type="text">
    <input type="password">
 </body>

4.并集/交集

并集:
<style>
    ul,ol,span{
       background-color: gainsboro;
    }
</style>
<body>
<ul>
    <li>u-first</li>
</ul>
<ol>
    <li>o-first</li>
</ol>
</body>

交集选择器:
<style>
    div.box1.box2{
            background-color: red;
            width: 200px;
            height: 200px;
    }
</style>
<body>
    <div class="box1 box2">box1box2</div>
    <div class="box1">box1</div>
    <div>aaa</div>
    <span class="box1">span标签</span>
</body>

5.伪类选择器

a : link visited active
input: focus
通用: hover
<style>
        a:link{                      /*未访问的超链接*/
            color:tomato;
        }
        a:visited{                   /*访问过的超链接*/
            color: gray;
        }
        a:active{                    /*长按超链接*/
            color: green;
        }
        input:focus{                 /*input的背景颜色*/
            background-color: aquamarine;
        }
        div{                         /*所有的div背景颜色和尺寸*/
            width: 100px;
            height: 100px;
            background-color: lightgray;
        }
        div:hover{                   /*鼠标划上时的div中的内容*/
            background-color: pink;
        }
</style>
<body>
<a href="http://www.jd.com">京东</a>
<a href="http://www.xiaohuar.com">校花</a>
<input type="text">
<div></div>
</body>

6.伪元素选择器

first-letter
before
after  : *****

<style>
        p:first-letter{
            color: green;
        }
        p:before{
            content: '**';
            /*color: pink;*/
        }
        p:after{
            content: '.....';
            color: lightblue;
        }
</style>
<body>
<div>春江水暖鸭先知</div>
</body>