新增H5與CSS3知識筆記2

CSS部分

CSS3屬性選擇器（類選擇器、屬性選擇器、僞類選擇器，權重都為10）

類選擇器
屬性選擇器

選擇符	簡介
E[att]	選擇具有att屬性的E元素
E[att="val"]	選擇具有att屬性且屬性值等于val的E元素
E[att^="val"]	比對具有att屬性、且以val開頭的E元素
E[att$="val"]	比對具有att屬性、且以val結尾的E元素
E[att*="val"]	比對具有att屬性、且值中含有val的E元素

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            cursor: pointer;
            /* 滑鼠為手型 */
        }

        /* 屬性選擇器使用方法 */
        /* 選擇的是：既有button又有disabled這個屬性的元素 */
        /* 類選擇器、屬性選擇器、僞類選擇器，權重都為10，是以優先級大于 上面的button*/

        /* 1.直接寫屬性 */
        button[disabled] {
            cursor: default;
        }

        /* 2.屬性等于值 */
        input[type="search"] {
            color: pink;
        }

        /* 3.屬性以某個值開頭 */
        div[class^="icon"] {
            color: rebeccapurple;
        }

        /* 4.屬性以某個值結尾 */
        div[class$="icon"] {
            color: red;
        }

        /* 5.可以在任意位置的 */
        /* div[class*="icon"] {
            color: rgb(69, 218, 49)
        } */
    </style>
</head>

<body>
    <!-- disabled禁用按鈕 -->
    <button>按鈕</button>
    <button>按鈕</button>
    <button disabled>按鈕</button>
    <button disabled>按鈕</button>
    <br>
    <input type="text" name="" id="" value="文本框">
    <input type="text" name="" id="" value="文本框">
    <input type="text" name="" id="" value="文本框">
    <br>
    <input type="search" name="" id="" value="搜尋框">
    <input type="search" name="" id="" value="搜尋框">
    <input type="search" name="" id="" value="搜尋框">

    <div class="icon1">圖示1</div>
    <div class="icon2">圖示2</div>
    <div class="icon3">圖示3</div>
    <div class="iicon3">圖示4</div>
    <div class="icon">圖示5</div>

</body>

</html>

新增H5與CSS3知識筆記2

僞類選擇器（有冒号）

選擇符	簡介
E:first-child	比對父元素中的第一個子元素E
E:last-child	比對父元素中最後一個E元素
E:nth-child(n)	比對父元素中第n個子元素
E:first-of-type	指定類型E中的第一個
E:last-of-type	指定類型E中的最後一個
E:nth-of-type(n)	指定類型E中的第n個

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:first-child {
            color: aqua;
        }

        ul li:last-child {
            color: red;
        }

        ul li:nth-child(6) {
            color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>

新增H5與CSS3知識筆記2

注：nth-child(n)

n可以是數字、關鍵字和公式
n是數字則代表選擇第幾個
常見的關鍵詞有even偶數、odd奇數
常見的公式如下（如果n是公式，則從0開始計算）
但是，第0個元素或者超出了元素的個數會被忽略（比如第0個元素則為0忽略）

公式	取值
2n	偶數
2n+1	奇數
5n	5 10 15...
n+5	從第五個開始（包含第五）到最後
-n+5	前五個（包含第五）

例如：奇偶行變色

1、even偶數、odd奇數

ul li:nth-child(even) {
            color: yellow;
        }

        ul li:nth-child(odd) {
            color: red;
        }

2、公式

ul li:nth-child(2n) {
            color: peru;
        }

        ul li:nth-child(2n+1) {
            color: blue;
        }

例如：n+5 / -n+5

ul li:nth-child(n+5) {
            color: brown;
        }

        ul li:nth-child(-n+5) {
            color: red;
        }

注：:nth-child(n)選擇父元素裡面的第n個孩子，不管裡面的孩子是否同一個類型

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* nth隻區分第一個孩子是誰而不區分标簽相同與否 */
        /* div :nth-child(1) {
            color: blue;
        }

        div :nth-child(2) {
            color: green;
        } */

        /* 會發現不變色，因為下面表示的是第一個元素既是span又是第一個孩子，下面第一個孩子是p标簽是以不成立 */
        div span:nth-child(1) {
            color: yellow;
        }

        /* n=2則成立 */
        div span:nth-child(2) {
            color: yellow;
        }
    </style>
</head>

<body>
    <div>
        <p>我是p标簽</p>
        <span>我是span标簽</span>
        <span>我是span标簽</span>
        <span>我是span标簽</span>
    </div>
</body>

方法：還可以用of-type來指定标簽來改變樣式

div span:first-of-type {
            color: yellow;
        }

        div span:last-of-type {
            color: red;
        }

        div span:nth-of-type(2) {
            color: green;
        }

新增H5與CSS3知識筆記2

僞元素選擇器

選擇符	簡介
：：before	在元素内部的前面插入元素
：：after	在元素内部的後面插入元素

注：

before和after必須要有content屬性

before在内容的前面，after在内容的後面

before和after建立一個元素，但屬于行内元素。

因為在DOM裡面看不見剛才建立的元素，是以稱為僞元素（如果要給寬高，可以設定display：block或者inline-block）

僞元素和标簽選擇器一樣，權重為1

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }

        div::before {
            content: "我";
        }

        div::after {
            content: "豬";
        }
    </style>
</head>

<body>
    <div>是</div>
</body>

新增H5與CSS3知識筆記2

案例：僞元素字型圖示

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/font_xx6rr9gaey8/iconfont.css" target="_blank" rel="external nofollow" >
    <style>
        div,
        p {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid red;
        }

        span {
            position: absolute;
            top: 10px;
            right: 10px;
        }

        /* 僞元素選擇器自成空間不必帶span */
        p::after {
            content: "\e603";
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: "iconfont";
        }
    </style>
</head>

<body>
    <div>
        <span class="iconfont icon-search"></span>
    </div>
    <br>
    <div>
        <span class="iconfont icon-lianxi"></span>
    </div>

    <p></p>
</body>

新增H5與CSS3知識筆記2

注：現在字型圖示的使用沒那麼麻煩了，這隻是為了展示僞元素選擇器的自成空間才這樣做的。

例：三角形（僞元素）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }

        div::after {
            content: "";
            position: absolute;
            top: 10px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid red;
            border-bottom: 1px solid red;
            transform: rotate(45deg);
            transition: all 0.2s;
        }

        /* 滑鼠經過div裡面的三角旋轉 */
        div:hover::after {
            transform: rotate(225deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

新增H5與CSS3知識筆記2

新增H5與CSS3知識筆記2

CSS部分

CSS3屬性選擇器（類選擇器、屬性選擇器、僞類選擇器，權重都為10）

案例：僞元素字型圖示

繼續閱讀

magin 負值

【CSS3】設定超連結樣式超連結樣式

CSS顔色搭配（超級贊的幾個網站）ColorSpaceWebGradientsGRADIENT BUTTONSUigradientsCoolHue 2.0EggradientsGradientaMesh GradientCool BackgroundDuotones

分享幾個常用的css網站前言一、CSS 參考網站二、CSS 參考網站三、CSS集合，自由調節動畫參數，生成代碼片段：五、通過做飯，練習 CSS 選擇器六、送小青蛙回家，學習 flex 布局總結

HTML CSS 的滑鼠懸浮，點選的樣式當滑鼠懸浮時：a:hover當滑鼠點選連結時：a:active

推薦一些有用的網站一鍵分享制作網站小圖示插件網站seo 相關的網站地圖 api二維碼相關

H5測試點

談談css的僞類和僞元素

用 Canvas 編織璀璨星空圖

HTML5Canvas 酷炫效果

龍珠訓練營task04

十大酷炫屌的圖像懸停特效

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

vue3 transitionvue3 transition元件和vue2 transition元件

layui多任務上傳添加進度條