css選擇器

時間 2019-11-20

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

1.通用選擇器：「*」；css

2.元素選擇器html

3.id選擇器：前面加一個#號一個元素只能有一個id，多個元素能夠共用一個類，一個元素能夠應用兩個類css3

4.類選擇器：前面加符號.htm

①給一個元素加上多個類名blog

②指定某一特定的類ip

5.屬性選擇器字符串

E[att]：選擇具備att屬性的E元素。須要選擇有某個屬性的元素，而不論屬性值是什麼，能夠使用簡單屬性選擇器。input

例如：it

input[value]{background:green;}

能夠根據多個屬性進行選擇，只需將屬性選擇器連接在一塊兒便可class

例如：

input[style][value]{background:green;}

E[att="val"]：選擇具備att屬性且屬性值等於val的E元素。進一步縮小選擇範圍，（只選擇有特定屬性值的元素。）

例如：

input[value="vip2"]{background:red;}

E[att~="val"]：選擇具備att屬性且屬性值有多個，其中一個的值等於val的E元素。

例如：

input[style~='15px']{background:red;}//我試了無論用

E[att|="val"]：選擇具備att屬性且屬性值爲以val開頭並用鏈接符"-"分隔的字符串的E元素。

例如：

p[lang|='en']{color:red;}

css3新增：

E[att`="val"]：選擇具備att屬性且屬性值爲以val開頭的字符串的E元素。

例如：

input[value^="vip"]{color:green;}

a[href^="http"]{color:green;}

E[att$="val"]：選擇具備att屬性且屬性值爲以val結尾的字符串的E元素。

例如：

a[href$="cn"]{color:red;}

E[att*="val"]：選擇具備att屬性值且屬性值包含val的字符串的E元素。

例如：

a[href*="xxx"]{color:yellow;}

test1:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Test1</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style type="text/css">
    </style>
</head>
<body>
    <input type="text" value="住址" style="padding:10px 20px 30px"><br><br>
    <input type="text" value="姓名" style="padding:15px 25px 35px"><br><br>
    <input type="tel"><br><br>
    <input type="button" value="vip2"><br><br>
    <input type="button" value="vip3"><br><br>
    <input type="button" value="vip4"><br><br>
    <a href="http://www.baidu.com">百度</a><br><br>
    <a href="http://www.xxx.cn">xxx</a><br><br>
    <p lang="en-us">HTML5</p>
</body>
</html>

style.css：

/*input[style][value]{background:green;}*/
/*input[value="vip2"]{background:red;}*/

input[style~='15px']{background:red;}
p[lang|='en']{color:red;}

input[value^="vip"]{color:green;}
a[href^="http"]{color:green;}
a[href$="cn"]{color:red;}
a[href*="xxx"]{color:yellow;}

6.關係選擇器

後代選擇器（包含選擇器）ul li{}:後代選擇器又稱爲包含選擇器。後代選擇器能夠選擇做爲某元素後代的元素。

例如：

ul li{color:red;border:1px solid;}
div p{color:green;}

子元素選擇器ul>li：與後代選擇器相比，子元素選擇器只能選擇做爲元素子元素的元素，縮小了選擇範圍。

例如：

ul>li{border:1px solid;color:red;}

相鄰選擇符：E+F:選擇緊貼在E元素以後F元素。

例如：

h2+p{color:green;}

CSS3新增：

兄弟選擇器E~F：選擇E元素全部兄弟元素F。（只能夠選擇到以後的元素）

例如：

h2~p{color:green;}

test2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style2.css" type="text/css">
</head>
<body>
    <ul>
        <li>我是ul的子元素1
            <ol>
                <li>我是ul的孫元素1</li>
                <li>我是ul的孫元素2</li>
                <li>我是ul的孫元素3</li>
                <li>我是ul的孫元素4</li>
                <li>我是ul的孫元素5</li>
            </ol>
        </li>
        <li>我是ul的子元素2</li>
        <li>我是ul的子元素3</li>
        <li>我是ul的子元素4</li>
    </ul><hr>
    <div>
        <h2>我是標題1</h2>
        <p>我是段落p1</p>
        <p>我是段落p2</p>
        <p>我是段落p3</p>
        <p>我是段落p4</p>
        <h3>我是標題2</h3>
        <p>我是段落p5</p>
        <p>我是段落p6</p>
        <p>我是段落p7</p>
        <p>我是段落p8</p>
    </div>
</body>
</html>

style2.css:

/*ul li{color:red;border:1px solid;}*/
/*div p{color:green;}*/

/*ul>li{border:1px solid;color:red;}*/
/*h2+p{color:green;}*/

h2~p{color:green;}
div,ul{color:red;}//並列關係

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。