13.2 CSS选择器

组合选择器(交集选择器)

类名叫做item的div标签

  div.item {
            border: 5px solid palegreen;
        }

 类名叫做item的p标签

 p.item {
            border: 5px solid red;
        }

并集选择器(重复利用代码)

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

类名的的组合可以有多个，

ID名的组合只能有一个，一个页面只能有一个ID选择器

 <div class="item item1"></div>
 <div class="item item3" id="box"></div>

 <p class="item"></p>
 <p class="item"></p>

 1）后代选择器

.container ul {}

.container ul li {}

2）间接后代选择器

 .container  li {}

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

      （只能是父子关系的标签）

 .container ul > li {
            color: red;
        }

 .container ol > li {
            color: green;
        }

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

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

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

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

 伪类选择器

未访问时链接的状态

  a:link {
            color: green;
        }

 被访问过链接的状态

 a:visited {
            color: orange;
        }

 鼠标悬停的状态

a:hover {
            color: pink;
        }

 鼠标点击的状态（激活）

 a:active {
            color: blue;
        }

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

                a:hover {}

 <a href="https://www.baidu.com">这是一个链接</a>