css选择器

最新推荐文章于 2024-08-22 09:26:51 发布

kelulu21

最新推荐文章于 2024-08-22 09:26:51 发布

阅读量222

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/kelulu21/article/details/121362476

版权

css中，选择器用来指定网页上我们想要样式化的html元素。可以很精确的改变元素的样式。

css选择器有基本选择器，包含选择器，属性选择器，伪类选择器，伪元素选择器。

一.基本选择器

基本选择器分为标签选择器，id选择器，类选择器，通用选择器（通配符选择器）。

语法结构

<!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>Document</title>
    <style  type="text/css">
      /* 标签选择器*/
      h1{
          color: blue;
      }
  
      /*id选择器*/
      #one{
          color: blueviolet;
      }
  
      /*类选择器*/
      .two{
          color: tomato;
      }

      /*通配符选择器*/
      *{
          color: turquoise;
      }
      
    </style>

</head>
<body>
    <h1>标题</h1>
    <p  id="one">正文</p>
    <div  class="two">div</div>
    <div>另一个div</div>
    <p>另一个正文</p>  

</body>
</html>

优先级：id>类>标签>通配符

注：id选择器在一个网页文件中只能使用一次。

二.包含选择器

包含选择器分为子代选择器，后代选择器，分组选择器。

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

后代选择器：获取某一标签内的所有子标签。

分组选择器：也叫逗号选择器，可以给多个标签加上样式，用，隔开。

<!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>Document</title>
    <style  type="text/css">
      /*子代选择器*/
      .one>ul{
          color: violet;
      }

      /*后代选择器*/
      .one  li{
          color: red;
      }

      /*分组选择器*/
      h2,.list,#list{
          color: blue;
      }

    </style>

</head>
<body>
    <h2>这是一个标签</h2>
    <p  id="one">这是一个段落</p>
    <div class="one">
        <ul >
          <li><a  href="#">1</a></li>
          <li><a  href="#">1</a></li>
          <li><a  href="#">1</a></li>
          <li><a  href="#">1</a></li>
          <li><a  href="#">1</a></li>
          <li><a  href="#">1</a></li>
          <li><a  href="#">1</a></li>
  
  
        </ul>
        <li><a  href="#">1</a></li>
        <li><a  href="#">2</a></li>
        <li><a  href="#">3</a></li>
        <li><a  href="#">4</a></li>
        <li><a  href="#">5</a></li>
        <li><a  href="#">6</a></li>
        <li><a  href="#">7</a></li>
  
      </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>Document</title>
    <style  type="text/css">
      /*选中某个标签的某个属性*/
      div[title]{
          color: blue;
      }
  
      /*确切的等于*/
      input[type="text"]{
          background: brown;
      }

      /*某个属性含有某个值*/
      input[type*="e"]{
          background: cadetblue;
      }

      /*某个属性以什么开始*/
      input[type^="e"]{
          background: chartreuse;
      }

      /*某个属性以什么结束*/
      input[type$="rl"]{
          background: darkblue;
      }

      /*标识下一个标签*/
      .msg +  {
          color: red;
      }

      /*属性名称等于某个值*/
      [title="这是一个标题"]{
          color: lime;
      }


    </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>

四.伪类选择器

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

：link	超链接点击之前的样式
：visited	链接被访问之后
：hover	悬停，鼠标放到标签上的样式
：active	长按鼠标的时候
：focus	某个标签获得焦点的时候

<!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>Document</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="#">点击我</a>
</body>
</html>

五.伪元素选择器

:after	css2提供
:before
::after	css3提供
::before

注：若要使用before或after，一定要加上content

<!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>Document</title>
    <style  type="text/css">
      p::before{
          content: "张三";
           color: red;
      }

      p::after{
          content: "list";
      }


    </style>
</head>
<body>
    <p>这是一个段落</p> 
</body>
</html>

kelulu21

关注

0
点赞
踩
0

收藏

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

css中，选择器用来指定网页上我们想要样式化的html元素。可以很精确的改变元素的样式。css选择器有基本选择器，包含选择器，属性选择器，伪类选择器，伪元素选择器。一.基本选择器基本选择器分为标签选择器，id选择器，类选择器，通用选择器（通配符选择器）。语法结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv
复制链接

扫一扫