CSS选择器

注：（1）CSS层叠性特点,相同层级的选择器,后相同属性的代码会覆盖前面的代码

        （2）选择器的优先级,ID>类名>标签名>通配符(*)

                       ID选扦器的值(100)

                        类名选择器的值(10)

                        标签选扦器的值(1)

        （3）类名的组合可以是1个或者多个而id名的组合只能有1个

1.标签选择器

div{
    width: 80px;
    height: 80px;
    border: 5px solid purple;
   }

2.类名选择器

 .item{
      width: 100px;
      height: 100px;
      border: 5px solid green;
   }

3.ID选择器

#box{
     width: 120px;
     height: 120px;
     border: 5px solid orange;
   }

4.并集选择器

  .item1,
  .item2,
  .item3 {
      background-color: blue;
    }

5.组合选择器（交集选择器）

        设置相同类名下不同的标签,可以使用交集选择器

    /* 类名叫做item的div标签 */
    /* 层级(标签 + 类名 = 11) */
    div.item {
      border: 5px solid lightgreen;
    }

    /* 类名叫做item的p标签 */
    p.item {
      border: 5px solid red;
    }

6.后代选择器

.container {}
.container ul {}
.container ul li {}

                （1）间接后代选择器

.container  li {}

                （2）直接子代选择器(选择器子元素)       

.container ul > li {
            color: red;
        }
 .container ol > li {
            color: green;
        }

 .container ol > li.active {
            font-weight: bold;
            font-size: 50px;
        }

#总结：

        1.由父元素或祖先元素来确定选择的范围，这种选择器可以叫做派生选择器。

                    后代选择器  ul li {}

                    子代选择器  ul > li {} （只能是父子关系的标签）

        2.遇到组合的选择器带有空格的，他们是嵌套关系的标签。

           没有空格的选择器，表示同一个标签。

        3.li.active  表示类名叫做active的li标签

           li  .active   表示选择li标签下，类名叫做active的子元素

7.伪类选择器

        带有冒号的这种选择器，叫做伪类选择器

a:hover {}

        （1）p:nth-child( )

p:nth-child(1) {
            color: red;
        }
        
 /* n: 1,2,3,4,5,........ */
 /* 选择偶数对应标签 */
 p:nth-child(2n) {
            color: blue;
        }
        
 /* 选择奇数对应标签 */
 p:nth-child(2n-1) {
            color: yellowgreen;
            font-weight: bold;
        }

        （2）first-child

                last-child

/* 选择ul标签下的第一个li子元素 */
        ul li:first-child {
            color: red;
        }
 /* 选择ul标签下的最后一个li子元素 */
        ul li:last-child {
            color: red;
        }

          （3）nth-of-type（ ）

/* 选择ul标签下的第一个div类型的子元素 */
        ul div:nth-of-type(1) {
            font-size: 40px;
        }
/* 选择ul下的偶数系列的li标签 */
        ul li:nth-of-type(2n) {
            color: yellowgreen;
        }
        
  <ul>
    <div>块标签1</div>
    <li>无序列表标签</li>
    <li>无序列表标签</li>
    <li>无序列表标签</li>
    <li>无序列表标签</li>
    <li>无序列表标签</li>
    <!-- <div>块级标签</div> -->
  </ul>

#伪类元素：

        1.属于行内元素

        2.::before

           ::after

        3.选择器:: {  

                        content: "";    必须要有这个content属性

                    }

        4.伪类选择器是选择器 （选择标签）

           伪类元素是元素     (生成标签)

/* 伪类元素: 是指由CSS生成的标签。 */
        .header::before {
            content: "abc";
            color: green;
            font-weight: bold;
        }
        .header::after {
            content: "ABC";
            color: red;
        }

8.属性选择器

        1.class^="i" ：选择class属性值为“i”字符开头的标签

[class^="i"] {
            width: 60px;
            height: 60px;
            background-color: red;
            border-radius: 6px;
            margin: 5px;
        }

2.class$="1" :选择class属性值以“1”字符结尾的标签

[class$="1"] {
            background-color: green;
        }

3.class*="o" ：选择class属性包含字符 “o”的标签

[class*="o"] {
            font-size: 50px;
        }

4.class="box" ：属性选择器 等于 平时用的.box

5.input[type="text"] ：属性选择器

input[type="text"] {
            height: 60px;
            border: 2px solid red;
        }
        input[type="password"] {
            height: 40px;
            border: 2px solid green;
        }