CSS选择器

最新推荐文章于 2024-10-13 19:30:05 发布

Lh_13%

最新推荐文章于 2024-10-13 19:30:05 发布

阅读量192

点赞数

分类专栏：前端文章标签： css css3 前端

本文链接：https://blog.csdn.net/LongHongYu908/article/details/121334150

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的选择器，包括基本选择器（如标签、ID、类和通配符）、包含选择器、属性选择器，以及伪类选择器（如：link、visited、hover、active和:focus）的用法。通过实例演示了如何运用这些选择器来精确控制网页元素的样式。

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

1基本选择器

1.1 、标签选择器

1.2 、 ID 选择器

1.3 、类选择器

1.4 、通用选择器（通配符选择器）

注：基本选择器的优先关系为 id > 类 > 标签 > 通配符

 <!DOCTYPE html> 
  <html lang="en"> 
 <head>
   <meta charset="UTF-8"> 
 <title>选择器</title> 
<style type="text/css">
    /*注释 标签选择器*/ 
    h2{ color: red; }
    /*id选择器*/ 
    #one{color: blue; }
    /*类选择器*/ 
   .two{color: green; }
    /*通配符选择器*/
   *{color: yellow; } 
 </style> 
   </head>

2.包含选择器

1. 子代选择器 ------ 获取的某个标签的第一级子标签

2. 后代选择器 ----- 获取某个标签内的所有子标签

3. 分组选择器（也叫做逗号选择器，可以给多个标签加上样式，通过，隔开）

<!DOCTYPE html> 
<html lang="en"> 
<head>
<meta charset="UTF-8"> 
<title>选择器优先级</title> 
<style type="text/css"> 
/* 子代选择器 */ 
/* .list>ul{ color: green; }
*/ /* 后代选择器 */ /* 
.list li{ color: red; }
*/ /* 分组选择器 */
 h2,.list,#list{ color: blue; }
 </style> 
</head>

3.属性选择器

<!DOCTYPE html> 
<html lang="en"> 
<head>
<meta charset="UTF-8"> 
<title>属性选择器</title> 
<style type="text/css">
  div[title]{ color: red; }
input[type="text"]{ background: pink; }
input[type*="e"]{ background: red; }
input[type^="e"]{ background: green; }
input[type$="rl"]{ background: blue; }
.msg + { color: red; }
 [title="这是一个标题"]{ color: yellow; }
 </style> 
</head> 
<body>
<div title="one">
这是一个div</div>
 <p class="two">这是一个段落</p> 
<input type="text" id="" class="" value="张三">
 <input type="url" id="" class="" value="李四"> 
<input type="email" id="" class="" value="王五"> 
<div class="msg">这是第二个div</div>
 <div title="这是一个标题">这是第三个div</div> 
<p id="msg1">这是第二个段落</p> 
</body> 
</html>

4.伪类选择器

4.1解释

同一个标签，根据不同的状态，有不同的样式，这就叫做伪类，使用的是冒号:表示的

4.2

:link -------- 超链接点击之前的样式

:visited -------- 链接被访问之后

:hover ------ 悬停，鼠标放到标签上的样式

:active -------- 被激活的时候，鼠标点击的时候，但是不松手的时候

:focus -------- 某个标签获得焦点的时候

注:顺序是一定的，不可以改变，他们的顺序 :link :visited :hover :active

<!DOCTYPE html> 
<html lang="en"> 
<head>
<meta charset="UTF-8"> 
<title>伪类选择器</title> 
<style type="text/css"> 
a:link{ color: red; }
a:visited{ color: green; }
a:hover{ color: pink; }
a:active{ color: orange; } 
</style> 
</head> 
<body>
<a href="https://www.baidu.com/">点击我</a> 
</body>
 </html>

5.伪元素选择器

:after ------- CSS2 提供

:before

::after ----- CSS3 提供

::before

注：如果要使用before和after，一定要加上content（内容）属性

<!DOCTYPE html> 
<html lang="en"> 
<head>
<meta charset="UTF-8"> 
<title>伪元素选择器</title> 
<style type="text/css"> 
p::before{content: "zhangsan"; color: red; }
p::after{ content: "lisi"; } </style>
 </head> 
<body>
    <p>这是一个段落</p> </body> </html>