CSS选择器

1、简单选择器

·标签选择器

·id选择器

·类选择器

·通配符选择器

p {
      color: aqua;    //标签选择器
   }

#box1 {
    color: pink;     //id选择器
   }
.box2 {              //类选择器
    color: blueviolet;
   }

*{                   //通配符选择器
            
   }


我是一段文字
我是盒子一
我是盒子2
我是盒子3

我是一段文字

2、包含选择器

·子代选择器

·后代选择器

.a>li {
            background-color: pink;    //子代选择器
        }
.a li {
            color: blueviolet;    //后代选择器
        }


        
1
        
1
        
1
        
1
        

            
2
            
3
            
4
            
5
        

3、复合选择器

div,
p,
span {
    color: red;
     }

wisjiajsskmx
    
cndklcdsmc
    jnckdsmc

4、属性选择器

input[type="password"] {
    background-color: aquamarine;
}

div[id] {
    width: 300px;
    height: 300px;
    background-color: blue;
}

input[type^="te"] {
    background-color: red;
}

input[type$="l"] {
    background-color: green;
}

input[type*="e"] {
    background-color: chartreuse;
}












1
2

5、伪类选择器

a:link {
    color: pink;
}

a:visited {
    color: red;
}

a:hover {
    cursor: pointer;
    font-size: 40px;
}


a:active {
    font-size: 70px;
}

div {
    width: 300px;
    height: 300px;
    background-color: pink;
}

a:hover+div {
    display: none;
}


关闭广告
    

    

6.1、结构伪类选择器

 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;
}


    
1
    
2
    
3
    
4
    
5
    
6
    
7

6.2结构伪类选择器

ul li:nth-child(2) {
    background-color: pink;
}

ul li:nth-of-type(4) {
    background-color: rgb(215, 30, 61);
}

div span:nth-child(2) {
    background-color: aqua;
}


    
我是文字
    
1
    
2



    1
    kjdscnkdscn

7、伪元素选择器

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

ul li::after {
    content: url();
}

input::placeholder {
    color: rgb(62, 226, 56);
}


ul li:nth-child(4)::selection {
    color: pink;
}



    
1dcdscdscdcd
    
2cdcdcdcdc
    
3cdcdscdsc
    
4cdcdcdcddcds