css选择器总结

hqq181011

已于 2023-03-27 21:45:22 修改

阅读量38

点赞数

文章标签： css html css3

于 2023-03-26 17:55:17 首次发布

本文链接：https://blog.csdn.net/hqq181011/article/details/129781816

版权

css选择器总结

css常用选择器有如下几种:
在这里插入图片描述

普通选择器代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style type="text/css">
        div {
            color: rebeccapurple;
font-size: 15px;/*标签选择器*/
        }
        #one {color: gray;}/*id选择器*/
        .two {color: blue;}/*class选择器*/
    *{
        color:red;/*通配选择器*/
    }</style>
</head>
<body>
 <div id="one" class="two">
第一个div
 </div>   
</body>
</html>

id属性是唯一的，class不唯一
四个选择器的优先级：
ID > class > 标签 > 通配符
标签选择器（根据标签的名称获取）、ID选择器（获取的是ID属性）、类选择器（class属性）、通用选择器（通配符）

包含选择器代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器2</title>
    <style type="text/css">
       div.one { color: aqua;
    background: blue;border: 1px;
    } 
#two { color:pink;background: rgb(0, 255, 128);border: 1px black}
        div.list>ul{
            color:pink;background: rgb(255, 0, 81);border: 1px black;
            width:"200px" ;height:"200px"  
        }</style>
</head>
<body>
  <div class="one">
    这是第一个div标签
  </div>
  <div id="two">
    这是第二个div标签
  </div>
  <div class="list">
    <ul>
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
        <li>第四行</li>
    </ul>
  </div>
</body>
</html>

子代选择器（获取的是某个标签的第一级子标签）
后代选择器（获取的某个标签里面所有的子标签）
分组选择（逗号选择器，可以同时设置多个标签，使用逗号进行分割）

属性选择器代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style type="text/css">
.one[class]{
color: bisque;
}
input[type="text"]{
    color: blueviolet;}
    input[type^="e"]
    {color:green;}
    
        </style>
</head>
<body>
  <div class="two">
这是第一个div标签
  </div> 
  <div class="one">
这是第二个div标签
  </div> 
  <p><input type="text" name="" value="张三"></p>
  <p><input type="password" name="" value="李四"></p>
  <p><input type="email" name="" value="王五"></p>
  <div id="ehree"> 最后一个标签</div>
</body>
</html>

伪类选择器代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪标签</title>
    <style type="text/css">
        a:link { color:aqua;}
        a:visited{ color:gray}
        a:hover{ color:blue}
        a:active{ color:royalblue}
    </style>
</head>
<body>
  <a href="https://www.baidu.com/">点我
  </a>  
</body>
</html>

伪元素选择器代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器</title>
    <style type="text/css">
p::before{content: "张三";
color: red;
}
p::after{content: "李三";
color: rgb(0, 255, 132);
}
    </style>
</head>
<body>
 <p>这是一个段落</p>   
</body>
</html>