各种选择器-CSDN博客

本文链接：https://blog.csdn.net/2201_75643669/article/details/131865483

本文详细介绍了CSS中的基础选择器，包括标签选择器、ID选择器、类选择器和通配符选择器，并进一步探讨了包含选择器（子代与后代）、逗号选择器、属性选择器以及伪类和结构伪类选择器的用法。通过示例代码，展示了如何使用这些选择器来精准控制HTML元素的样式。

摘要由CSDN通过智能技术生成

1.基础选择器

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* (1) 标签选择器:选中当前页面中所有符合标签 */

h1 {

color: rgb(32, 27, 28);

}

/* (2) id选择器 #id*/

#box1 {

color: rgb(6, 106, 194);

}

/* (3) 类选择器 .类名 */

.box1 {

background-color: pink;

}

/* (4) 通配符选择器选中所有的元素*/

* {

font-size: 60px;

}

</style>

</head>

<body>

<div>我是一个不允许编辑的盒子</div>

<p>我是一段文字</p>

<div id="box1">我是一个不允许编辑的盒子</div>

<div class="box1">我是一个不允许编辑的盒子</div>

</body>

</html>

2.包含选择器

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* 子代选择器只选中亲生儿子 */

ul>li {

background-color: pink;

}

/* 后代选择器 */

/* css样式表存在层叠性，后边的会将前边的覆盖掉 */

ul li {

background-color: aqua;

}

ul div>li {

background-color: brown;

}

</style>

</head>

<body>

<ul>

<li>我是一个li</li>

<div>

</div>

</ul>

</body>

</html>

3.逗号选择器

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* div {

background-color: pink;

}

h1 {

background-color: pink;

}

p {

background-color: pink;

} */

/* 复合选择器 */

div,

h1 {

background-color: aqua;

}

</style>

</head>

<body>

<div>我是一个div</div>

</body>

</html>

4.属性选择器

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

input[type="text"] {

background-color: pink;

}

input[type="password"] {

background-color: aqua;

}

input[name] {

background-color: red;

}

/* *type的属性值里包含e的input元素

input[type*="e"] {

background-color: blueviolet;

}

input[type^="p"] {

background-color: chartreuse;

}

input[type$="l"] {

background-color: red;

}

</style>

</head>

<body>

</form>

</body>

</html>

5.伪类选择器

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* a:link 、a:visited 、a:hover 、a:active */

/* 伪类选择器：元素在不同状态下的样式 */

/* ：link 为访问的来凝结样式 */

a:link {

color: green;

}

/* 访问之后的样式 */

a:visited {

color: red;

}

/* 获取焦点时的样式 */

a:focus {

color: blue;

}

/* 鼠标悬停时的样式 */

+表示下一个

~表示之后所有的兄弟元素 */

a:hover+div {

color: pink;

}

/* active 用户点击之后按住鼠标 */

a:active {

background-color: pink;

}

div:hover {

background-color: pink;

}

</style>

</head>

<body>

<a href="#">点击我去百度

</a>

<div>我是一个div</div>

</body>

</html>

6.结构伪类选择器

(1)

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

ul li:nth-child(9) {

background-color: pink;

}

ul li:last-child {

background-color: red;

}

ul li:first-child {

background-color: aqua;

}

ul li:nth-child(2n+1) {

background-color: blue;

}

ul li:nth-child(2n) {

background-color: rgb(33, 227, 124);

}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

(2)

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* 先找.father，然后对所有的子元素进行排序，找到对应序号的子元素，然后再去看子元素是否满足条件（.son） */

.father .son:nth-child(2) {

background-color: pink;

}

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

.father .son:nth-of-type(2) {

background-color: aqua;

}

</style>

</head>

<body>

<p>nihao</p>1

<div class="son">我是盒子</div>2

<div class="son">我是盒子</div>3

<div class="son">我是盒子</div>4

<div class="son">我是盒子</div>5

</div>

</body>

</html>

7.伪元素选择器

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

p::before {

content: "##3#";

color: pink;

}

p::after {

content: "and you";

color: red;

}

input::placeholder {

color: pink;

}

div::selection {

color: aqua;

}

</style>

</head>

<body>

<div>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam porro libero voluptatum consectetur

doloremque corrupti pariatur assumenda perspiciatis facere impedit, cum, autem voluptas repellendus provident

eius et ipsum ratione laudantium!

Corporis dicta repellat deleniti itaque blanditiis illo ipsum sed, libero quis vero, praesentium architecto hic

dolores debitis! Incidunt fugiat sed fugit aliquid officiis fuga quo sequi rerum, voluptas qui quia!

Iste consectetur corrupti sunt totam dolores quae provident dignissimos ipsum, odio maiores atque. Provident sit

maxime quidem fugiat eius illo corrupti, deserunt itaque accusantium. Consequatur quisquam distinctio architecto

suscipit vel.

Sit similique nisi pariatur molestiae obcaecati non voluptate sint. Iure veniam, ab praesentium, accusantium

quae eligendi reiciendis ipsa ad nihil atque obcaecati aut repellendus porro optio eaque itaque non

necessitatibus!

Vitae facere accusantium magnam, vero architecto dolore deleniti nobis quis, recusandae, officiis culpa magni ut

distinctio delectus odio obcaecati aspernatur! Qui optio placeat tempora recusandae explicabo aut earum

repellendus adipisci.

Quam magnam unde aperiam aliquam ut molestiae est nobis odio. Deserunt odit numquam atque modi facere

dignissimos laborum commodi architecto incidunt, officia, eveniet autem provident nesciunt et corporis quasi

ipsa!

Quaerat quod sint ea nostrum voluptas repellendus, assumenda minima numquam perferendis vel officiis dolorem

beatae nemo cum quae autem. Velit asperiores natus dolorem, et libero praesentium modi provident numquam

exercitationem.

Optio tempora fugiat eveniet debitis! Est unde blanditiis totam ullam quia debitis explicabo sit eaque quaerat,

minus molestiae. Libero quo consequatur doloribus pariatur aut impedit ullam fugiat aliquid! Libero, incidunt.

Laborum consectetur illo esse quasi voluptatem dolorum delectus eveniet. Eius nostrum non quia accusantium nam

tempore culpa praesentium iure cumque tempora id possimus, expedita ea in quod quae odit voluptatibus?

Laborum, a odit! Quibusdam suscipit neque architecto esse voluptate! Cupiditate, illum accusantium ipsam impedit

suscipit exercitationem odit repudiandae repellat, voluptatibus fugiat repellendus porro tempora? Nihil et nulla

minus reprehenderit iusto.]

</div>

</body>

</html>