选择器总结

甦

于 2023-03-29 23:15:32 发布

阅读量452

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/2302_76714358/article/details/129845994

版权

文章详细介绍了CSS中的基本选择器，包括标签选择器、ID选择器、类选择器和通用选择器，以及它们的优先级。接着讲解了子代选择器、后代选择器和分组选择器的用法，展示了如何对元素进行精准定位和样式设置。此外，还探讨了属性选择器的各种匹配方式，如精确匹配、包含匹配等。最后，文章讨论了伪类选择器（如link、visited、hover、active）和伪元素选择器（如:before、:after）在动态效果和内容插入中的作用。

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

1.基本选择器

基本选择器包括4种，分别为标签选择器（由标签的名称获取）、ID选择器（获取的是ID属性）、类选择器（class属性）、通用选择器（通配符）

id的属性唯一，class不唯一

他们的优先级为ID>class>标签>通配符

1.1 标签选择器（由标签的名称获取）

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style>
div{
    color:blue;
}
</style>
</head>
<body>
<div>标签选择器</div>
<br>标签选择器
</body>
</html>

1.2 ID选择器(获取ID属性）

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style>
#one{color:red;}
#two{color:darkviolet;}
</style>
</head>
<body>
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
</body>
</html>

1.3 内选择器（class属性）

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style>
.one{color:rgb(206, 188, 188);}
.two{color:rgb(0, 211, 63);}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
</html>

1.4通用选择器（通配符）

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style>
*{
    color:rgb(255, 205, 214);
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
</html>

2 包含选择

子代选择器（获取的是某个标签的第一级子标签）

后代选择器（获取的某个标签里的所有子标签）

分组选择器（又称逗号选择器，可以同时设置多个标签，使用逗号进行分割）

2.1子代选择器（获取的是某个标签的第一级子标签）

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
div.list>ul{border: 1px solid rgb(78, 210, 52);}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div class="list">
<ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
</div>
</body>
</html>

2.2后代选择器（获取的某个标签里的所有子标签）

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
.list li{border: 1px solid rgb(78, 210, 52);}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div class="list">
<ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
</div>
</body>
</html>

2.3分组选择器（又称逗号选择器，可以同时设置多个标签，使用逗号进行分割）

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
.one,.two,#first{
color: green;
width: 200px;
height: 200px;
background: pink;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
<p id="first">3</p>
<div class="list">
<ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
</div>
</body>
</html>

3 属性选择器

选择选中的额标签中存在的某个属性

确切的等于某个值

属性值包含某个值

属性值以某个值开头

属性值以某个值结尾

表示下一个标签

属性等于某个属性值

3.1选择选中的额标签中存在的某个属性

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
    /*选择选中的额标签中存在的某个属性*/
div[title]{
border: 1px solid rgb(203, 44, 44);}</style>
<div class="container">
    这是一个div容器
    </div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" name="" id="" value="张三">
    <input type="email" name="" id="" value="李四">
    <input type="url" name="" id="" value="王五">
    <hr>
    <div class="msg">我喜欢打游戏</div>
    <p id="msg1" ">这是一个段落</p>
</body>
</html>

3.2确切的等于某个值

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*确切的等于某个值*/
input[type="text"]{
background: red;}
</style>
<div class="container">
    这是一个div容器
    </div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" name="" id="" value="张三">
    <input type="email" name="" id="" value="李四">
    <input type="url" name="" id="" value="王五">
    <hr>
    <div class="msg">我喜欢打游戏</div>
    <p id="msg1" ">这是一个段落</p>
</body>
</html>

3.3 属性值包含某个值

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
   /*属性值包含某个值*/
input[type *="e"]{
background: rgb(132, 76, 27);
}
</style>
<div class="container">
    这是一个div容器
    </div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" name="" id="" value="张三">
    <input type="email" name="" id="" value="李四">
    <input type="url" name="" id="" value="王五">
    <hr>
    <div class="msg">我喜欢打游戏</div>
    <p id="msg1" ">这是一个段落</p>
</body>
</html>

3.4属性值以某个值开头

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
   /*属性值以某个值开头*/
input[type ^="e"]{
background: rgb(15, 0, 128);
}
</style>
<div class="container">
    这是一个div容器
    </div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" name="" id="" value="张三">
    <input type="email" name="" id="" value="李四">
    <input type="url" name="" id="" value="王五">
    <hr>
    <div class="msg">我喜欢打游戏</div>
    <p id="msg1" ">这是一个段落</p>
</body>
</html>

3.5属性值以某个值结尾

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
   /*属性值以某个值结尾*/
input[type $="rl"]{
background: rgb(0, 255, 68);
}
</style>
<div class="container">
    这是一个div容器
    </div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" name="" id="" value="张三">
    <input type="email" name="" id="" value="李四">
    <input type="url" name="" id="" value="王五">
    <hr>
    <div class="msg">我喜欢打游戏</div>
    <p id="msg1" ">这是一个段落</p>
</body>
</html>

3.6表示下一个标签

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
   /*+表示下一个标签*/
.msg +p{
border: 5px solid rgb(0, 128, 9);
}
</style>
<div class="container">
    这是一个div容器
    </div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" name="" id="" value="张三">
    <input type="email" name="" id="" value="李四">
    <input type="url" name="" id="" value="王五">
    <hr>
    <div class="msg">我喜欢打游戏</div>
    <p id="msg1" ">这是一个段落</p>
</body>
</html>

3.7属性等于某个属性值

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
   /*属性等于某个属性值*/
[title="这是一个标题"]{
color: red;
}
</style>
<div class="container">
    这是一个div容器
    </div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" name="" id="" value="张三">
    <input type="email" name="" id="" value="李四">
    <input type="url" name="" id="" value="王五">
    <hr>
    <div class="msg">我喜欢打游戏</div>
    <p id="msg1" ">这是一个段落</p>
</body>
</html>

4 伪类选择器

同一个标签，根据不同的状态，有不同的样式，这就是伪类。有4种状态

:link------链接点击之前

:visited-----链接点击之后

:hover----“悬停”

:active-----"激活“鼠标点击时但不松手

这四种状态的顺序最好固定，以link、visited、hover、active进行排列

link------链接点击之前

visited-----链接点击之后

hover----“悬停”

active-----"激活“鼠标点击时但不松手

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/*点击之前的颜色*/
a:link{
color: red;
}
/*点击之后的颜色*/
a:visited{
color: green;
}
/*鼠标悬停的颜色*/
a:hover{
color: blue;
}
/*鼠标点击在上面但是不松手的时候*/
a:active{
color: pink;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/">点这里</a>
</body>
</html>

5 伪元素选择器

:before

:after

: :before

: :after

在使用伪元素选择器一定要加上content属性

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p::before{
content: "老鼠";
color: red;
}
p::after{
content: "大米";
color: green;
}
</style>
</head>
<body>
<p>爱</p>
</body>
</html

甦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择器总结

基本选择器包括4种，分别为标签选择器（由标签的名称获取）、ID选择器（获取的是ID属性）、类选择器（class属性）、通用选择器（通配符）同一个标签，根据不同的状态，有不同的样式，这就是伪类。:active-----"激活“鼠标点击时但不松手。子代选择器（获取的是某个标签的第一级子标签）后代选择器（获取的某个标签里的所有子标签）:visited-----链接点击之后。visited-----链接点击之后。:link------链接点击之前。link------链接点击之前。hover----“悬停”
复制链接

扫一扫