文章目錄

CSS核心

一.複雜選擇器

兄弟選擇器
兄弟元素—>具備相同父級元素的平級元素之間，稱爲兄弟元素。所有的兄弟選擇器，只往後找，不能往前找（只能找弟弟，不能找哥哥）
1. 相鄰兄弟選擇器
  選擇器1+選擇器2{}
  要求匹配選擇器2緊緊挨着選擇器1，修改選擇器2的樣式
  即：確認一個哥哥，找到一個緊緊挨着符合條件弟弟，然後修改弟弟
2. 通用兄弟選擇器
  選擇器1~選擇器2{}
  獲取選擇器1後面，所有選擇器2，然後修改這些選擇器2
  即：確認一個哥哥，找到符合條件的所有弟弟
  使用場合
  經常用於，一組元素，第一個元素不要，後面元素都匹配的樣式編寫

屬性(attribute)選擇器–不是爲寫樣式服務的，爲dom服務。
[attr]{}：匹配頁面中，具有attr屬性的元素
elem[attr]{ }：匹配頁面中，具有attr屬性的elem元素
[attr=value]{}：匹配頁面中，具有attr屬性並且屬性值爲value的元素
elem[attr=value]{}
[attr1][attr2]....{} 同時具備attr1，attr2…屬性的元素
elem[attr1][attr2]....{}：同時具備attr1，attr2…屬性的elem元素
elem[attr1=value1][attr2=value2]....{}
舉例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            [id]{color: red;}
            p[class]{color: green;}
            [title="xiaohong"]{color: blue;}
            b[title]{color: pink;}
            [title][style]{color: purple;}
            div[class]{color: black;}
            h1[title="lala"]{color: yellow;}
        </style>
    </head>
    <body>
        <p id="p1">老大</p>
        <p class="c">老二</p>
        <span title="xiaohong">老三</span>
        <b title="lala">老四</b>
        <p title="" style="">老五</p>
        <div class="c">老六</div>
        <h1 title="lala">老幺</h1>
    </body>
</html>

如何爲dom服務（爲查找自定義屬性）

使用屬性選擇器進行模糊查詢
[attr^=value]{}：匹配attr的值，以value開頭的元素
[attr$=value]{}：匹配attr的值，以value結尾的元素
[attr*=value]{}：匹配attr的值，含有value的元素
[attr~=value]{}：匹配attr的值，含有value這個單獨單詞(即只有該value或value前後有空格成爲單獨一個單詞)的元素

僞類選擇器
:link :visited :hover :active :focus
es6規定，僞類選擇器要是用::開頭。但是es6之前就定義好的僞類，還是用單:

目標僞類
匹配被激活的錨點，要應用的樣式
:target{}

結構僞類
通過結構關係，匹配元素

:first-child{}
選擇器用於選取屬於其父元素的首個子元素的指定選擇器。
:last-child{}
找到當前元素父元素的最後一個兒子
:nth-child(n){} 找到其父元素的第n個兒子，n從1開始
注意：此處的兒子必須與當前元素相同，即p:fist-child意爲：查找p標籤所在父元素下第一個p標籤

練習03_ex.html
4*4的表格， 400*400px
通過結構僞類設置如下樣式
第一行背景色爲#0ff；
最後一行背景色爲#ff0
第三行第二列背景色爲#f00

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p:first-child i{color: red;}
            table{
                width: 400px;height: 400;
            }
            tr:first-child{background-color: #0ff;}
            tr:last-child{background-color: #ff0;}
            tr:nth-child(3) td:nth-child(2){background-color: #f00;}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>111</td>
                <td>111</td>
                <td>111</td>
                <td>111</td>
            </tr>
            <tr>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
            <tr>
                <td>333</td>
                <td>333</td>
                <td>333</td>
                <td>333</td>
            </tr>
            <tr>
                <td>444</td>
                <td>444</td>
                <td>444</td>
                <td>444</td>
            </tr>
        </table>
    </body>
</html>

否定僞類
符合條件的元素都不匹配
:not(selector){}
例：

/* 選取不含href和tabindex屬性的a標籤*/
a:not(href):not([tabindex]){}
/* 選取table中不是第三行且不選第2列的其他td設置背景顏色*/
tr:not(:nth-child(3)) td:not(:nth-child(2)){background-color: #f0f;}

空元素
`:empty{}：匹配內部沒有元素的元素
沒有元素：不能有後代元素，也不能有任何文本(空格和回車都不能有)

/* 選取內部是空的p元素*/
p:empty{
                width: 100px;height: 100px;
                background-color: #ff0;
            }

獨生子女
屬於其父元素的唯一子元素
:only-child{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            /* 選取屬於該元素父元素下的唯一子元素的a */
            a:only-child{
                background-color: #0ff;
            }
        </style>
    </head>
    <body>
        <p>
            <a href="">222222222</a>
            <a href="">222222222</a>
            <a href="">222222222</a>
            <a href="">222222222</a>
        </p>
        <p>
            <!-- 該行變色 -->
            <a href="">1111111111111</a>
        </p>
        <p></p>
    </body>
</html>

僞元素選擇器（建議使用雙冒號）
1. 匹配第一個字符
  :first-letter 或者 ::first-letter{}
2. 匹配第一行文本
  :first-line 或 ::first-line
  當第一行和首字符衝突時，首字符優先級更高
3. 匹配用戶選中文本
  ::selection 只有雙冒號
  和首字符衝突時，首字符優先級更高。只能設置背景色和文本顏色。
內容生成
使用css命令，添加html元素，叫做內容生成
1. 使用:after或者::after給元素添加一個兒子
  這個兒子默認是行內元素
  使用content添加內容（文本或者url(img)）
2. 使用:before或者：：before給元素添加一個兒子
  這個兒子默認是行內元素
  使用content添加內容（文本或者url(img)）

內容生成解決的問題

外邊距溢出

    /*等價在parent元素的最開始設置一個空table*/
    #parent::before{
      content: "";
      display: table;
    }

高度坍塌

/* 等價在parent元素的最後加一個設置了clear:both的div */
#parent::after{
                content: "";
                display: block;
                clear: both;
            }

二.彈性佈局（重點）

什麼是彈性佈局
主要解決某個元素中，子元素（僅僅是子元素不是後代元素）的佈局方式
爲佈局提供非常大的靈活性
彈性佈局的相關概念
1. 容器
  要發生彈性佈局的子元素的父元素叫做容器
  即：定義了display：flex;的元素
2. 項目
  要發生彈性佈局的子元素們叫做項目
  即：定義了display: flex的元素的兒子們
3. 主軸(4條)–x軸正負方向，y軸正負方向
  項目們的排列方向，稱之爲主軸
  項目們在主軸上的排列順序，稱爲主軸的起點和終點
  例：x軸正方向稱爲：主軸方向x軸，主軸起點-左側，主軸重點-右側
4. 交叉軸(2條)–x軸正方向，y軸負方向
  永遠與主軸垂直的方向
  項目們在交叉軸上的排列，稱爲交叉軸的起點和終點
  
  以圖中3個元素爲例：3個子元素做彈性佈局，主軸方向x軸，主軸起點-左側，交叉軸y軸，在交叉軸的終點對齊
語法
設置彈性容器
display：
取值：
flex; 把塊級變爲彈性容器
inline-flex; 將行內元素變爲彈性容器
注意：
1. 當一個元素設置爲容器之後，這個容器的text-align，vertical-align失效，項目沒失效
2. 當元素變爲彈性項目時（即父元素設置了display:flex），這個彈性項目float，clear失效
容器的樣式屬性
1. 設置主軸的方向
  flex-direction:
  取值：
  row 默認值，主軸爲x，主軸起點在左側
  row-reverse 主軸爲x，主軸起點在右
  column 主軸爲y，主軸起點在頂部
  column-reverse 主軸爲y，主軸起點在底部
2. 設置項目換行
  當容器在主軸方向，空間不夠時，用來設置項目是否換行
  flex-wrap:
  取值：
  no-wrap; ：默認值，不換行(項目壓縮)
  wrap; ：換行
  wrap-reverse; ：反轉換行
3. 上面兩個屬性的簡寫方式
  flex-flow: 主軸方向換行;
4. 定義項目在主軸上對齊方式
  justify-content:
  flex-start;：默認值，主軸起點對齊
  center;：主軸的中間對齊
  flex-end;：主軸終點對齊
  space-around;：每個項目左右外邊距相同 (兩端有空間)
  
  space-between;：每個項目之間間距相同，兩端對齊(兩端沒有空間)
5. 交叉軸對齊方式
  align-items:
  取值：
  flex-start 交叉軸起點
  center 中間
  flex-end 交叉軸終點
  baseline 每個項目的文本，基線對齊（很少用）
  stretch 前提，是項目(不是容器)在交叉軸方向不寫尺寸，項目充滿交叉軸
項目的樣式屬性
只能設置在一個項目上，不影響其他項目
1. 單獨設置一個項目交叉軸對齊方式
  align-self:
  取值：
  flex-start 交叉軸起點
  center 中間
  flex-end 交叉軸終點
  baseline 每個項目的文本，基線對齊（很少用）
  stretch 前提，是項目(不是容器)在交叉軸方向不寫尺寸，項目充滿交叉軸
  auto 使用容器align-items定義的值
2. 設置項目在主軸的排列順序
  order:取值爲無單位數字，默認值爲0。值越小，離主軸起點越近！
3. 項目縮小
  當主軸空間不夠時，項目是否縮小，怎麼縮小
  flex-shrink:取值爲不帶單位的數字
  默認值：1；
  取值規則，子元素總溢出寬度，根據flex-shrink取值，按比例*總溢出寬度，分配給各個項目做縮小(減法)。
  舉例：
  爲父元素命名爲div0，1-5五個子元素分別命名爲div1、div2、…、div5。
  父元素需要設定：
  
  display：flex，width：500px
  
  所有子元素需要設定：
  
  flex-basis：120px; 即不發生收縮時子元素原本的寬度
  
  以上爲先決條件。子元素寬度之和與父元素寬度的差值：
  
  120*5-500=100px
  
  這時通過設定子元素的flex-shrink屬性來決定100px總縮減量如何分配給5個子元素。
  預設:
  
  前三個div設置flex-shrink: 1;
  後兩個div設置flex-shrink: 2;
  
  div1佔總收縮比例的1/7，所以div1需要被移除的溢出量爲
  
  100*(1/7)≈14px
  
  則，最後div1的實際寬度爲
  
  120-14=106px
4. 項目放大
  當主軸空間過大，項目是否放大，怎麼放大
  flex-grow:取值爲不帶單位的數字
  默認值：0；
  取值規則，多出的空間，按照取值，分配給各個項目進行放大(相加)

T-CSS核心-day01-複雜選擇器、彈性佈局

文章目錄

CSS核心

一.複雜選擇器

二.彈性佈局（重點）

一個簡單的MD5加鹽

C# 代碼學習

藍橋15屆stema編程題密碼鎖-動態規劃 C++和Python最後一道題

2021看雪SDC議題回顧 | SaTC：一種全新的物聯網設備漏洞自動化挖掘方法

Kafka存儲機制

aws語音呼叫調用，告警電話

【轉】[C#] WebAPI 防止併發調用二（冥等性）

C#/.NET/.NET Core優秀項目和框架2024年4月簡報

HTTP URL 詳解

得物 ZooKeeper SLA 也可以 99.99%

T-JS-ECMAScript核心題庫

T-CSS基礎-day05-浮動、樣式屬性、定位

T-CSS核心-day01-複雜選擇器、彈性佈局

T-JS基礎-day09-引用類型

JavaScript Math 對象屬性及方法示例

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結