css（1）

一、选择器

1.基础选择器

（1）标签选择器（选中当前页面中所有符合标签）

        h1 {

            color: rgb(32, 27, 28);

        }

（2）id选择器

 #box1 {

            color: rgb(6, 106, 194);

        }

（3）类选择器   .+类名

.box1 {

            background-color: pink;

        }

（4）通配符选择器  选中所有的元素

        * {

            font-size: 60px;

        }

2.包含选择器

(1)子代选择器   只选中亲生儿子

 ul>li {

            background-color: pink;

        }

（2）后代选择器

css样式表存在层叠性，后边的会将前边的覆盖掉

ul li {

            background-color: aqua;

        }

        ul div>li {

            background-color: brown;

        }

3.逗号选择器（复合选择器）

div,p,h1 {

            background-color: aqua;

        }

4.属性选择器

input[type="text"] {

            background-color: pink;

        }

        input[type="password"] {

            background-color: aqua;

        }

        input[name] {

            background-color: red;

        }

        type的属性值里包含e的input元素

        

        input[type*="e"] {

            background-color: blueviolet;

        }（ type的属性值里包含e的input元素）

        input[type^="p"] {

            background-color: chartreuse;

        }（type里第一个是p的input元素）

        input[type$="l"] {

            background-color: red;

        }（type里最后一个是l的input元素）

5.伪类选择器

伪类选择器：元素在不同状态下的样式

顺序：a:link 、a:visited 、a:hover 、a:active

 ：link    为访问的来凝结样式

（1）

a:link {

            color: green;

        }访问之后的样式

（2）

a:visited {

            color: red;

        }获取焦点时的样式

(3)

a:focus {

            color: blue;

        }鼠标悬停时的样式

(4)

a:hover+div {

            color: pink;

        }

+表示下一个

            ~表示之后所有的兄弟元素

(5)

a:active {

            background-color: pink;

        }用户点击之后按住鼠标

6.结构伪类选择器

ul li:nth-child(9) {

            background-color: pink;

        }第九个元素

        ul li:last-child {

            background-color: red;

        }最后一个元素

        ul li:first-child {

            background-color: aqua;

        }第一个元素

        ul li:nth-child(2n+1) {

            background-color: blue;

        }奇数位元素

        ul li:nth-child(2n) {

            background-color: rgb(33, 227, 124);

        }偶数位元素

.father .son:nth-child(2) {

            background-color: pink;

        }

.father .son:nth-of-type(2) {

            background-color: aqua;

        }先找.father，再找.father里的.son，然后对.son进行排序

7.伪类选择器

p::before {

            content: "##3#";

            color: pink;

        }

        p::after {

            content: "and you";

            color: red;

        }

        input::placeholder {

            color: pink;

        }

        div::selection {

            color: aqua;

        }

    </style>