關係選擇符\屬性選擇符\僞對象選擇符\僞類選擇符

原創 &XYZ& 2020-04-27 15:06

文章目錄

相鄰選擇符 E + F：下一個滿足條件的兄弟元素節點

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知“心”</title>
    <link rel="stylesheet" href="./src/index.css">
</head>

<body>
    <div>div</div>
    <p class="demo">1</p>
    <p>2</p>
    <p>3</p>
</body>


</html>

/* 
    E + F
    下一個滿足條件的兄弟元素節點
*/

div+p {
    background-color: #ff0000;
}

div+.demo {
    font-size: 30px;
}

兄弟選擇符 E~F

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知“心”</title>
    <link rel="stylesheet" href="./src/index.css">
</head>

<body>
    <div>div</div>
    <span class="demo">123</span>
    <p class="demo">1</p>
    <p>2</p>
    <p>3</p>
    <ul>
        <li>
            <p> li1</p>
        </li>
        <li>
            <p> li2</p>
        </li>
        <li>
            <p> li3</p>
        </li>
    </ul>
    <p>4</p>
</body>

</html>

/* 
    E ~ F
    下一堆滿足條件的兄弟元素節點
*/

div~p {
    background-color: #ff0000;
}

屬性選擇符 E[attr~=“val”]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知“心”</title>
    <link rel="stylesheet" href="./src/index.css">
</head>

<body>
    <div class="a">1</div>
    <div class="b">2</div>
    <div class="a b">3</div>
    <div class="aa b c">4</div>
    <div class="aaaa">
        5
        <div class="a">6</div>
    </div>
</body>

</html>

/* 
    E[attr~="val"]
        div[class~='a']
            選擇div裏面有class值等於a的（注意是等於一個a的）
*/
div[class~='a']{
    background-color: #ff0000;
}

屬性選擇符 E[attr|=“val”]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知“心”</title>
    <link rel="stylesheet" href="./src/index.css">
</head>

<body>
    <div class="a">1</div>
    <div class="b">2</div>
    <div class="a-test b">3</div>
    <div class="aa b c">4</div>
    <div class="aaaa">
        5
        <div class="aa-test">6</div>
    </div>
</body>

</html>

/* 
    E[attr|="val"]
        div[class|='a']
            選擇div裏面有class值等於a或者a-的（注意是等於一個a的）
*/
div[class|='a']{
    background-color: #ff0000;
}

屬性選擇符 E[attr^=“val”] 和 E[attr$=“val”]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知“心”</title>
    <link rel="stylesheet" href="./src/index.css">
</head>

<body>
    <div class="a">1</div>
    <div class="b">2</div>
    <div class="a-test b">3</div>
    <div class="aa b c">4</div>
    <div class="aaaa">
        5
        <div class="aa-test">6</div>
    </div>
</body>

</html>

/* 
    E[attr^="val"]
        div[class^='a']
            選擇div裏面有class值等於a開始的
*/

div[class^='a'] {
    background-color: #ff0000;
}

/* 
    E[attr$="val"]
        div[class$='st']
            選擇div裏面有class值等於st結束的
*/

div[class$='st'] {
    font-size: 30px
}

屬性選擇符 E[attr*=“val”]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知“心”</title>
    <link rel="stylesheet" href="./src/index.css">
</head>

<body>
    <div class="a">1</div>
    <div class="b">2</div>
    <div class="a-test b">3</div>
    <div class="aa b c">4</div>
    <div class="aaaa">
        5
        <div class="aa-test">6</div>
    </div>
</body>

</html>

/* 
    E[attr*="val"]
        div[class*='b']
            選擇div裏面有class值含有b的
*/

div[class*='b'] {
    background-color: #ff0000;
}

div[class*='st'] {
    font-size: 30px
}

div[class*=' '] {
    font-weight: 600;
}

僞對象選擇符 E::selection

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知“心”</title>
    <link rel="stylesheet" href="./src/index.css">
</head>

<body>
    <div>
        衆所周知，隨着各國的經濟不斷髮展，
        目前全球所需要的能源和礦產資源也越來越多，
        尤其是其中的稀土等資源就是如此。
    </div>
    <div>
        瞭解過稀土的人都知道，
        其可以運用在衆多的領域，
        現如今很多軍事武器裝備的研發和建造度離不開稀土的參與。
    </div>
</body>

</html>

/* 
    E::selection
        裏面只有三個屬性：
            background-color
            color
            text-shadow
*/

div:nth-of-type(1)::selection {
    color: #fff;
    background-color: #fcc;
}

div:nth-of-type(2)::selection {
    color: yellow;
    background-color: green;
}

E:not(s)：匹配不包含選擇符的元素E

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>溫故而知“心”</title>
  <link rel="stylesheet" href="./test.css">
</head>

<body>
  <div class="demo">1</div>
  <div class="demo">2</div>
  <div class="test">3</div>
  <div>4</div>
</body>

</html>

/* 
    E:not(s)
        匹配不包含選擇符的元素E
*/

/* 選擇div的class不爲demo的背景顏色變爲紅色 */

div:not(.demo) {
    background-color: #ff0000;
}

/* 選擇div的class不爲demo的，字體變大爲30px */

div:not([class='demo']) {
    font-size: 30px;
}

/* 選擇div沒有class的，字體變大爲60px */

div:not([class]) {
    font-size: 60px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>溫故而知“心”</title>
  <link rel="stylesheet" href="./test.css">
</head>

<body>
  <ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
  </ul>
</body>

</html>

/* 最後的li底部的橫線不要 */
ul {
    width: 300px;
    border: 1px solid #999999;
    list-style: none;
}

li {
    height: 50px;
}

li:not(:last-of-type) {
    border-bottom: 1px solid black;
}

E:root :匹配E元素在文檔的根元素。在HTML中，根元素永遠是HTML

/* 
    E:root
        匹配E元素在文檔的根元素。在HTML中，根元素永遠是HTML
*/
:root{
    background-color: #ff0000;
}

E:target { sRules }: 匹配相關URL指向的E元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知“心”</title>
    <link rel="stylesheet" href="./src/index.css">
</head>

<body>
    <a href="#box1">a1</a>
    <a href="#box2">a2</a>
    <div id="box1">box1</div>
    <div id="box2">box2</div>
</body>

</html>

/* 
    E:target { sRules }:
        匹配相關URL指向的E元素。
        解釋：URL後面跟錨點#，指向文檔內某個具體的元素。這個被鏈接的元素就是目標元素(target element)，:target選擇器用於選取當前活動的目標元素。
*/

div:target {
    border: 1px solid #ff0000;
}

E:first-child { sRules }:匹配父元素的第一個子元素E。同理E:last-child{sRules}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知“心”</title>
    <link rel="stylesheet" href="./src/index.css">
</head>

<body>
    <div>
        div1
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <div>div2</div>
</body>

</html>

/* 
    E:first-child { sRules }
        匹配父元素的第一個子元素E。
        要使該屬性生效，E元素必須是某個元素的子元素，
        E的父元素最高是body，即E可以是body的子元素。
*/

div:first-child {
    border: 1px solid #ff0000;
}

p:first-child {
    border: 1px solid #0000ff;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知“心”</title>
    <link rel="stylesheet" href="./src/index.css">
</head>

<body>
    <div>
        div1
        <span>span1</span>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <div>div2</div>
</body>

</html>

/*
    此時的p元素，不在是父元素div的第一個子元素了，
    所以下面的樣式沒有效果 
*/

p:first-child {
    border: 1px solid #0000ff;
}

E:only-child { sRules }:匹配父元素僅有的一個子元素E。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知“心”</title>
    <link rel="stylesheet" href="./src/index.css">
</head>

<body>
    <div class="div1">
        div1
        <span class="span1">span1</span>
    </div>

    <div class="div2">
        div2
        <span class="span2">span2</span>
    </div>
</body>

</html>

/* 
    E:only-child { sRules }
        匹配父元素僅有的一個子元素E。
        要使該屬性生效，E元素必須是某個元素的子元素，
        E的父元素最高是body，即E可以是body的子元素。
    
    下面的樣式只有， border: 1px solid #0000ff有效；
    .div1代表着div，而在body父元素下有兩個子元素div，
    違背了僅有一個子元素E的原則。
*/

.div1:only-child {
    border: 1px solid #ff0000;
}

.span1:only-child {
    border: 1px solid #0000ff;
}

E:nth-child(n) { sRules } 匹配父元素的第n個子元素E，假設該子元素不是E，則選擇符無效。 根據個數來計算（查找位置優先）。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>溫故而知“心”</title>
  <link rel="stylesheet" href="./test.css">
</head>

<body>
  <div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <P>4</P>
    <P>5</P>
    <P>6</P>
  </div>
</body>

</html>

/* 
    E:nth-child(n) { sRules }
        匹配父元素的第n個子元素E，假設該子元素不是E，則選擇符無效。
        根據個數來計算（查找位置優先）。
*/

p:nth-child(2) {
    border: 1px solid #ff0000;
}

/* (2n)換算出來會是偶數 或用even來代替也是可以的*/

p:nth-child(2n) {
    font-size: 30px;
}

/* (2n+1)換算出來會是奇數 或用odd來代替也是可以的 */

p:nth-child(2n+1) {
    color: #0000ff;
    font-weight: bold;
}

E:first-of-type { sRules } 匹配父元素下第一個類型爲E的子元素。 E:last-of-type { sRules }匹配父元素下的所有E子元素中的倒數第一個。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>溫故而知“心”</title>
  <link rel="stylesheet" href="./test.css">
</head>

<body>
  <div>
    <span>span1</span>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </div>
</body>

</html>

/* 
    E:first-of-type { sRules }
        匹配父元素下第一個類型爲E的子元素。
    E:last-of-type { sRules }
        匹配父元素下的所有E子元素中的倒數第一個。
*/

p:first-of-type {
    border: 1px solid #ff0000;
}

p:last-of-type {
    border: 1px solid #0000ff;
}

E:only-of-type { sRules }：匹配父元素的所有子元素中唯一的那個子元素E。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知“心”</title>
    <link rel="stylesheet" href="./src/index.css">
</head>

<body>
    <div>
        <span>span0</span>
        <p>p1</p>
        <p>p2</p>
    </div>
</body>

</html>

/* 
    E:only-of-type { sRules }
        匹配父元素的所有子元素中唯一的那個子元素E。
*/

/* 樣式有效 */

span:only-of-type {
    border: 1px solid #0000ff;
}

/* 樣式無效 */

p:only-of-type {
    border: 1px solid #ff0000;
}

E:nth-of-type(n) { sRules } : 匹配父元素的第n個子元素E。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知“心”</title>
    <link rel="stylesheet" href="./src/index.css">
</head>

<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
    </div>
    <div>
        <p>1-1</p>
        <p>2-1</p>
        <p>3-1</p>
    </div>
</body>

</html>

/* 
    E:nth-of-type(n) { sRules } 
        匹配父元素的第n個子元素E。
*/

p:nth-of-type(1) {
    border: 1px solid #ff0000;
}

p:nth-of-type(odd) {
    font-size: 30px;
}

p:nth-of-type(even) {
    background-color: indigo;
}

p:nth-of-type(n+3) {
    color: lightcoral;
}

E:empty { sRules }: 匹配沒有任何子元素（包括text節點）的元素E。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溫故而知“心”</title>
    <link rel="stylesheet" href="./src/index.css">
</head>

<body>
    <div>
        <span>123</span>
    </div>
    <div></div>
    <div>234</div>
    <div> </div>
    <div>345</div>
    <div><!-- 註釋 --></div>
</body>

</html>

/* 
    E:empty { sRules }
        匹配沒有任何子元素（包括text節點）的元素E。
*/

/* 裏面含有空格不能算 */

div:empty {
    padding: 10px;
    border: 1px solid #ff0000;
}
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

html+css 選項卡

  <style type=text/css>td {   font-size: 12px;  color: #000000;  line-heig

bluelazyboy 2020-07-08 12:23:28

position:absolute下，top:0,right:0,bottom:0,left:0 結合margin:auto的作用（讓明確寬高的盒子水平垂直居中於父元素）

絕對定位 + margin，讓明確寬高的盒子水平垂直居中於窗口 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <meta name="vie

ddx2019 2020-07-08 11:55:42

css每日一報（自己積累平時寫法）

1、pc端共用的樣式： *{padding:0px;margin:0px;outline:0 none; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-s

空手走-web 2020-07-08 11:54:55

vue開發的手機購物商城APP東京大藥房(帶數據庫，定位，支付，等)

源碼下載就能上線,需要的注注,私信,

qq_36824777 2020-07-08 11:50:38

原生JS實現樹狀結構列表

樹狀結構列表，這個技術點之前有寫過了，是基於vue講解，但似乎都沒有解決痛點，最基礎的原生JS該怎麼實現呢？ 這篇文章會全面詳細的介紹樹狀結構列表的實現，從數據處理成樹狀結構，到動態生成dom節點渲染頁面。  確定原始數據結構  原始數據

wendZzz 2020-07-08 11:27:37

web前端複習第七課

                                           二級導航實例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

思丰百年 2020-07-08 10:46:31

我實現了客戶要求的五彩斑斕的黑！！！

五彩斑斕的黑？？？？五彩斑斕？？？還黑？？之前只是笑笑就過去了。。那麼能不能實現呢，，，今天他來了！！！ 效果圖:展示出來的效果顏色和光暈的顏色都是用c3寫成的動畫效果，由於不支持上傳視頻，就截了幾幀的圖片，有想要自己實現這個動畫

SC前端 2020-07-08 10:39:04

網頁設計中常見的兼容性問題

常見兼容性問題 1、png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8. 2、瀏覽器默認的margin和padding不同。解決方案是加一個全局的 *{margin:0;padding:0;}來統一。 3、IE6

LFWMP 2020-07-08 10:28:29

【Python】CSS選擇器語法

常用語法 語法 說明 * 選擇所有節點 #container 選擇id爲container的節點 .container 選擇所有class包含container的節點 div,p 選擇所有 div 元素和

岚清子 2020-07-08 09:13:33

HTML+css做炫酷的3d盒子反轉

3d盒子反戰 效果如圖如下： HTML重要的代碼如下： <ul> <li> <div class="box"> <div class="front">目錄

文情战 2020-07-08 09:12:55

幾個簡單的css動畫

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wi

哀木i 2020-07-08 08:40:28

css消息數量，圓圈數字，購物車數量。

  html:  <a href="index.html" class="nav">未讀留言<div class="nav-counter nav-counter-blue">4</div></a> css:  .nav{

blueBings 2020-07-08 07:33:49

一次完整的HTTP服務過程（再整理）

重溫一下計算機網絡的重要知識 例如：當我們在web瀏覽器的地址欄中輸入：www.baidu.com並回車，具體發生了什麼。 第一層理解 對網址進行DNS域名解析，得到對應的公網IP地址 根據這個IP，找到對應的服務器，發起T

wennianzhu 2020-07-08 07:29:39

Js and Css

<div style="border: 1px; border-style: solid; border-collapse: collapse; border-color: Gray" mce_style="border: 1px; bo

海会圣贤 2020-07-08 06:54:55

window print 設置字體大小

<style   type="text/css">     @media   print   {     body   {   font-size:   12px}     }     @media   screen   {     bo

海会圣贤 2020-07-08 06:54:55