css选择器总结

南风好胜

已于 2023-04-16 17:26:20 修改

阅读量63

点赞数

文章标签： css css3 前端

于 2023-03-31 13:24:11 首次发布

本文链接：https://blog.csdn.net/Jiayou9933/article/details/129867336

版权

css叫做层叠样式表，用于修饰装饰网页的美观度。选择器是选取需设置样式的元素的模式

（1）基本选择器

包括：标签选择器（标签名称获取）、ID选择器（获取的是id属性）、类选择器（获取的是class属性）、通用选择器（使用通配符）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  <style type="text/css">
      #one{
        color: aqua;
      }
              /*id选择器*/
      .two{
        color: blue;
      }
              /*类选择器*/
      *{
        color: blueviolet;
      }
              /*通用选择器*/
      p{
        color: crimson;
      }
              /*标签选择器 */
</style>
</head>
<body>
<p id="one" class="two">
  一个标签
</p>
</body>
</html>

（2）包含选择

子代选择器：获取某个标签的第一级子标签。

后代选择器：获取某个标签里所有子标签。

分组选择（逗号选择器）：可同时设置多个标签，使用逗号分割。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  <style type="text/css">
/*子代选择器*/
div.list>ul{
  border: 1px solid red;
}
/*后代选择器*/
.list li{
  border: 1px solid blue;
}
  /*逗号选择器*/
.one,.two,#f{
  color: blueviolet;
  width: 100px;
  height: 100px;
  background: brown;
  border: 9px solid green;
}
  </style>
</head>
<body>
    <div class="one">第一个div</div>
    <div class="two">第二个div</div>
    <p id="f">段落标签</p>
    <div class="list">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
</body>
</html>

（3）属性选择器

其中input[type="text"]是属性确切等于某个值,input[type*="a"]是关于属性包含某个值的，input[type^="a"]是关于属性以某个值开头的，input[type$="a"]是关于属性以某个值结尾的。其他情况如下图所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
  <style type="text/css">
    /*选择标签存在的某个属性*/
    div[title]{
        border: 3px solid black;
    }
  /*属性确切等于某个值*/
    input[type="text"]{
      background: crimson;
    }
  /*属性包含某个值*/
    input[type*="l"]{
      background: chocolate;
    }
  /*+表示下一个标签*/
    .msg +p{
      border: 4px solid blue;
    }
  /*属性等于某个属性值*/
    [title="一个标题"]{
      color: blueviolet;
    }
  </style>
</head>
<body>
  <div class="C">第一个div</div>
  <div title="一个标题">第二个div</div>
  <input type="text" name="" id="1" value="小明" >
  <input type="email" name="" id="2" value="小红">
  <input type="url" name="" id="3" value="星期一"><hr>
  <div class="msg">又一个标签</div>
    <p id="mgs1">一些文字</p>
</body>
</html>

(4)伪类选择器

伪类：同一个标签，根据不同的状态有不同的样式。

包括：:link（对点击链接之前）:visited（对点击链接之后）:hover（鼠标键悬停于链接上方时）

:active（鼠标点击但不松手）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
  <style type="text/css">
    /*点之前*/
    a:link{
      color: blueviolet;
    }
    /*点之后*/
    a:visited{
      color: blue;
    }
    /*悬停*/
    a:hover{
      color: green;
    }
    /*点击不松手*/
    a:active{
      color: gold;
    }
  </style>
</head>
<body>
<a href="https://www.baidu.com">点击链接</a>
</body>

(5)伪元素选择器

包括：:before（在元素前面加伪元素）、 :after（在元素后面加伪元素）、::before、::after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
  <style type="text/css">
    p:before{
              content: "名字1";
              color: red;
    }
    p:after{
              content: "名字2";
              color:green;
    }
  </style>
</head>
<body>
<p>另一些文字</p>
</body>
</html>

感谢观看，如有不足敬请指出！

南风好胜

关注

0
点赞
踩
0

收藏

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

其中input[type="text"]是属性确切等于某个值,input[type*="a"]是关于属性包含某个值的，input[type^="a"]是关于属性以某个值开头的，input[type$="a"]是关于属性以某个值结尾的。包括：标签选择器（标签名称获取）、ID选择器（获取的是id属性）、类选择器（获取的是class属性）、通用选择器（使用通配符）。包括：:before（在元素前面加伪元素）、 :after（在元素后面加伪元素）、::before、::after。--四种状态最好不改变-->
复制链接

扫一扫