前端开发之选择器

时间：2024-07-17 07:24:25

目录

一、基本选择器

1、元素选择器

2、属性选择器

3、id选择器

4、特例:结合选择器

5、包含选择器

6、子选择权

7、兄弟选择器

8、选择器组合

二、伪元素选择器

1、首字母伪元素选择

2、首行元素选择器

3、前插伪元素选择器

4、后插伪元素选择器

三、伪类选择器

1、结构性伪类选择器

2、UI状态伪类选择器

3、排除伪类选择器

一、基本选择器

1、元素选择器

div{
    color: red;
    background:pink;
}
用元素标签名称做选择
*{    
    color: red;
    background:pink;
}
直接选择全部元素

2、属性选择器

div[id]{    有元素id的div元素全部选中
    color: red;
    background:pink;
}
div[id=xx]{    id是xx的div元素全部选中
    color: red;
    background:pink;
}
div[id$=xx]{    id以xx结尾的div元素全部选中
    color: red;
    background:pink;
}
div[id^=xx]{  id以xx开头的div元素全部选中
    color: red;
    background:pink;
}
div[id*=xx]{   id包含xx的div元素全部选中
    color: red;
    background:pink;
}

3、id选择器

#xx{      id属性为xx的元素全部选中，面向所有元素，并不局限于div元素,
                    比如<div id="xx"></div>  或<p id="xx"></p>
    color: red;
    background:pink;
}
.xx{      class属性为xx的元素全部选中，面向所有元素，并不局限于div元素，比如<div class="xx"></div>
    color: red;
    background:pink;
}

4、特例:结合选择器

h4.xx{       h4.xx之间不可有空格
    color: red;
    background:pink;
}

5、包含选择器

div p{      在div内部找p标签，中间用空格隔开，符合条件的被选中
    color: red;
    background:pink;
}
#father p{       在id为father的标签内部找p标签，符合条件的被选中
    color: red;
    background:pink;
}

包含选择器只强调包含在其内部，不论包含几级均可被选中

6、子选择权

形式如：selector1>seloctor2

必须是父子关系，selector1内部一级包含selector2才可被选中

7、兄弟选择器

形式如：selector1~seloctor2

.php~.java{
    color: red;
    background:pink;
}

8、选择器组合

div,h3,p,span{    同时选中标签为div,h3,p,span的元素
    color: red;
    background:pink;
}

二、伪元素选择器

1、首字母伪元素选择

使用前提必须是块级元素

.zzz::first_letter {
    color:green;
    background:blue;
}

2、首行元素选择器

使用前提必须是块级元素

.zzz::first_line {
    color:green;
    background:blue;
}

3、前插伪元素选择器

使用前提必须有content元素才可以使用

content元素不仅可以插入并显示文本，还可以插入并显示图片

#zzz::before {
    content: "666";

    color:green;
    background:blue;
}
#zzz::before {
    content:url(tupian.png);   前插并显示图片
    width:20px;
    height:30px;
    color:green;
    background:blue;
}

4、后插伪元素选择器

使用前提必须有content元素才可以使用

content元素不仅可以插入并显示文本，还可以插入并显示图片

#zzz::after {
    content: "666";
    color:green;
    background:blue;
}

三、伪类选择器

1、结构性伪类选择器

      <ul>
            <li>first1</li>
            <li>first2</li>
            <li>first3</li>
        </ul>
        <ul>
            <li>first4</li>
            <li>first5</li>
            <li>first6</li>
        </ul>

index.css

ul li:nth-child(3){
    color: pink;
    background: orange;
}

:nth-child()正位置计数，括号内直接放数字，从1开始，代表元素顺序位置;括号内可以放两个预定义值odd(奇数) even( 偶数);括号内可以存放表达式，比如: 3n+1

:nth-1ast-child()倒位置计数括号内直接放数字，从1开始，代表元素顺序位置;括号内可以放两个预定义值odd(奇数) even( 偶数) ;括号内可以存放表达式，比如: 3n+1

:first-child等价与 :nth-child(1)

:last-child等价与 :nth-last-child(1)

2、UI状态伪类选择器

:hover悬停状态基本所有元素可以使用

:foucs焦点状态输入框元素等可以使用

3、排除伪类选择器

:not() 排除元素，若需排除多个元素，连续书写即可

相关文章