web front end --CSS 03 senior selector

Advanced selectors are divided into:

• Descendant selectors

• Descendant selector

• And set selector

• Intersection selector

• Attribute selectors

• Pseudo class selector

• Pseudo-element selector

Descendant selectors

Use spaces indicate descendant selectors. As the name suggests, the offspring of the parent element (including the son, grandson, great-grandson)

.container p{
    color: red;        
}
.container .item p{
    color: yellow;
}

 

Descendant selector

Use> represents progeny selector. For example div> p, merely represents the current div element selected progeny (does not include grandchildren ....) element p.

1 .container>p{
2     color: yellowgreen;
3 }

 

And set selector

Using commas to separate a plurality of selectors. Indicate the selected page in multiple labels. Some common elements, and can be set using the selector

/ * And diversity selector * / 
H3, A { 
    Color : # 008000 ; 
    text-Decoration : none ;
                
}

Such as Baidu home use and set selector.

body, h1 of, H2, H3, H4, H5, H6, HR, P, blockquote, DL, dt, dd, UL, OL, Li, pre, form, the fieldset, Legend, Button, INPUT, TextArea, TH, TD { 
      margin : 0 ; 
      padding : 0
    }
 / * use this page selected by the selector and sets all tags will be used when the page layout * /

 

Intersection selector

Use. Represents the intersection selector. The first tag is a tag to be selected, the second label must be a class selector syntax: div.active

For example a <h4 class = 'active'> </ h4> such labels.

Then

h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}
/ * Intersection selector * / 
h4.active { 
    background : # 00BFFF ;
}

It represents an element selected after both common characteristics.

Attribute selectors

Attribute selector literally, tag according to the attributes in the selected current label.

 

/ * The property to find * / 
            / * [for] {
                color: red;
            }*/
            
            / * Find the username for an element property equivalent font color to red * / 
            / * [for = 'username'] {
                color: yellow;
            }*/
            
            / * Start with ^ .... * /  
            / * [for ^ = 'User'] {
                color: #008000;
            }*/
            
            / * Ending $ .... * / 
            / * [for $ = 'VVIP'] {
                color: red;
            }*/
            
            / * Contains a tab element * / 
            / * [for * = "VIP"] {
                color: #00BFFF;
            }*/
            
            /**/
            
            /*指定单词的属性*/
            label[for~='user1']{
                color: red;
            }
            
            input[type='text']{
                background: red;
            }

 

伪类选择器

伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则"  LoVe HAte

/*没有被访问的a标签的样式*/
        .box ul li.item1 a:link{
            
            color: #666;
        }
        /*访问过后的a标签的样式*/
        .box ul li.item2 a:visited{
            
            color: yellow;
        }
        /*鼠标悬停时a标签的样式*/
        .box ul li.item3 a:hover{
            
            color: green;
        }
        /*鼠标摁住的时候a标签的样式*/
        .box ul li.item4 a:active{
            
            color: yellowgreen;
        }

css3的选择器nth-child()

 

/*选中第一个元素*/
        div ul li:first-child{
            font-size: 20px;
            color: red;
        }
        /*选中最后一个元素*/
        div ul li:last-child{
            font-size: 20px;
            color: yellow;
        }
        
        /*选中当前指定的元素  数值从1开始*/
        div ul li:nth-child(3){
            font-size: 30px;
            color: purple;
        }
        
        /*n表示选中所有,这里面必须是n, 从0开始的  0的时候表示没有选中*/
        div ul li:nth-child(n){
            font-size: 40px;
            color: red;
        }
        
        /*偶数*/
        div ul li:nth-child(2n){
            font-size: 50px;
            color: gold;
        }
        /*奇数*/
        div ul li:nth-child(2n-1){
            font-size: 50px;
            color: yellow;
        }
        /*隔几换色  隔行换色
             隔4换色 就是5n+1,隔3换色就是4n+1
            */
        
        div ul li:nth-child(5n+1){
            font-size: 50px;
            color: red;
        }

 

伪元素选择器

 

/*设置第一个首字母的样式*/
        p:first-letter{
            color: red;
            font-size: 30px;

        }
        
/* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
        p:before{
            content:'alex';
        }
        
        
/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
        p:after{
            content:'&';
            color: red;
            font-size: 40px;
        }