css基本选择器

1，基础选择器（重点）

* ：通用选择器，匹配任何元素代码：*{ : }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{color: red} <!--此处是对所有的标签进行设置-->
    </style>
</head>
<body>
ni
<div>hello div</div>
<p>hello</p>
<p>ni</p>
<a href="">点击</a>

</body>
</html>

效果是：所有标签都变红如下：

标签选择器，即通过标签名字来匹配

代码：标签名{: }

如下：对div标签进行设置

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{color: red}<!--此处是对标签名为div的标签进行设置-->

    </style>
</head>
<body>
<div>hello div</div>
<p>hello</p>
<p>ni</p>
<a href="">点击</a>

</body>

class选择器，匹配所有class属性中包含class="info"的元素,class 可以重复

匹配class 时一定要加上 .

代码：.class值{ : } 字典中是设置内容。如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .ss{color: gold}
    </style>
</head>
<body>

<p class="ss">hello</p>
<a class="ss">nide </a>
<p>hao</p>
</body>

效果如下：

标签名和class选择器可以一起使用如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div.ss{color: green}
    </style>
</head>
<body>
<div>who</div>
<p class="ss">hello</p>
<p class="ss">nide </p>
<div class="ss">i am</div>
<p>hao</p>
</body>

效果如下：

id 选择器

代码：#id值{ : } 字典中是设置内容

在body中找一个id匹配的标签。（HTML中ID属性应唯一，相当于人的身份证号码）

匹配id 时需要加上#。如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #ss{color: gold} <!--此处是对Id='ss'的标签进行设置-->
    </style>
</head>
<body>

<p id="ss">hello</p>
<p>ni</p>
<p>hao</p>
</body>

2，组合选择器

注意嵌套规则：

块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，只能包含内联元素
有几个特殊的块级元素只能包含内联系元素，不能包含块级元素。如：h1,h2,h3,h4,h5,h6,p,dt
li内可以包含div
块级元素与块级元素并列，内练元素与内练元素并列

1）E，F 多元素选择器，同时匹配E元素或者F元素，E和F之间用逗号隔开（重点）。例如：

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div.ss,#tt{color: green}
    </style>
</head>
<body>
<div>who</div>
<p class="ss">hello</p>
<p class="ss">nide </p>
<div class="ss">i am</div>
<p id="tt">hao</p>
</body>

效果图如下：

2）E F 后代元素选择器 例如匹配所有属于E元素后代的F元素,E和F之间以空格隔开

例如：将class ='div1'的div标签里边的所有div标签内容变红代码如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1 {color: red}
    </style>
</head>
<body>

<div>who</div>

<div class="div1">
    <div>
        <a href="">a</a>
        <p>ppp</p>
        <div>div3</div>
    </div>
</div>

</body>

3）E>F 子元素选择器，匹配所有E元素的子元素F,仅找到E的下一层元素就不找了之间用>隔开

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1>.div2{color:green}
    </style>
</head>
<body>

<div>who</div>

<div class="div1">
    <div>
        <a href="">a</a>
        <p>ppp</p>
        <div>div3</div>
    </div>
    <p>p ele</p>
    <div class="div2">div2</div>
</div>

</body>

4) E+F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F 以+号隔开，只会向下找紧挨着的。

例如：将<div>div after</div>标签变为背景色变为绿色代码如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1+div{background-color: green}
    </style>
</head>
<body>

<div>who</div>

<div class="div1">
    <div>
        <a href="">a</a>
        <p>ppp</p>
        <div>div3</div>
    </div>
    <p>p ele</p>
    <div class="div2">div2</div>
</div>
<div>div after</div>
</body>

3，属性选择器（重点）

可以自己设置属性

1）E[att] 匹配所有具有att属性的E元素，不考虑它的属性值(注意：E在此处可以省略.

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        [alex]{color: red}
    </style>
</head>
<body>

<div>who</div>
<div alex="sb">alex</div>

<div>div after</div>
</body>

2）E[att=val] 匹配所有att属性等于val的E元素

例如：

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        p[alex='sb']{color: red}
    </style>
</head>
<body>

<div>who</div>
<p alex="sb">alex1</p>
<div alex="sb">alex2</div>

<div>div after</div>
</body>

3）E[att～=val] 匹配所有att属性具有多个空格分隔的值，其中一个值等于val的E元素例如：

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div[alex~='sb']{color: red}
    </style>
</head>
<body>

<div>who</div>
<p alex="ab sb">alex1</p>
<div alex="bc sb">alex2</div>
<div alex="ab sb">alex3</div>

<div>div after</div>
</body>

4）E[att^=val] 匹配属性值以指定值val开头的每个元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        p[alex^='sb']{color: red}
    </style>
</head>
<body>

<div>who</div>
<p alex="sb ad">alex1</p>
<div alex="sb ss">alex2</div>
<div alex="ss">alex3</div>

<div>div after</div>
</body>

5）E[att$=val] 匹配属性值以指定值val结尾的每个元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div[alex$='ss']{color: red}
    </style>
</head>
<body>

<div>who</div>
<p alex="sb ad">alex1</p>
<div alex="sb ss">alex2</div>
<div alex="ss">alex3</div>

<div>div after</div>
</body>

6）E[att$*val] 匹配属性值中包含指定值val的每个元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div[alex*='sb']{color: red}
    </style>
</head>
<body>

<div>who</div>
<p alex="sb ad">alex1</p>
<div alex="sb ss">alex2</div>
<div alex="sa sb">alex3</div>

<div>div after</div>
</body>

4,伪类

CSS是伪类是用来给选择器添加一些特殊效果。

anchor 伪类：专门用于控制链接的显示效果

标签名：link （代表没有接触过的链接），用于定义了链接的常规状态

标签名：hover(鼠标放在链接上的状态），用于产生视觉效果

标签名：visited (访问过的链接）用于阅读文章，能清楚的判断已访问过的链接

标签名：active(正在访问的链接）

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
     a:link{
         color: red;
     }
     a:visited{
         color: blue;
     }
     a:hover{
         color: green;
     }
     a:active{
         color: yellow;
     }
 
    </style>
</head>
<body>
    <a href="123.png">hello-world</a>

    <div class="box">
        <div class="top"></div>
        <div class="botton"></div>
    </div>
    <div class="add">hello yuan</div>
</body>

补充：before after 伪类

: before p:before 在每个<p>元素之前插入内容

: after p:after 在每个<p> 元素之后插入内容

p:before 在每个<p>元素的内容之前插入内容

p:before{content:"hello":color:red}

p:after 在每个<p>元素的内容之后插入元素

p:after{content:"hello";color:red} 例如：

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

     .box{
         100px;
     }
        .top,.botton{
             100px;
            height: 100px;
            background-color: chartreuse;
        }
        .box:hover .botton{
            background-color: red;
        }
     .add:after{
         content: '欢迎登录';
         color: gold;
     }
    </style>
</head>
<body>
    <a href="123.png">hello-world</a>

    <div class="box">
        <div class="top"></div>
        <div class="botton"></div>
    </div>
    <div class="add">hello yuan</div>
</body>

效果图如下：

鼠标经过图片任何地方，部分会出现效果代码如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

     .box{
         100px;
     }
        .top,.botton{
             100px;
            height: 100px;
            background-color: chartreuse;
        }
        .box:hover .botton{
            background-color: red;
        }
     
    </style>
</head>
<body>

    <div class="box">
        <div class="top"></div>
        <div class="botton"></div>
    </div>
</body>

5， CSS优先级和继承

-CSS优先级：是指CSS样式在浏览器中被解析的先后顺序

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

1，内联样式表的权值最高 style ="" -------1000

2，统计选择符中的ID属性个数 #id---------- 100

3，同级选择符中的CLASS属性个数 .class ------10

4，统计选择符中的HTML标签名个数 p--------1

按照这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。权重高的优先级别高

例1：

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
       #div1{color: red}

    </style>
</head>
    <div style="color: green" id="div1">hello</div>

</body>

====》结果是字体颜色为绿色，因为style文本优先级最高

***************************************

例子2:

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{color: gold}
        .div1 .div3{color: red}
        #div1 .div3{color: green}

    </style>
</head>
<body>

   <div id="div1">
       <div class="div2">
           <div class="div3">
              嵌套优先级
           </div>
       </div>
   </div>

</body>

======》结果是：字体为绿色，因为id的优先级高

************************************************

例2:

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{color: gold}
        .div1 .div3{color: red}
        .div3{color: green}

    </style>
</head>
<body>

   <div class="div1">
       <div class="div2">
           <div class="div3">
              嵌套优先级
           </div>
       </div>
   </div>

</body>

====》结果是：字体为红色分析：因为.div1.div3的权重为10+10=20，最高，所以为红色字体

附加说明：

1，文本的样式优先级为1000 所以始终高于外部定义。这里文内样式指形如<div style="color:red>bleh</div>的样式，而外部定义指经由<link>或者<style>卷标定义的规则

2，有 ! import声明的规则高于一切

3，如果 !important声明冲突，则比较优先权

4，如果优先权一样，则按照在源码中出现的顺序决定，后来者居上

5，由继承而得到的样式没有specificity的计算，它低于一切其他的规则，比如：(全局选择符*定义的规则）

-CSS继承

继承是CSS的一个主要特征，他是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如BODY定义了颜色值，也会应用到整个段落的文本中

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
       #div1{color: red}

    </style>
</head>
   <div id="div1">
       hello1
       <div class="div2">
           hello2
           <div class="div3">
               嵌套优先级
           </div>
       </div>
   </div>

</body>

===》结果是：hello1 hello2 以及嵌套优先级字体都为红色。

注意：继承的权重的很低的，只要给加个颜色值，这个颜色值马上会覆盖掉它继承的颜色。

此外，CSS继承也是由限制的，有一些属性不能被继承例如：border,margin,padding,background等

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #div1{color: red}
        .div3{color: yellow}


    </style>
</head>
   <div id="div1">
       hello1
       <div class="div2">
           hello2
           <div class="div3">
               嵌套优先级
           </div>
       </div>
   </div>

</body>

===>结果是：嵌套优先级的字体为黄色，其余还是红色