html 选择器

不会取名余

已于 2023-07-12 19:11:26 修改

阅读量762

点赞数 2

文章标签： html 前端 css

于 2023-07-08 17:36:30 首次发布

本文链接：https://blog.csdn.net/weixin_74812127/article/details/131614064

版权

1，标签选择器:通过元素的标签名称来选择元素，如p选择所有<p>元素。

<style>
p{
  color:颜色；
  }
</style>
<body>
<p>
文字
<p>
</body>

2,id选择器在id前加#:通过元素的id属性值来选择元素，如#id选择id属性值为"id"的元素。

<style>
#box1{
color:颜色；
     }
</style>
<body>
<div id="box1"></div>
</body>

3,类选择器（多个标签归类是同一个class可以复用）:通过元素的class属性值来选择元素，如.class选择所有class属性值为"class"的元素。

<style>
   .biao1{
       color:aquq;
        }
   .biao2{
       color:red;
        }
</style>
<body>
<h1 class="biao1">标题一</h1>
<h1 class="biao2">标题二</h1>
<h1 class="biao1">标题一</h1>
<p class="biao2">标签1</p>

4,通配符选择器

*{
操作
}

5，子代选择器,选中亲儿子:选择元素的直接子元素，如A > B选择所有A元素的直接子元素中的B元素。

<style>
 .a>li{
   在此操作
   }
   </style>
<body>
<ul class="a">
  <li>1</li>
  <li>1</li>
  <ul>
     <li>2</li>
     </ul>
</ul>
</body>

6，后代选择器，找到后代中所有要找的元素:选择元素的后代元素，如A> B选择所有A元素的后代中的B元素。

<style>
 .a li{
   在此操作
   }
   </style>
<body>
<ul class="a">
  <li>1</li>
  <li>1</li>
  <ul>
     <li>2</li>
     </ul>
</ul>
</body>

7,逗好选择器

<style>
  div,
  p,
  span{
操作
   }
</style>
<body>
<p>1</p>
<span>1</span>
<div>1</div>
</body>

8，属性选择器:通过元素的某个属性值来选择元素，如[name="value"]选择所有name属性值为"value"的元素。

<style>
  input[type="password"]{
    操作
    }
   div[id]{
  操作
    }(以te开头)
input[type^="te"]{
操作
     }（以1结尾）
input[type$="1"]{
操作
    }（包含e）
input[type*="e"]{
操作
}
</style>
<body>
<input type="text"><br />
<input type="password"><br />
<div id="aquamarinre">1</div>
</body>

9,伪类选择器:通过元素的状态或特殊性质来选择元素，如:hover选择鼠标悬停在元素上的状态。

<style>
(重要)a:hover{
    font-size: 40px;(悬停字体变大)  cursor: cell;(鼠标样式)
}
     a:link{
     color:颜色
}
    a:visited{
color:颜色;(访问后变色)
}
    a:active{
    font-size:70px;(字体变大)
}
</style>
<body>
<a href="#">去百度</a>

10,结构伪类选择器

even：偶数，odd：奇数，

<style>
        ul li:first-child {
            background-color: pink;
        }

        ul li:last-child {
            background-color: green;
        }

        ul li:nth-child(3) {
            background-color: blue;
        }

        ul li:nth-of-type(4) {
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

11，结构伪类选择器

 <style>
        ul li:nth-child() {
            background-color: pink;
        }（总的第n个）

        ul li:nth-of-type(n) {
            background-color: rgb(215, 30, 61);
        }（同一类的第n个）

        div span:nth-child(2) {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <ul>
        <p>我是文字</p>
        <li>1</li>
        <li>2</li>
    </ul>

    <div>
        <span>1</span>
        <span>kjdscnkdscn</span>
    </div>
</body>

12，伪元素选择器

 <style>
        ul li::before {
            content: "输入内容";
        }（引号内输入的内容会出现在<li>后输入的内容的前方）

        ul li::after {
            content: url();
        }
       input::placeholder {
            color: rgb(62, 226, 56);
        }（表单提示词）
       ul li:nth-child(4)::selection {
            color: pink;
        }（选中时）
    </style>


<body>
    <input type="text" name="" id="" placeholder="jdhcndsk">
    <ul>
        <li>1dcdscdscdcd</li>
        <li>2cdcdcdcdc</li>
        <li>3cdcdscdsc</li>
        <li>4cdcdcdcddcds</li>

    </ul>
</body>

不会取名余

关注

2
点赞
踩
4

收藏

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

3,类选择器（多个标签归类是同一个class可以复用）6，后代选择器，找到后代中所有要找的元素。2,id选择器在id前加#even：偶数，odd：奇数，5，子代选择器,选中亲儿子。10,结构伪类选择器。11，结构伪类选择器。
复制链接

扫一扫