1. 程式人生 > 實用技巧 >spring框架(IOC&AOP)

spring框架(IOC&AOP)

css3選擇器

https://www.cnblogs.com/nyw1983/p/11628364.html

自定義屬性:自己新增的屬性,配合js,控制dom

屬性選擇器

權重為10

/* 不允許屬性值有空格 */
a[class="links"]{
    background:red;
}



/* 多選   不允許屬性值有空格 */
a[class="links"][ class="test"]{
    background:red;
}

/* 只要出現links就被選中,即使後面有空格  */
a[class~="links"]{
    background:red;
}
/* 以xx開頭 */
/* 只要出現樣式以xx開頭,就被選中  */
a[class^="active  links"]{
    background:red;
}
/* 只要出現樣式以xx結尾,就被選中  */
a[class$="active  links"]{
    background:red;
}
/* 只要包含就被選中 */
a[class*="active  links"]{
    background:red;
}

偽類選擇器

權重為10

動態偽類

  • a:link 沒有被訪問時的樣式
  • a:visited 被訪問後的樣式
  • a:hover 滑鼠懸浮的樣式
  • a:active 滑鼠點中啟用,按住不動 時的樣式

LVHA

  • input輸入框的 foucs 聚焦時的樣式

UI元素狀態偽類

  • enabled 預設樣式屬性

  • checked 被選中的樣式

    input[type="radio"]:checked{
        
    }
    
  • 禁用之後的樣式

    input[type="checkbox"]:disabled{
        
    }
    

結構偽類

1. 選擇文件根元素

html:rooot

2. 選擇內容為空的元素,進行處理

ul li:empty{
	
}

3.選擇某個元素的第一個元素

ul li:first-child{
    
}

4.選擇某個元素的最後一個元素

ul li:last-child{
    
}

5. 選擇第幾個元素

ul li:nth-child(3){

6. 規律性間隔選擇

/* 2n  3n+1  規律性間隔*/
li:nth-child(3n){
    
}

7. 正方向範圍(從第n個開始)

/* 選中從第6個開始的子元素 */
li:nth-child(n+6){
    
}

8. 負方向範圍(從開始一直到第n個)

/* 選中從第1個到第9個子元素。使用 :nth-child(-n+9) ,就相當讓你選中第9個和其之前的所有子元素 */
a:nth-child(-n+9){
    
}

9. 中間範圍選擇

/* 選擇第2個到底6個 */
.nav_box a:nth-child(-n+6):nth-child(n+2)

10.從最後開始,選擇一個或者多個

ul li:nth-last-child{
    
}

11 .選擇第奇數個元素

ul li:nth-child(odd){
    
}

12 .選擇第偶數個元素

ul li:nth-child(even){
    
}

nth下面的元素必須是清一色的同一種類型元素 ,是先看第幾個,再看選擇的是哪個元素

13. 選擇指定的標籤的第幾個標籤

.boss h3:nth-of-type(3){
    
}

14. 選擇指定標籤的第一個標籤

.boss div:first-of-type(){
    
}

15. 選擇指定標籤的最後一個標籤

.boss h2:last-of-type(){
    
}

16. 從最後一個倒著數,選擇標籤

.boss div:nth-last-of-type(){
    
}

目的偽類

需要加id

<div id="text1">
	/* id配合錨點 */
	<a href="text1">測試</a>
</div>

div{
    display:none;
}
div:target{
    display:block;
}

偽元素選擇器

層次選擇器