CSS選擇器

一、屬性選擇器：

E[att^="val"] 選擇匹配元素Ｅ，定義了屬性att，其屬性值以val開頭的任何字符串。
E[att$="val"] 選擇匹配元素Ｅ，定義了屬性att，其屬性值以val結尾的任何字符串。
E[att*="val"] 選擇匹配元素Ｅ，定義了屬性att，其屬性值包含val的任何字符串。

<a href="xxx.pdf">我鏈接的是PDF文件</a>
<a href="#" class="icon">我類名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>

a[class^=icon]{
  background: green;
  color:#fff;
}
定義了class屬性，這個屬性以icon開頭

a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}

二、僞類選擇器——root

:root選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。
“:root”選擇器等同於元素，簡單點說：

:root{background:orange}
html {background:orange;}
得到的效果等同。

通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標籤元素

三、僞類選擇器——not

:not選擇器稱爲否定選擇器

給表單中除submit按鈕之外的input元素添加紅色邊框

input:not([type="submit"]){
  border:1px solid red;
}


<form action="#">
  <div>
    <label for="name">賬戶:</label>
    <input type="text" name="name" id="name" placeholder="轉戶" />
  </div>
  <div>
    <label for="name">密碼:</label>
    <input type="text" name="name" id="name" placeholder="密碼" />
  </div>
  <div>
    <input type="submit" value="提交" />
  </div>
</form>

四、僞類選擇器——empty

:empty選擇器表示的就是空。用來選擇沒有任何內容的元素，這裏沒有內容指的是一點內容都沒有，哪怕是一個空格。

<p>我是一個段落</p>
<p> </p>
<p></p>

文檔中有三個段落p元素，你想把沒有任何內容的P元素隱藏起來。我們就可以使用“:empty”選擇器來控制

p{
 background: orange;
 min-height: 30px;
}
p:empty {
  display: none;
}

五、僞類選擇器——target

:target選擇器稱爲目標選擇器，用來匹配文檔(頁面)的url的某個標誌符的目標元素。

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
  content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake">
 content for jake
</div>
<h2><a href="#aron">Brand</a></h2>
<div class="menuSection" id="aron">
    content for aron
</div>
點擊鏈接目標選擇器生效

#brand:target {
  background: orange;
  color: #fff;
}
#jake:target {
  background: blue;
  color: #fff;
}
#aron:target {
  background: red;
  color: #fff;
}

六、僞類選擇器——first-child

“:first-child”選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是後代元素。

<ol>
  <li><a href="##">Link1</a></li> //數字１變爲紅色
  <li><a href="##">Link2</a></li>
  <li><a href="##">link3</a></li>
</ol>


ol > li{
  font-size:20px;
  font-weight: bold;
  margin-bottom: 10px;
}
**子選擇器**，即大於符號(>),用於選擇指定標籤元素的**第一代**子元素。

ol a {
  font-size: 16px;
  font-weight: normal;
}
**後代選擇器**是作用於**所有子後代**元素。

ol > li:first-child{
  color: red;
}
通過“:first-child”選擇器，定位列表中的第一個列表項，並將序列號顏色變爲紅色。

七、僞類選擇器——nth-child(n)

“:nth-child(n)”選擇器用來定位某個父元素的一個或多個特定的子元素。其中“n”是其參數，而且可以是整數值(1,2,3,4)，也可以是表達式(2n+1、-n+5)和關鍵詞(odd、even)，但參數n的起始值始終是1，而不是0。也就是說，參數n的值爲0時，選擇器將選擇不到任何匹配的元素。

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
</ol>


ol > li:nth-child(2n){
  background: orange;
}
通過“:nth-child(n)”選擇器，並且參數使用表達式“2n”，將偶數行列表背景色設置爲橙色。

“:nth-last-child(n)”選擇器和前面的“:nth-child(n)”選擇器非常的相似，只是這裏多了一個“last”，所起的作用和“:nth-child(n)”選擇器有所區別，從某父元素的最後一個子元素開始計算，來選擇特定的元素

八、first-of-type選擇器

“:first-of-type”選擇器類似於“:first-child”選擇器，不同之處就是指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子元素。

<div class="wrapper">
  <div>我是一個塊元素，我是.wrapper的第一個子元素</div>
  <p>我是一個段落元素，我是不是.wrapper的第一個子元素，但是他的第一個段落元素</p>
  <p>我是一個段落元素</p>
  <div>我是一個塊元素</div>
</div>


/*我要改變第一個段落的背景爲橙色*/
.wrapper > p:first-of-type {
  background: orange;
}

“:last-of-type”選擇器和“:first-of-type”選擇器功能是一樣的，不同的是他選擇是父元素下的某個類型的最後一個子元素。

“:nth-of-type(n)”選擇器和“:nth-child(n)”選擇器非常類似，不同的是它只計算父元素中指定的某種類型的子元素。當某個元素中的子元素不單單是同一種類型的子元素時，使用“:nth-of-type(n)”選擇器來定位於父元素中某種類型的子元素是非常方便和有用的。

“:nth-last-of-type(n)”選擇器和“:nth-of-type(n)”選擇器是一樣的，選擇父元素中指定的某種子元素類型，但它的起始方向是從最後一個子元素開始，而且它的使用方法類似於上節中介紹的“:nth-last-child(n)”選擇器一樣。

九、only-child選擇器

“:only-child”選擇器選擇的是父元素中只有一個子元素，而且只有唯一的一個子元素。也就是說，匹配的元素的父元素中僅有一個子元素，而且是一個唯一的子元素。

<div class="post">
  <p>我是一個段落</p>
  <p>我是一個段落</p>
</div>
<div class="post">
  <p>我是一個段落</p>
</div>


.post p {
  background: green;
  color: #fff;
  padding: 10px;
}
.post p:only-child {
  background: orange;
}

“:only-of-type”選擇器用來選擇一個元素是它的父元素的唯一一個相同類型的子元素。這樣說或許不太好理解，換一種說法。

十、enabled選擇器

在Web的表單中，有些表單元素有可用（“:enabled”）和不可用（“:disabled”）狀態，比如輸入框，密碼框，複選框等。

<form action="#">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="可用輸入框"  />
  </div>
   <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="禁用輸入框"  disabled="disabled" />
  </div>
</form>  


input[type="text"]:enabled {
  background: #ccc;
  border: 2px solid red;
}

“:disabled”選擇器剛好與“:enabled”選擇器相反，用來選擇不可用表單元素。

十一、checked選擇器

在CSS3中，我們可以通過狀態選擇器“:checked”配合其他標籤實現自定義樣式。而“:checked”表示的是選中狀態。

<form action="#">
  <div class="wrapper">
    <div class="box">
      <input type="checkbox" checked="checked" id="usename" /><span>√</span>
    </div>
    <lable for="usename">我是選中狀態</lable>
  </div>

  <div class="wrapper">
    <div class="box">
      <input type="checkbox"  id="usepwd" /><span>√</span>
    </div>
    <label for="usepwd">我是未選中狀態</label>
  </div>
</form> 


.box input {
  opacity: 0;
  position: absolute;
  top:0;
  left:0;
}

.box span {
  position: absolute;
  top: -10px;
  right: 3px;
  font-size: 30px;
  font-weight: bold;
  font-family: Arial;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  color: orange;
}

input[type="checkbox"] + span {
  opacity: 0;
}
相鄰兄弟選擇器 可選擇緊接在另一元素後的元素，且二者有相同父元素。

input[type="checkbox"]:checked + span {
  opacity: 1;//透明度
}

十二、::selection選擇器

::selection”僞元素是用來匹配突出顯示的文本(用鼠標選擇文本時的文本)。瀏覽器默認情況下，用鼠標選擇網頁文本是以“深藍的背景，白色的字體”顯示的

<p>“::selection”僞元素是用來匹配突出顯示的文本。瀏覽器默認情況下，選擇網站文本是深藍的背景，白色的字體，</p>


::-moz-selection {
  background: red;
  color: green;
}
::selection {
  background: red;
  color: green;
}

十三、read-only選擇器

“:read-only”僞類選擇器用來指定處於只讀狀態元素的樣式。簡單點理解就是，元素中設置了“readonly=’readonly’

<form action="#">
  <div>
    <label for="name">姓名:</label>
    <input type="text" name="name" id="name" placeholder="大漠" />
  </div>
  <div>
    <label for="address">地址:</label>
    <input type="text" name="address" id="address" placeholder="中國上海" readonly="readonly" />
  </div>
</form> 


form {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
form > div {
  margin-bottom: 10px;
}

input[type="text"]{
  border: 1px solid orange;
  padding: 5px;
  background: #fff;
  border-radius: 5px;
}

input[type="text"]:-moz-read-only{
  border-color: #ccc;
}
input[type="text"]:read-only{
  border-color: #ccc;
}

“:read-write”選擇器剛好與“:read-only”選擇器相反，主要用來指定當元素處於非只讀狀態時的樣式。

一、屬性選擇器：

二、僞類選擇器——root

三、僞類選擇器——not

四、僞類選擇器——empty

五、僞類選擇器——target

六、僞類選擇器——first-child

七、僞類選擇器——nth-child(n)

八、first-of-type選擇器

九、only-child選擇器

十、enabled選擇器

十一、checked選擇器

十二、::selection選擇器

十三、read-only選擇器

屬性與樣式

封裝cookie的添加，刪除，查詢方法

數據類型和引用數據類型

javaScript變量提升?

PHP變量關鍵字global/$GLOBAL[]/static

Mac下配置sublime實現LaTeX

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

linux以太網驅動總結