web前端选择器

一、选择器

基本选择器

标签选择器，id选择器，类选择器，通配符选择器

eg：

        /* 标签选择器  选中所有的p标签*/

        p {

            color: aqua;

        }

        /* id选择器 */

        #box1 {

            color: pink;

        }

        /* 类选择器 */

        .box2 {

            color: blueviolet;

        }

        /* 通配符选择器

        *{           

        }

        */

包含选择器

1、子代选择器：选中亲身儿子

eg：

        .a>li {

            background-color: pink;

        }

2、后代选择器：找到后代所有要找的元素

eg：

        .a li {

            color: blueviolet;

        }

复合选择器

可以将多个选择器组合

eg：

        /* div {

            color: pink;

        }

        p {

            color: pink;

        }

        span {

            color: pink;

        } */

        div,

        p,

        span {

            color: red;

        }

属性选择器

type^="te"      以te开头

type$="l"        以l结尾

type*="e"       type值里边包含e

伪类选择器

:hover================鼠标经过时

a:hover div{

对div的更改

}

       <a>

    <div>

    </div>

       </a>

eg：

        /* :hover   鼠标悬停 */

        a:hover {

            /* cursor  鼠标样式 */

            cursor: pointer;

            font-size: 40px;

        }

a:hover+div{

对div的更改

}

<a></a>

<div></div>

eg：        a:hover+div {

            background-color: greenyellow;

            display: none;

        }

结构伪类选择器

first-child：一组兄弟元素中的第一个元素

last-child：一组兄弟元素中的最后元素

nth-child（an+b）：首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类:nth-child 括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）

（标签名称）：nth-of-type：基于相同类型（标签名称）的兄弟元素中的位置来匹配元素

eg：        ul li:first-child {

            background-color: pink;

        }

        ul li:last-child {

            background-color: green;

        }

        ul li:nth-child(3) {

            background-color: blue;

        }

        ul li:nth-of-type(4) {

            background-color: chartreuse;

        }

伪元素选择器

::before       content:"~"

::after          content:"~"

eg：

        ul li::before {

            content: ">";

        }

        ul li::after {

            content: url();

        }

::selection

eg：

        /* ::selection 选中时 */

        ul li:nth-child(4)::selection {

            color: pink;