web选择器

一般样式

选择器{

属性名：属性值；

}

1.基本选择器：

标签选择器

一次性把网页所有一类的标签选出来  

<style>

p{

color: red;

}

</style>

类选择器(.box1)

选择同一类的，class为全局属性

<style>

.box1{

color:red;

}

</style>

id选择器(#box2)

id——相当于身份证号，每个网页不能重复

<style>

#box1{

color:red;

}

</style>

通配符选择器 

选中所有标签

<style>

*{

color:red;

}

</style>

2.包含选择器

子代选择器

选择亲儿子

<style>

 .a>li {
            background-color: pink;
        }

</style>

后代选择器

找到后代所有要找的元素

<style>

 .a li {
            color: blueviolet;
        }

</style>

3.复合选择器

逗号选择器

多个元素选择出来加相同的样式

<style>

div, ​

p, ​

span { ​

color: red; ​

}

</style>

4.属性选择器

<style>
        input {
            background-color: pink;
        }

input[type="password"] { ​

background-color: aquamarine; ​

}选择该属性为此的

div[id] {

​ width: 300px; ​

height: 300px; ​

background-color: blue; ​

}选择含有该属性的

 input[type^="te"] { ​

background-color: red; ​

}以te开头的^

input[type$="l"] { ​

background-color: green; ​

}以i结尾$

​ input[type="e"] { ​

background-color: chartreuse;

​ } ​包含e*

</style>

5.伪类选择器

hover       鼠标经过时

visited      访问过后

active       鼠标按下弹起

a:hover{

font-size:400px;（

cursor——鼠标样式）

}

a:hover div{

}对div的更改

a:hover+div{

}对div更改的

6.结构伪类选择器

div:nth-child(n):

把所有的盒子都排列序号，先看nth-child（）再看div

div:nth-of-type(n):

把指定的元素的盒子排列序号，先找div

伪元素选择器

<style>
        ul li::before {
            content: ">";
        }

ul li::after {

​ content: url(); ​

}

input::placeholder { ​

color: rgb(62, 226, 56); ​

}

/* input::placeholder 表单提示词 */ ​

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

color: pink; ​

} ​

</style>

/* ::selection 选中时 */