HTML-CSS-基础选择器和高级选择器

基础选择器

标签选择器

直接书写标签名，不要添加任何符号。

<!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>Document</title>
    <style type="text/css">
        div{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div>
                <div>我是内部的div</div>
            </div>
        </div>
    </div>
</body>
</html>

标签选择器能够选中页面上所有的同种标签。不管嵌套多深，仍然被选中。
如果嵌套多层的div内部的颜色是也是红的。

标签选择器能够选中多个元素。

id选择器

id选择器通过标签的id属性进行选择。
写法：

#+id属性值
#和id属性值之间，不能有任何空格。


html里面的写法
<p id="xxx">
xxx就是属性值

id属性值命名规范：

区分大小写大写和小写的是2个不通的属性值，就是说是2个值。
首字母必须是一个英文单词，其他的字符是可以是数字、下划线、-(短横)。

id属性值是唯一的。

代码

<!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>Document</title>
    <style type="text/css">
        p{
            color: orange
        }
        #para{
            font-size: 30px;
        }
        #para-1{
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
    <p id="para">我是一个段落</p>
    <p id="para-1">我是一个段落</p>
    <p>我是一个段落</p>
</body>
</html>

样式

样式-1.png

标签选择器会选中所有的同种元素，一般用于清除默认样式或者重置默认样式。
而id选择器只会选中一个。

<a href="">超级链接</a>

默认样式

a默认样式.png

去掉下划线和颜色

a{
   text-decoration: none;  //去掉下划线
   color: #333;  //重新设置颜色
}

a-去掉下划线.png

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

ul-li默认样式.png

去掉小圆点

ul{
   /* 去掉 li标签的 小圆点 */
  list-style: none;
}

li-去掉小圆点.png

类选择器

类选择器：通过标签的class属性，选中元素。可以给任何元素添加类名。不区分标签。
写法:

点+类名
.类名

代码

<!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>Document</title>
    <style type="text/css">
        p{
            color: orange
        }
        .para3{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <p class="para3">我是一个class段落</p>
</body>
</html>

样式

para3.png

从上面代码看出p标签设置了字体颜色为黄色，类选择器设置了字号，这2个一起作用到了p标签的内容上了，2个属性进行了叠加，这就是CSS的层叠性。不同的属性叠加在一个上面了。

p元素通过标签选择设置文字颜色，通过类名设置字号。同一元素不同属性会叠加。
css层叠性的体现1：同一元素不同属性，都会出现在页面上，样式进行叠加。
原子类：设置页面上相同的属性，为一个类名。那一个元素具有该样式，直接添加该类名就行。一般原子类只设置一个属性。

<!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>Document</title>
    <style type="text/css">
        .fs21{
            font-size: 21px;
        }
        .fs24{
            font-size: 24px;
        }
        .fs26{
            font-size: 26px;
        }
        .cblue{
            color: blue;
        }
    </style>
</head>
<body>
    <h3 class="fs26">UUUUUUUU</h3>
    <h3 class="fs24 cblue">ZZZZZZZ</h3>
</body>
</html>

上面定义了3种字体大小的class，分别是21、24、26，谁使用哪个字号，直接引用了那个字号大小，就使用哪个字号的class。

一个标签可以有多个类名，中间用空格隔开。

<h3 class="fs24 cblue">ZZZZZZZ</h3>
fs24和cblue是2个不同的class属性。

id上行为(js 用户行为)，类上样式。

通配符

*表示通配符。通配符会选中页面上所有的元素、标签，甚至包括body标签。
作用:用于快速清除默认样式。实际上工作中不用通配符，为了提高网站加载速度。

<!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>Document</title>
    <style type="text/css">
    /* 所有的元素都有下面2个属性 */
    /* 这2个属性让字体靠屏幕最左边 */
        *{
            padding: 0%;
            margin: 0%;
        }
        *{
            font-family: "Microsoft Yahei";
            color: red;
        }
    </style>
</head>
<body>
    <h3>我是一个h3</h3>
    <p>我是一个p标签</p>
    <div>我是讴歌div</div>
</body>
</html>

样式：

通配符.png

高级选择器

高级选择器就是基础选择器的延伸。
高级选择器分3类：后代选择器、、；

后代选择器

有嵌套关系的一个标签，通过类名或者是标签选择器确定大的范围，然后在大范围内再次进行选择。可以进行多次选择。
写法：每一层之间用空格隔开。

代码

<!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>Document</title>
    <style type="text/css">
    /* 通过div 确定大范围 空格 p标签*/
    /* 后代选择器 */
        div p{
            color: orange;
        }
    </style>
</head>
<body>
    <div>
        <!-- 把div里面的p字体颜色改成橘黄色 -->
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
    </div>

    <p>我是一个外部段落</p>
    <p>我是一个外部段落</p>
    <p>我是一个外部段落</p>
    <p>我是一个外部段落</p>
</body>
</html>

div+空格+p
div p{
   color: orange;
}

div确定大范围，确定改的是p标签，设置为橘黄色。
上面代码是修改div里面p标签里面的内容的颜色。
样式

后代-p内容.png

上面的情况换种写法，下面class类名为box，box确定div区域，box后面的p确定div里面p标签里的字体设置。

<!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>Document</title>
    <style type="text/css">
    /* 通过div 确定大范围 空格 p标签*/
    /* 后代选择器 */
        div p{
            /* color: orange; */
        }
        .box p{
            color: orange;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 把div里面的p字体颜色改成橘黄色 -->
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
    </div>

    <p>我是一个外部段落</p>
    <p>我是一个外部段落</p>
    <p>我是一个外部段落</p>
    <p>我是一个外部段落</p>
</body>
</html>

在上面代码body里面增加如下代码

<div class="box">
   <div>
       <p>我是内嵌2个div的p标签</p>
   </div>
 </div>

对每一层有空格的理解，上面代码

.box指的是最外层的div
空格 
p 指的是最里面的p标签。

样式：

2层嵌套.png

box固定了div嵌套的区域，后代选择器，不管是嵌套了几层，都固定了，然后p标签内的内容颜色设为橘黄色了。

通过 .box p上面的代码也被选中了。

后代选择器能选中儿子、孙子等等，只要是box区域里面的div都能被选中。
后代选择器也能补全书写。

上面2层嵌套.png上面的代码还可以这么写,效果是一样的，只不过下面的是把缺少的那个div给补全了，.box确定是最外面那个div，div是p标签外部的标签，p就是p标签，看2层嵌套.png上面的代码，后代选择器把下面第二个div补齐了，不写也行。

.box div p{
    color: orange;
}

交集选择器

交集选择器能够选中选择器都有的元素。通俗的讲就是2个标签都有的元素。
写法:每一个选择器直接书写，中间不要任何空格。

交集选择器.png

看上面那个图里面的最右面2个圆，2个圆左边有p的选中p标签，右面圆的选中.para，中间有交集的部分，就是2个圆相交的部分，既有p标签，又有para类，这就叫交集。

代码

<!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>Document</title>
    <style type="text/css">
        div{
            color: red;
        }
        p{
            color: blue;
        }
        .para{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div>我是div1</div>
    <div class="para">我是div2</div>
    <div class="para">我是div3</div>
    <p class="para">p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
</body>
</html>

样式

交集-1.png

上面的我只是想改class为para的p标签，现在是class为para的div也被修改了，这就有交集了，2个标签(div和p都有了para属性)，这时候就得用交集选择器了。
修改 .para这的写法就行

p.para{
  font-size: 50px;
}

p指定了区域是p标签，.para是指在4个p标签里面选中了一个类名叫para的p标签，不但是p元素，还得是叫para的类，这就叫交集选择器。

综合代码

<!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>Document</title>
    <style type="text/css">
        div{
            color: red;
        }
        p{
            color: blue;
        }
        p.para{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div>我是div1</div>
    <div class="para">我是div2</div>
    <div class="para">我是div3</div>
    <p class="para">p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
</body>
</html>

样式

交集OK的.png

让p1改了大小。
p.para表示既有p元素，又有.para类名。

它可以连续交集。

<!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>Document</title>
    <style type="text/css">
        div{
            color: red;
        }
        p{
            color: blue;
        }
        p.para{
            font-size: 50px;
        }
        p.para.fs20{
            <!-- 把颜色改粉色 -->
            color: pink;
        }
    </style>
</head>
<body>
    <div>我是div1</div>
    <div class="para">我是div2</div>
    <div class="para">我是div3</div>
    <p class="para">p1</p>
    <p class="para fs20">p2</p>
    <p>p3</p>
    <p>p4</p>
</body>
</html>

<p class="para fs20">p2</p> 
可以被交集，因为p2 里面有para类，还是p标签，所以字体会成50px，但是fs20里面设置颜色为粉色，所以显示结果为字体为50，颜色为粉色的p2.

选中元素满足3个条件

必须是p标签
必有para类
必须有.fs20类名

样式

粉色p2.png

并集选择器

可以同时选中多个元素，每个元素之间用,隔开。

<!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>Document</title>
    <style type="text/css">
        div,p,h3{
            color: red;
        }
    </style>
</head>
<body>
    <div>我是div1</div>
    <div class="para">我是div2</div>
    <div class="para">我是div3</div>
    <p class="para">p1</p>
    <p class="para fs20">p2</p>
    <p>p3</p>
    <p>p4</p>
    <h3>我是一个h3</h3>
</body>
</html>

div,p,h3{
   color: red;
}
等价于下面的写法
div{
    color: red;
}
p{
    color: red;
}
h3{
    color: red;
}

并集选择器就是把3个元素圈在一起，一起设置。
并集选择器用类名、标签等都行。

转载于:https://www.jianshu.com/p/6adbdf12e182