css3选择器

# 属性选择器

# 概述

ie9+才支持,权重为10

# 属性选择器

选择符	简介
E[type]	选择E元素属性里有type属性
E[type="text"]	选择E元素里type=text属性
E[att^="text"]	选择E元素里的type=text开头的属性
E[att$="text"]	选择E元素里的type=text结尾的属性
E[att*="text"]	选择E元素里所有type=text的属性

# Demo演示

<html>
    <input type="text">
    <input type="text" value="请输入用户名">
    <input type="password" placeholder="请输入密码">
    <!-- 某属性开头-->
    <div class="icon1">1</div>
    <div class="icon2">2</div>
    <div class="icon3">3</div>
    <div class="icon4">4</div>
    <!--  某属性结尾-->
    <div class="ico1-data">安琪拉</div>
    <div class="ico2-data">孙悟空</div>
    <div class="icon3-ico">瑶</div>
</html>
<style>
    input {
        display: block;
    }
    /*选择input具有value属性的*/
    input[value] {
        color: red;
    }
    /*选择input具有type属性并且属性值为password*/
    input[type="password"] {
        color: blue;
    }

    div[class^="icon"] {
        width: 200px;
        color: #fff;
        background-color: #146c43;
    }

    div[class$="data"] {
        font-size: 18px;
    }
    
    div[class*="i"]

    /*Chrome、Safari等 webkit内核浏览器*/
    /*::-webkit-input-placeholder{*/
    /*    color:red;*/
    /*}*/

    /*Firefox*/
    /*::-moz-placeholder{*/
    /*    color:red;*/
    /*}*/

    /*IE、Edge等 Trident 内核浏览器*/
    /*:-ms-input-placeholder{*/
    /*    color:red;*/
    /*}*/
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

# 结构伪类选择器

选择符	简介
E:first-child	匹配父里的第一个子元素
E:last-child	匹配父里的最后一个子元素
E:nth-child(n)	匹配父元素里的第n个子元素
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type	指定类型E的最第n个

注意

n的写法

功能	公式
偶数	2n、even
奇数	2n + 1、2n - 1 、odd
前5个	—n + 5
第五个后	n + 5

::: note 结构伪类易错点 :::

<ul>
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
</ul>
<style>
    /* 错误写法 */
    li a:first-child {
        background-color: red;
    }
    /*正确写法*/
    li:last-child a{
        background-color: #146c43;
    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注意

:nth-child 直接在所有孩子中找个数
:nth-of-type 先通过类型找到符合的一堆元素，然后在一堆元素中找个数

# 伪类选择器

# 概述

一般网页中的非主体内容

# 区别

元素：HTML设置标签
伪元素：由css模拟出效果

注意

必须设置content属性
行内元素

伪元素	作用
::before	在父元素内容前面添加一个伪元素
::after	在父元素内容后面添加一个伪元素

上次更新: 2023/01/29, 11:01:00

← 百分比布局 css3盒子模型 →