5、前端开发：CSS知识总结——常用选择器的总结

最新推荐文章于 2023-02-09 22:09:43 发布

Java Fans

最新推荐文章于 2023-02-09 22:09:43 发布

阅读量403

点赞数 3

分类专栏：前端开发者成长之路文章标签： css 前端 html

Java Fans

本文链接：https://blog.csdn.net/hh867308122/article/details/126341809

版权

前端开发者成长之路专栏收录该内容

38 篇文章 10 订阅

订阅专栏

-1- 元素选择器（标签选择器）

语法：标签名{}

h1{
}
p{
}

-2- id选择器

选中对应id属性值的元素

语法：#id属性值{}

注意：id属性值是独一无二的存在

#p1{

}

-3- class选择器

选中对应class属性值的元素

语法：.class属性值{}

注意：id选择器和class选择器很像，只不过class属性值可以复用

.p1{

}

-4- 通配选择器

选中页面中所有的元素

语法：*{}

-5- 复合选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

基本语法格式：元素1,元素2{样式声明}

注意：

        元素1元素2之间用逗号隔开
        逗号可以理解为和的意思
        并集选择器通常用于集体声明
        例：

        要求1：把熊大熊二改成蓝色
        要求2：把熊大熊二改成蓝色且把小猪佩奇一家
        同时改成蓝色

html代码如下（示例）：

     <body>
        <!--并集选择器-->
        <div class="nav1">
            熊大
        </div>
        <p>熊二</p>
        <span>光头强</span>
        <ul class="pig">
            <li>小猪佩奇</li>
            <li>猪爸爸</li>
            <li>猪妈妈</li>
        </ul>
        
     </body>

代码如下（示例）：

            /*并集选择器,可以选择多组标签,同时为他们定义相同样式*/
            /*要求1:把熊大熊二改成蓝色*/
            
            /*.nav1,p {
                color: blue;
            }*/
            
            /*要求2:把熊大熊二改成蓝色且把小猪一家改成蓝色*/
            .nav,p,.pig li {
                color: blue ;
            }

交集选择器又称标签指定式选择器

作用：选择出同时符合两个标签的内容

格式：1.由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器；2.两个选择器之间不能有空格

例如：老师要求他的班级中所有学生把头发染成红色

div.student{
				color: red;
}

-6- 关系选择器

后代选择器(以空格分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号～分隔）

后代选择器用于选取某元素的后代元素。

以下实例选取所有 <p> 元素插入到 <div> 元素中:

div p
{
  background-color:yellow;
}

子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。

以下实例选择了<div>元素中所有直接子元素 <p> ：

div>p
{
  background-color:yellow;
}

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

div+p
{
  background-color:yellow;
}

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

div~p
{
  background-color:yellow;
}

-7- 属性选择器

具有特定属性的HTML元素样式不仅仅是class和id。

注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。

[title]
{
    color:blue;
}

[title=runoob]
{
    border:5px solid green;
}

-8- 伪类选择器

-伪类用来描述一个元素的特殊状态

比如：第一个元素，被点击的元素，鼠标移入的元素···

-特点：一般请情况下，使用：开头

1、 :first-child 第一个子元素

2、 :last-child 最后一个子元素

3、 :nth-child() 选中第n个子元素

特殊值： n 所有的

2n或even 选中偶数

2n+1或odd 选中奇数

—以上这些伪类都是根据所有的子元素进行排序

1、:first-of-type

2、:last-of-type

3、:nth-of-type()

功能跟上面相似，

—不同的是，这是在同类型的子元素中去选择

<!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>
      /*去掉项目符号*/
      ul {
        list-style: none;
      }
      /* 需求一：将ul里的第一个li自动一直设置为红色 */
      /* ul>li:first-child{color:red} */
      /* ul>li:last-child{color:blue} */
 
      /* ul>li:not(:nth-child(3)){color: green;} */
      /* ul>li:not(:nth-of-type(3)){color: green;} */
      /* li:nth-child(1) {
        color: pink;
      } */
      /* li:nth-of-type(1){
        background-color: red;
      } */
      li:not(:first-of-type){
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <h1>沁园春·雪</h1>
    <h3>毛泽东</h3>
    <ul>
      <span>测试</span>
      <p>北国风光，千里冰封，万里雪飘。</p>
      <li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
      <li>山舞银蛇，原驰蜡象，欲与天公试比高。</li>
      <li>须晴日，看红装素裹，分外妖娆。</li>
      <li>江山如此多娇，引无数英雄竞折腰。</li>
      <li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
      <li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
    </ul>
  </body>
</html>

-9- 伪元素选择器

::first-letter表示第一个字母，例如：p::first-letter{}

    <style>
        p::first-letter{
            font-size: 30px;
            color: blueviolet;
        }
    </style>

::first-line表示第一行（第一行内容根据屏幕大小来决定显示多少字），例如： p::first-line{}

    <style>
        p::first-line{
            color: blue;
        }
    </style>

::selection表示选中的内容

    <style>
        p::selection{
            color: aqua;
        }
    </style>

::before表示元素的开始，::after表示元素的最后，before和after必须结合content属性来使用

    <style>
        p::after{
            content: "hahaha";
            color: red;
        }
        p::before{
            content: "hehehe";
            color: coral;
        }
    </style>