CSS选择器

最新推荐文章于 2025-01-14 11:29:59 发布

鱼神机

最新推荐文章于 2025-01-14 11:29:59 发布

阅读量266

点赞数 2

文章标签： html 前端 css

本文链接：https://blog.csdn.net/yujiaozhu666/article/details/121398050

版权

选择器是建立在引入方式下对HTML的内容进行选中，以用于编写样式的手段（工具）。

1.基本选择器：

（1）标签选择器

（2）ID选择器

（3）类选择器

（4)通用选择器

eg：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="GBK"
        <title>123</title>
<style>
     /*注释 标签选择器*/
     p{
       color:red;
       }
     /*id选择器*/
     #one{
          color:yellow;
          }
     /*类选择器*/
     .two{
          color:pink;
          }
     /*通配符选择器*/
     *{
       color:blue;
       }


</head>
<body>
<P>标签选择器</p>
<div id="one">id选择器</div>
<span class="two">类选择器</span>



</body>
</html>

注意：1.基本选择器的优先级为：ID选择器>类选择器>标签选择器>通用选择器

2.基本选择器是选择器的基理。

2.包含选择器

（1）子代选择器：可选取一个标签的第一级子标签。用于对多个第一级子标签统一编写样式。

（2）后代选择器：可选取一个标签的所有子标签。

（3）分组选择器（逗号选择器）：可以同时选中多个标签，用于对多个标签编写相同样式。标签之间用逗号隔开。

eg:

<!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> 
<body>
   <h2>这是一个标签</h2> 
   <p id="list">这是一个段落</p> 
   <div class="list"> 
       <ul><li>这是列表1</li> 
           <li>这是列表2</li> 
           <li>这是列表3</li> 
           <li>这是列表4</li> 
           <li>这是列表5</li> 
       </ul> 
           <li>这是列表6</li> 
           <li>这是列表7</li> 
           <li>这是列表8</li> 
           <li>这是列表9</li> 
    </div>
</body>
</html>

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.伪类选择器：

根据目标不同状态，可以对其进行编写不同的样式。注意：此选择器一般用于a标签。

格式：

a（a标签标签名）+：+link/visited/hover/active/focus分别用于编写链接点击之前的样式，被访问之后的样式，光标悬停时的样式，被激活的时刻（鼠标点击但不松手时），获得聚焦时。

<!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{

}

：before{

}

注意：适用于CSS2，必须使用content属性增添内容。

：：after{

}

：：before{

}

注意：适用于CSS3，必须使用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>