1. 程式人生 > 其它 >學習CSS的第5天

學習CSS的第5天

技術標籤:css

H5新增input表單、表單屬性(12分鐘視訊學習)

屬性描述
requiredrequired必填
placeholderplaceholder佔位符,如下圖灰色的字在這裡插入圖片描述
autofocusautofocus自動定位游標
autocompleteon/off自動填充/不填充
multiplemultiple可以多選檔案提交

案例如下

<head>
    <meta charest="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
>
<meta http-equiv="X-UA -Compatible" content="ie-edge"> <title>Document</title> </head> <body> <form action=""> 使用者名稱: <input type="text" required="required" placeholder="請輸入使用者名稱"
autofocus="autofocus" name=username autocomplete="on">
<input type="submit" value="提交"> 上傳頭像: <input type=file name="" id="" multiple="multiple"> </form> </body>

在這裡插入圖片描述

CSS3屬性選擇器(11分鐘視訊學習)

標籤選擇器權重是1

屬性選擇器、類選擇器、偽類選擇器權重均為10
屬性選擇器=標籤[屬性],如:button[diasbled]

案例如下

<head>
    <meta charest="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA -Compatible" content="ie-edge">
    <title>Document</title>
</head>
<style>
    button {
        cursor: pointer;
    }
    
    button[disabled] {
        cursor: default;
    }
</style>

<body>
    <button>按鈕</button>
    <button>按鈕</button>
    <button disabled="disabled">按鈕</button>
    <button>按鈕</button>

</body>

在這裡插入圖片描述