基础选择器-一一网

标签选择器

使用标签名进行索引（把某一类标签全部选出，无论标签的深度如何

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            color:aqua;
        }
    </style>
</head>
<body>
    <ul>
        <li>小月月</li>
        <li>小月月</li>
        <li>小月月</li>
    </ul>
</body>
</html>
复制代码

id选择器

样式用#定义，结构用id调用，只能调用一次，别人不能使用.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器之类选择器</title>
### <style>
        #red {
            color:aqua;

        }
    </style>
</head>
<body>
    <ul>
       <li id="red">小月月</li>
       <li id="red">小月月</li>
       <li>小月月</li>
       <li>小月月</li>
       <li>小月月</li>
    </ul>
</body>
</html>
复制代码

复合选择器

后代选择器

各种选择器以空格隔开表示选择器的从属关系

 .nav ul li a {
            color:red;
        }
        
        
<div class="nav">
    <ul>
        <li><a href="#">百度</a></li>
        <li><a href="#">百度</a></li>
    </ul>
</div>
复制代码

并集选择器

标签1与标签2之间使用逗号分隔开
，也可以与后代选择器使用逗号分隔开具有同样效果
，各个选择器应该竖着写，最后一个不用逗号

 <style>
        li,span {
            color:red;
        }
    </style>
 
 <div class="prae">
        <p>
            <ul>
                <li>
                    我是元素一
                </li>
            </ul>
        </p>
        <p>
            <span>我是元素二</span>
        </p>
    </div>
复制代码

交集选择器

各选择器之间没有空格，直接并排书写。

伪类选择器

在书写时必须按照LVHA的顺序将进行书写link visited hover active。

未被访问过链接 link

选出点击过，已经访问过的链接 visited

选出鼠标经过的链接 hover

选出的是我们鼠标正在按下还没有松开的链接 active

<style>
        /* 在书写时必须按照LVHA的顺序将进行书写link visited hover active */
        /* 未被访问过链接 */
        a:link {
            color:black;
            text-decoration: none;
        }
        /* 选出点击过，已经访问过的链接 */
        a:visited {
            color:orange;

        }
        /* 选出鼠标经过的链接 */
        a:hover {
            color:skyblue;
        }
        /* 选出的是我们鼠标正在按下还没有松开的链接 */
        a:active {
            color:green;
        }
    </style>
    
    <a href="#">小月月</a>
复制代码

元素关系选择器

名称	举例	意义
子选择器	div>p	div的子标签p
相邻兄弟选择器	img+p	图片后面紧跟着的段落将被选中
通用兄弟选择器	p~span	p元素之后的所有同层级span元素

子选择器

选择下一代元素，简称亲儿子，不会选择亲儿子后代元素

    <style>
        .hot>a {
            color:red;
        }
    </style>
    
    <div class="hot">
        <a href="#">小月月</a>
        <ul>
            <li><a href="#">月月</a></li>
            <li><a href="#">小月儿</a></li>
        </ul>
    </div>
复制代码

相邻兄弟选择器

只会选择+号前面元素后面相邻的一个+好后面的元素。

       样式
    <style>
        h1+span{
            font-size:100px;
        }
        h2+span {
            font-size:50px;
        }
    </style>
    
    网页主体
    <div>
        <h1>元素一</h1>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <h2>元素二</h2>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>0</span>
        <span>11</span>
    </div>
复制代码

通用兄弟选择器

选择~符号前面元素之后的所有同层级~符号之后的元素。

网页样式表
    <style>
        h2~span {
            font-size:30px;
        }
    </style>


 网页主体
    <div>
        <h1>元素一</h1>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <h2>元素二</h2>
        <span>6</span>
        <span>7</span>
        <span>8</span>
       <div>
            <span>9</span>
            <span>0</span>
            <span>11</span>
        </div>
    </div>
复制代码