HTML选择器归纳

阳阳真的很菜

于 2023-07-08 19:53:03 发布

阅读量40

点赞数 1

文章标签： html css css3

本文链接：https://blog.csdn.net/qq_73971624/article/details/131615780

版权

HTML选择器归纳

标签选择器

标签选择器是通过获取标签的名称来进行设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>选择器</title>
</head>
   <style type="text/css">
      div{
          color:  red;
      }
   </style>
<body>
    <div id="wang" class="bao">yes yes yes </div>
</body>
</html>

ID选择器

ID选择器是通过获取ID的属性来进行设置，使用 #+ID属性值来选中。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>选择器</title>
</head>
   <style type="text/css">
      #wang{
         color: black;
      }
   </style>
<body>
    <div id="wang" class="bao">yes yes yes </div>
</body>
</html>

类选择器

类选择器是通过获取class属性来进行设置，使用 .+class属性值来选中。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>选择器</title>
</head>
   <style type="text/css">
      .bao{
         color:green;
      }
   </style>
<body>
    <div id="wang" class="bao">yes yes yes </div>
</body>
</html>

通用选择器

通用选择器使用 * 来代指，它代表的是选中了父元素中的所有内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>选择器</title>
</head>
   <style type="text/css">
    *{
      color: blue;
    }
   </style>
<body>
    <div id="wang" class="bao">yes yes yes </div>
    <div>no no no</div>
</body>
</html>

优先级为：ID > class > 标签 > 通配符

子代选择器

子代选择器是通过获取某个标签的第一级子标签来设置。格式为：标签.属性值>子标签{}

<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器1</title>
<style type="text/css">
    /*子代*/
    div.wang>ul{
         border: 1px solid red;
    }
  </style>
</head>
<body>
    <div class="bao">有何不可</div>
    <div title="jiang">最佳歌手</div>
    <div class="wang">
      <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
      </ul>
    </div>
</body>
</html>

后代选择器

后代选择器是通过获取的某个标签里面所有的子标签来设置。格式为：.属性名二级子标签{}

<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器1</title>
<style type="text/css">
    /*后代*/
    .wang li{
        border: 1px solid yellow;
    }
</style>
</head>
<body>
    <div class="bao">有何不可</div>
    <div title="jiang">最佳歌手</div>
    <div class="wang">
        <ul>
          <li>列表1</li>
          <li>列表2</li>
          <li>列表3</li>
        </ul>
      </div>
</body>
</html>

分组选择器

也叫做逗号选择器，可以同时设置多个标签，使用逗号进行分割。

<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器1</title>
<style type="text/css">
    .bao,.jiang,#xu{
        color: aqua;
        width: 50;
        height: 50;
        background:pink;
        border: 5px solid rgb(132, 0, 255);
    }
</style>
</head>
<body>
    <div class="bao">有何不可</div>
    <div title="jiang">最佳歌手</div>
    <p id="xu">许嵩</p>
    <div class="wang">
        <ul>
          <li>列表1</li>
          <li>列表2</li>
          <li>列表3</li>
        </ul>
      </div>
</body>
</html>

属性选择器

元素带有属性，属性选择器就是通过选中带有特定属性的元素进行设置。

<!DOCTYPE html>
<html lang="en">
<head>
<title>选择器1</title>
<style type="text/css">
    /*选中含有title属性的div标签*/
    div[title]{
                border: 1px solid black;
               } 
    /*选中type属性的值为text的input标签*/
    input[type="text"]{
                        background: 1px solid  red;
                      }
    /*选中type属性的值中含有'e'的input标签*/
    input[type *="e"]{
                        background: blue;
                     }
    /*选中type属性的值以'e'开头的input标签*/
    input[type ^="e"]{
                        background: green;
                    }
    /*选中type属性的值以'rl'结尾的input标签*/
    input[type $="rl"]{
                        background: red;
                      }
    /*+表示选中下一个标签*/
    .msg +p{
                        border: 1px solid green;
                      }
    /*选中title属性值为'jiang'的标签*/
    [title="jiang"]{
                        color: red;
                    }
</style>
</head>
<body>
    <div class="bao">有何不可</div>
    <div title="jiang">最佳歌手</div>
    <input type="text" name="" value="wang">
    <input type="email" name="" value="bao">
    <input type="url" name="" value="jiang">
    <p class="hao">hello!</p>
</body>
</html>

伪类选择器
即同一个标签，在不同的状态下显示出来的效果不同，通过设置不同的样式来实现.

状态： :link 点击之前

        :visited   点击之后 

        :hover   悬浮时

        :active   长按不松手时

<!DOCTYPE html>
<html lang="en">
<head>
 
<title></title>
    <style type="text/css">
         /*点击之前的状态*/
         a:link{
            color: red;
         }
         /*点击之后的状态*/
         a:visited{
            color:chartreuse;
         }
         /*指针悬浮时的状态*/
         a:hover{
            color: darkmagenta;
         }
         /*长按不松手时的状态*/
         a:active{
            color: pink;
         }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">点这里</a>
</body>
</html>

伪元素选择器

状态： ::before

::after

::before

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
    <style type="text/css">
        p::before{
            content:"阿珍";
            color: red;
        }
        p::after{
            content:"阿强";
            color: aqua;
        }
    </style>
</head>
<body>
    <p>爱上了</p>
</body>
</html>

阳阳真的很菜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML选择器归纳

*选中type属性的值以'rl'结尾的input标签*//*选中type属性的值中含有'e'的input标签*//*选中type属性的值以'e'开头的input标签*//*选中type属性的值为text的input标签*/优先级为：ID > class > 标签 > 通配符。/*选中title属性值为'jiang'的标签*//*选中含有title属性的div标签*//*+表示选中下一个标签*//*长按不松手时的状态*//*指针悬浮时的状态*//*点击之前的状态*//*点击之后的状态*/
复制链接

扫一扫