CSS选择器详解：基础到高级应用-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_75254642/article/details/131871855

一、基础选择器

结构： 标签名{css属性名：属性值}

作用：通过标签名，找到页面中所有的这类标签，设置样式

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./13-基础选择器.css">
</head>
<body>
    <div>我是一个不允许编辑的盒子</div>
    <p class="box1">我是一段文字</p>
    <h1>我是标题</h1>
    <div id="box1">我是一个不允许编辑的盒子</div>
    <div class="box1">我是一个不允许编辑的盒子</div>
</body>
</html>

/* 标签选择器：选中当前页面所有符合标签 */
h1{
    color: pink;
}
/* id选择器     #id*/
#box1{
    color: blue;
}
/* 类选择器     .类名 */
.box1{
    background-color: aqua;
}
/* 通配符选择器     选中所有的元素 */
*{
    font-size: large;
}

结果

二、包含选择器

包含选择器共有五种，其中有子代选择器，后代选择器，分组选择器，相邻兄弟选择器和通用兄弟选择器。

1.子代选择器：获取某个标签的第一级子标签，格式指定元素>子元素{属性名称：属性值；}

2.后代选择器：后代选择器匹配属于指定元素后代的所有元素。

3.分组选择器：又叫做逗号选择器，可以设置多个标签用逗号进行分割。

4.相邻兄弟选择器：相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。格式指定元素+同级元素{属性名称：属性值}。

5.通用兄弟选择器：通用兄弟选择器匹配属于指定元素的同级元素的所有元素。格式指定元素~同级元素{属性名称：属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./15-包含选择器.css">
</head>
<body>
    <ul>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <div>
            <li>我是孙子</li>
            <li>我是孙子</li>
            <li>我是孙子</li>
        </div>

    </ul>
</body>
</html>

/* 子代选择器 */
ul>li{
    background-color: violet;
}
/* 后代选择器 */
/* css样式表存在重叠性，后边的覆盖前边的 */
ul li{
    background-color: aqua;
}

三、逗号选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./17-逗号选择器.css">
</head>
<body>
    <div>我是一个div</div>
    <p>我是小p</p>
    <h1>我是标题</h1>
</body>
</html>

/* 逗号选择器 */
div,p,h1{
    background-color: pink;
}

四、属性选择器

根据属性或属性值来选取元素，有以下形式：

表示方法	描述
[属性名称]	选择标签中的某个值
[属性名称=“属性值”]	确切的等于某个值
[属性名称*=“属性值中的某一个字母]	选择属性中包含这个字母的值
[属性名称^="属性值”]	属性中的值以该值开始
[属性名称$="属性值"]	属性中的值以该值结束
属性值+标签	表示下一个标签
[属性名称\|=“属性值”]	用于选取带有以指定值开头的属性值的元素，且该值必须是整个单词
[属性名称~=“属性值”]	用于选取属性值中包含指定词汇的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./19-属性选择器.css">
</head>
<body>
    <form action="#">
        姓名：<input type="text" name="user" id="xingming">
        密码：<input type="password" name="password" id="mima">
        邮件：<input type="email" name="邮件" id="youjian">
        <input type="number">
    </form>
</body>
</html>

/* 属性选择器 */
input[type="text"]{
    background-color: rgb(225, 37, 37);
}
input[type="password"]{
    background-color: springgreen;
}
input[id="youjian"]{
    background-color: blue;
}
/* *type的属性值里包含e的input元素 */
input[type*="e"]{
    background-color: aqua;
}
/* ^type的属性值里以p开头的input元素 */
input[type^="p"]{
    background-color: brown;
}
/* $type的属性值以d结尾的input元素 */
input[type$="d"]{
    background-color: blanchedalmond;
}

五、伪类选择器

伪类，同一个标签在不同的状态下有不同的样式，伪类通过冒号表示，最早的时候用来渲染a标签不同状态下的不同样式。

样式	描述
：link	超链接点击之前
：visited	超链接被访问之后
：hover	鼠标悬停在超链接时
：active	超链接激活（鼠标点击但是不松手时）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./21-伪类选择器.css">
</head>
<body>
    <a href="#">点击我</a>
    <div>我是一个div</div>
</body>
</html>

/* 伪类选择器：元素在不同状态下的样式 */
/* :link 未访问的链接样式 */
a:link{
    color: green;
}
/* :hover   鼠标悬停时的样式 */
/* +表示下一个
    ~表示之后所有的兄的元素 */
a:hover+div{
    color: palegoldenrod;
}
/* :visited     访问之后的样式 */
a:visited{
    color: brown;
}
/* 获取焦点时的样式 */
a:focus{
    color: blue;                
}
/* 活跃状态下的样式 */
a:active{
    background-color: aqua;
}

六、结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./23-结构伪类选择器.css">
</head>
<body>
    <ul>
        <li>我是一个li1</li>
        <li>我是一个li2</li>
        <li>我是一个li3</li>
        <li>我是一个li4</li>
        <li>我是一个li5</li>
        <li>我是一个li6</li>
        <li>我是一个li7</li>
        <li>我是一个li8</li>
        <li>我是一个li9</li>
        <li>我是一个li10</li>
    </ul>
    <div class="father">
        <p>nihao</p>1
        <div class="son">我是一个盒子</div>2
        <div class="son">我是一个盒子</div>3
        <div class="son">我是一个不允许编辑的盒子</div>4
        <div class="son">我是一个div</div>5
    </div>
</body>
</html>

ul li:nth-child(7){
    background-color: pink;
}
/* 最后一个元素样式 */
ul li:last-child{
    background-color: brown;
}
ul li:first-child{
    background-color: blue;
}
/* 奇数元素样式 */
ul li:nth-child(2n+1){
    background-color: aqua;
}
/* 先找.father,然后对所有的子元素进行排序，再找到对应序号的子元素 */
.father .son:nth-child(2){
    background-color: pink;
}


/* 先找.father,再找>father里的.son,然后对.son进行排序 */

.father .son:nth-of-type(2){
    background-color: aqua;
}

七、伪元素选择器

选择器	例子	例子描述
::after	p::after	在每个 <p> 元素之后插入内容
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行
::selection	p::selection	选择用户选择的元素部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./27-伪元素选择器.css">
</head>
<body>
    <p>我叫小王</p>
    <p>我叫小王</p>
    <p>我叫小王</p>
    <p>我叫小王</p>
    <input type="text" placeholder="请输入用户名">
    <div>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo incidunt fuga ea error minus aliquam praesentium, modi id quis ad maiores? Exercitationem at corporis dignissimos voluptate odio delectus doloremque pariatur?
        Culpa nostrum commodi tempora eos voluptates enim consequuntur alias incidunt! Ipsa, beatae corporis repellat error veritatis quaerat, iusto labore voluptatum, atque at doloribus laborum? Asperiores porro exercitationem nihil non voluptatem!
        A incidunt sed quibusdam delectus nulla exercitationem consectetur iure adipisci nesciunt numquam cum totam facilis officia distinctio nisi atque optio, ea hic quae. Suscipit quas consequatur nam quaerat dolores vero.
        Et illum, debitis ipsam sequi veritatis cumque optio minima vero ad ullam suscipit quam alias praesentium aspernatur facilis, corporis tenetur! Impedit sed eos ipsa reiciendis facere, debitis aut similique mollitia?
        Dolor nisi ipsa eos officiis est itaque ea odit necessitatibus, reiciendis consectetur nobis voluptate pariatur consequatur, atque perspiciatis. Explicabo, harum. Ad voluptatum ut molestiae? Ducimus nisi hic quibusdam illo maiores!
        Voluptas ea soluta optio labore saepe. Optio ipsum ad veniam quaerat? Quasi iste, deleniti, dignissimos odio sunt, facilis laboriosam libero similique adipisci porro voluptatem reprehenderit at quae aliquid expedita ab?
        Veritatis optio praesentium voluptates illum blanditiis quia quas autem? Impedit, iure. Pariatur ut perferendis tempore praesentium necessitatibus consectetur odio impedit aliquam! Architecto quidem amet vero similique aspernatur ullam corporis modi?
        Dolor a amet soluta praesentium deleniti harum eum explicabo tempore aliquam eos sed dolores distinctio voluptatibus earum, quidem totam nisi ducimus minus expedita quas magni! Non temporibus neque eaque sequi!
        Corrupti debitis dignissimos beatae dolore adipisci amet, error magnam eos quod voluptates nobis maxime nihil numquam ab voluptate ipsum sit reiciendis distinctio repellat. Corporis deleniti modi molestiae doloribus neque saepe?
        Eveniet illo quas ea hic aspernatur labore inventore, id in voluptates! Quod assumenda ex fugiat esse, voluptates iusto voluptas totam sit architecto consectetur corrupti iure fuga blanditiis quisquam accusantium cumque.
        
    </div>
</body>
</html>

p::before{
    content: "##3#";
    color: pink;
}
p::after{
    content:"and you";
    color: pink;
}
input::placeholder{
    color: red;
}
div::selection{
    color: red;
}

八、作业

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="./29-作业.css">

</head>

<body>
    <div class="container">
        <h1>主标题</h1>
        <ul class="list">
            <li>项目1</li>
            <li>项目2</li>
            <li>项目3</li>
        </ul>
        <p class="text">这是一个段落。</p>
        <div class="box">盒子1</div>
        <div class="box">盒子2</div>
    </div>
    <p class="text">另一个在容器外的段落。</p>
</body>

</html>

<!-- 用外部样式 -->
<!-- 选取主标题（<h1>）将颜色改成粉色。
    选取所有列表项（<li>）。
        选取第一个列表项。背景颜色改为红
        选取最后一个列表项。背景颜色改为绿
        选取容器内带有"class"为"text"的段落。
        选取容器内的第一个盒子。
        选取所有带有"class"为"text"的元素（无论其在容器内还是容器外）。 -->

<!-- 2、整理css选择器的一篇博客，将代码附带上
3、表单练习

-->

h1{
    color: pink;
}
ul li:first-child{
    color: red;
}
ul li:last-child{
    color: chartreuse;
}
.container .text{ 
    color: rgb(181, 111, 243);
}
.container .box:nth-of-type(1){
    color: rgb(0, 0, 255);
}

 

p[class="text"] {
    color: rgb(127, 255, 204);
}

九、表单练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <p>
            <h1 align="center">用户注册</h1>
        </p>
        <p align="center">
            用户名：<input type="text" name="userName">
        </p>
        <p align="center">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" value="小王" disabled>
        </p>
        <p align="center">
            密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="password">
        </p>
            <p align="center">
                性别：<input type="radio" name="r1" value="女">女
                <input type="radio" name="r1" value="男">男
            </p>
            <p align="center">
                爱好：<input type="checkbox" name="r2" value="唱">唱
                <input type="checkbox" name="r3" value="跳">跳
                <input type="checkbox" name="r4" value="rap">rap
                <input type="checkbox" name="r5" value="篮球">篮球
            </p>
            <p align="center">
                邮箱：<input type="email" placeholder="请输入你的邮箱" name="邮箱">
            </p>
            <p align="center">
                用户头像<input type="file" name="文件" id="">
            </p>
            <p align="center">
                家庭住址：<select name="家庭住址" id="">
                <option value="">请选择你的住址</option>
                <option value="成都">成都</option>
                <option value="广安">广安</option>
                <option value="广州">广州</option>
                <option value="重庆">重庆</option>
                </select>
            </p>
            <p align="center">
                收货地址：<select name="收货地址" id="">
                <option value="">请选择你的收货地址</option>
                <option value="成都">成都</option>
                <option value="广安">广安</option>
                <option value="广州">广州</option>
                <option value="重庆">重庆</option>
                </select>
            </p>
            <p align="center">
                建议或意见：<textarea name="意见" id="意见" cols="30" rows="2" maxlength="50">你的建议或意见
                </textarea>
            </p>
            <p align="center">
                选择你喜欢的颜色：<input type="color" name="颜色" id="">
                注册时间：<input type="date" name="注册时间" id="">
            </p>

<p align="center">
    <button>注册</button>
    <button>重置</button>
</p>      
    </form>
</body>
</html>

十、images练习

十一、表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1px" cellspacing="0" width="600px" height="200px">
        <tr bgcolor="pink" align="center">
            <td colspan="5" height="25px">个人简历</td>
        </tr>

        <tr>
            <td width="120px" height="40px" align="center">姓名：</td>
            <td width="120px" height="40px"></td>
            <td align="center">性别：</td>
            <td width="120px" height="40px"></td>
            <td rowspan="4" align="center" width="120px">照片</td>
        </tr>
        
        <tr>
            <td align="center">婚姻状况：</td>
            <td></td>
            <td align="center">出生年月：</td>
            <td></td>
        </tr>

        <tr>
            <td align="center">民族：</td>
            <td></td>
            <td align="center">政治面貌：</td>
            <td></td>
        </tr>

        <tr>
            <td align="center">身高：</td>
            <td></td>
            <td align="center">学历：</td>
            <td></td>
            
        </tr>
    </table>
</body>
</html>

十二、伪类选择器练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./25-伪类选择器练习.css">
</head>
<body>
    <h1>Welcome to Pseudo-class Selector Practdice</h1>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</body>
</html>

<!-- 将所有链接的文本颜色设置为蓝色。
    当鼠标悬停在链接上时，将文本颜色设置为红
    当链接被点击时（活动状态），将文本颜色设置为绿色
    将第一个链接的文本颜色设置为紫色 -->

ul li a{
    color: blue;
}
ul li a:hover{
    color: brown;
}
ul li a:active{
    color: chartreuse;
}
ul li:nth-child(1) a{
    color: blueviolet;
}

css-选择器