CSS选择器

于 2021-07-20 20:25:49 发布
阅读量58 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48424026/article/details/118943745
版权
本文详细介绍了CSS选择器的各个类型，包括元素选择器、ID选择器、类选择器、通配选择器、复合选择器、关系选择器、属性选择器、伪类选择器和伪元素选择器。通过理解这些选择器，可以精准地控制网页中元素的样式。内容涵盖了选择器的基本语法、使用场景和实战示例，旨在帮助开发者更好地掌握CSS样式设计。
摘要由CSDN通过智能技术生成

CSS选择器

文章目录

1.css简介
（1）网页分为三个部分：结构(html)、表现(CSS)、行为(JavaScript)
（2）CSS—层叠样式表

​ 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而我们最终能看到只是网页的最上边一层。总之，CSS用来设置网页中元素的样式

（3）通过CSS来修改元素的样式

第一种方式—内联样式/行内样式：在标签内部通过style属性来设置元素的样式

-问题：使用内联样式，样式只能对一个标签生效，如果希望影响多个元素，必须一个一个的修改，非常不方便

-注意：开发时绝对不要使用内联样式！

<p style="color: aqua; font:900" >少小离家老大回，乡音无改鬓毛衰</p>

第二种方式—内部样式表

-将样式编写到head中的style标签里，然后通过CSS的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需修改一处即可

-内部样式更加方便对样式进行复用

-问题：只能对一个网页起作用，里面的样式不能跨页面进行复用

  <style>
        p{
            color: rgb(165, 18, 18);
            font-size: 1cm;
        }
  </style>

第三种方式—外部样式表 最佳实践

-可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件

-外部样式表需要通过link标签来进行引入，意味着只要想使用这些样式的网页都可以对其进行引用

使样式可以在不同页面之间进行复用

-将样式编写到外部的CSS文件中可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户体验

style.css

p{
    color:blue;
    font-size:small;
}

h1{
    color:brown;
    font-size: large;
}

link标签引入

<link rel="stylesheet" href="./0.style.css">
2.CSS语法

CSS基本语法：选择器 声明块

（1）选择器，通过选择器可以选中页面中指定元素，比如 p 的作用就是选中页面中所有元素的p元素
（2）声明块，通过声明块来指定要为元素设置的样式，声明块由一个一个的声明组成，声明是一个名值对结构

一个样式名对应一个样式值，名和值之间以：连接，以；结尾

3.常用选择器
（1）元素选择器

​ 作用：根据标签名来选中指定的元素

​ 语法：标签名{}

​ 例子：p{} h1{} div{}

<!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>
        p{
            color:lightblue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>书里总爱写到喜出望外的傍晚</p>
    <p>骑的单车还有他和她的对白</p>
    <p>女孩的白色衣裳男孩爱看她穿</p>
    <p>好多桥段</p>
    <p>好多都浪漫</p>
    <p>好多人心酸</p>
    <p>好聚好散</p>
</body>
</html>
（2）id选择器

​ 作用：根据元素的id属性值选中一个元素

​ 语法：#id属性值{}

​ 例子：#box{} #red{}

<!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>
        p{
            color:lightblue;
            font-size: 20px;
        }
         
        #first{
            color:lightcoral;
        }

        #second{
            color: lightskyblue;
        }
    </style>
</head>
<body>
    <p id="first">书里总爱写到喜出望外的傍晚</p>
    <p id="second">骑的单车还有他和她的对白</p>
    <p>女孩的白色衣裳男孩爱看她穿</p>
    <p>好多桥段</p>
    <p>好多都浪漫</p>
    <p>好多人心酸</p>
    <p>好聚好散</p>
</body>
</html>
（3）类选择器

​ 作用：根据元素的class属性值选中一组元素

​ 语法：.class属性值{}

<!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>
        p{
            color:lightblue;
        }
         
        #first{
            color:lightcoral
        }

        #second{
            color: lightskyblue;
        }

        .A{
            font-size: 10px;
        }

        .B{
            font-size: 20px;
        }

    </style>
</head>
<body>
    <p id="first">书里总爱写到喜出望外的傍晚</p>
    <p id="second">骑的单车还有他和她的对白</p>
    <p class="A B C">女孩的白色衣裳男孩爱看她穿</p>
    <p class="A">好多桥段</p>
    <p class="B">好多都浪漫</p>
    <p>好多人心酸</p>
    <p>好聚好散</p>
</body>
</html>
（4）通配选择器

​ 作用：选中页面的所有元素

​ 语法：*{}

<!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>
        *{
            color:mediumslateblue;
        }
    </style>
</head>
<body>
    <p>书里总爱写到喜出望外的傍晚</p>
    <p>骑的单车还有他和她的对白</p>
    <p>女孩的白色衣裳男孩爱看她穿</p>
    <p>好多桥段</p>
    <p>好多都浪漫</p>
    <p>好多人心酸</p>
    <p>好聚好散</p>
</body>
</html>
4.复合选择器
（1）交集选择器

​ 作用：选中同时复合多个条件的元素

​ 语法：选择器1.选择器2.选择器3.选择器n{}

​ 例子：div.A{} p.B{}

​ 注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头

<!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>
        div.A{
            color: orangered;
        }

        p.B{
            font-size: 20px;
        }

    </style>
</head>
<body>
    <div class="A">书里总爱写到喜出望外的傍晚</div>
    <p class="B">骑的单车还有他和她的对白</p>
    <p>女孩的白色衣裳男孩爱看她穿</p>
    <div class="A">好多桥段</div>
    <div class="A">好多都浪漫</div>
    <div class="A">好多人心酸</div>
    <span class="A">好聚好散</span>
</body>
</html>
（2）选择器分组—并集选择器

​ 作用：同时选择多个选择器对应的元素{}

​ 语法：选择器1,选择器2,选择器3,选择器n{}

​ 例子：p,span{}

<!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>
        /* div.A{
            color: orangered;
        } */
        p,span{
            color:powderblue;
            font-size: 2rem;
        }
        /* p.B{
            font-size: 20px;
        } */
    </style>
</head>
<body>
    <div class="A">书里总爱写到喜出望外的傍晚</div>
    <p class="B">骑的单车还有他和她的对白</p>
    <p>女孩的白色衣裳男孩爱看她穿</p>
    <div class="A">好多桥段</div>
    <div class="A">好多都浪漫</div>
    <div class="A">好多人心酸</div>
    <span class="A">好聚好散</span>
</body>
</html>
5.关系选择器
（1）元素分类

​ 父元素：直接包含子元素的元素叫做父元素

​ 子元素：直接被父元素包含的元素是子元素

​ 祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是它的祖先元素

​ 后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后代元素

​ 兄弟元素：拥有相同父元素的元素是兄弟元素

（2）选择器分类

​ 子元素选择器

​ 作用：选中指定父元素的指定子元素

​ 语法：父元素>子元素

 div>p>span{
            color: cadetblue;
        }

​ 后代元素选择器

​ 作用：选中指定元素内的指定后代元素

​ 语法：祖先 后代

  div.A span{
            color: cornflowerblue;
        }

​ 选择下一个兄弟

​ 语法：前一个 + 下一个

  p+span{
            color: darkgoldenrod;
        }

​ 选择下边所有兄弟

​ 语法：兄~弟

p~span{
            color: indigo;
        }

eg：

<!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>
        div>p>span{
            color: cadetblue;
        }

        div.A span{
            color: cornflowerblue;
        }

        p+span{
            color: darkgoldenrod;
        }

        p~span{
            color: indigo;
        }

    </style>
</head>
<body>
    <div class="A">
        我是div
        <p>
            我是div中的p元素
            <span>我是p元素中的span元素</span>
        </p>
        <span>我是div中的span1元素</span>
        <span>我是div中的span2元素</span>
    </div>
    <br>
    <div>
        <span>我是div外的span元素</span>
    </div>
</body>
</html>
6.属性选择器

[属性名] 选择含有指定属性的元素

	p[title]{ 
    	color: lightseagreen;
	}

[属性名=属性值] 选择含有指定属性和属性值的元素

   div[title=abc]{
       color: lightseagreen;
   }

[属性名^=属性值] 选择属性值以指定值开头的元素

 	div[title^=abc]{ 
        color: lightseagreen;
    }

[属性名$=属性值] 选择属性值以指定值结尾的元素

	div[title$=abc]{
        color: lightseagreen;
    }

[属性名*=属性值] 选择属性值中含有某值的元素

  	p[title*=e]{
        color: lightseagreen;
     }

eg：

<!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>属性选择器</title>
    <style>
        p[title*=e]{
        /* div[title$=abc]{ */
        /* div[title^=abc]{ */
       /* div[title=abc]{ */
       /* p[title]{ */
           color: lightseagreen;
       } 
    </style>
</head>

<body>
    <div title="abc">书里总爱写到喜出望外的傍晚</div>
    <p title="abcde">骑的单车还有他和她的对白</p>
    <p title="hello">女孩的白色衣裳男孩爱看她穿</p>
    <div title="abcdeabc">好多桥段</div>
    <div >好多都浪漫</div>
    <div>好多人心酸</div>
    <span>好聚好散</span>
</body>
</html>
7.伪类选择器
（1）伪类(不存在的类，特殊的类)

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

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

（2）伪类一般情况下用：开头

​ :first-child 第一个子元素

​ :last-child 最后一个子元素

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

​ 特殊值：

​ n 第n个(n的范围：0到正无穷)

​ 2n或even 表示选中偶数位的元素

​ 2n+1或old 表示选中奇数位的元素

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

​ :first-of-type

​ :last-of-type

​ :nth-of-type()

​ —这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序

​ :not() 否定伪类

​ —将符合条件的元素从选择器中去除

<!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>li:first-of-type{
            color:pink;
        }

        ul>li:first-child{
            font-size: 1.5pc;
        }

        ul>li:nth-child(2n+1){
            color:seagreen;
        }
        
        ul>li:not(:first-of-type){
            color:turquoise;
        }
    </style>
</head>
<body>
    <ul>
        <p>我是p元素</p>
        <li>li中的第1个</li>    
        <li>li中的第2个</li> 
        <li>li中的第3个</li> 
        <li>li中的第4个</li> 
        <li>li中的第5个</li> 
        <li>li中的第6个</li>    
    </ul>
</body>
</html>
8.超链接的伪类
（1）:link 用来表示没访问过的链接(正常的链接)
   a:link{
            color: teal;
        }
（2）:visited 用来表示访问过的链接(只能修改链接的颜色)
a:visited{
            color: violet;
        }
（3）:hover 用来表示鼠标移入的状态
a:hover{
            font-size: 3px;
        }
（4）:active 用来表示鼠标点击
a:active{
            font-size: 20px;
        }

eg：

<!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>
        a:link{
            color: teal;
        }

        a:visited{
            color: violet;
        }

        a:hover{
            font-size: 3px;
        }

        a:active{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com/">访问过的链接</a>
    <br><br>
    <a href="https://www.sina.com.cn/">没访问过的链接</a>
</body>
</html>
9.伪元素
（1）伪元素表示页面中一些特殊的并不真实存在的元素
（2）伪元素使用 ::开头
（3）常见伪元素

​ ::first-letter 表示第一个字母

   p::first-letter{
            font-size: 40px;
        }

​ ::first-line 表示第一行

p::first-line{
            color: rgb(207, 207, 64);
        }

​ ::selection 表示选中的内容

 p::selection{
            color: tomato;
        }

​ ::before 元素的开始

p::before
        {
            content:'『';
            font-size: 40px;
        }

​ ::after 元素的最后

p::after{
            content: '』';
            font-size: 40px;
        }

​ —这两个元素必须结合content属性来使用

eg：

<!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>
        p::first-letter{
            font-size: 40px;
        }

        p::first-line{
            color: rgb(207, 207, 64);
        }
        p::selection{
            color: tomato;
        }

        p::before
        {
            content:'『';
            font-size: 40px;
        }

        p::after{
            content: '』';
            font-size: 40px;
        }
    </style>
</head>
<body>
    <q>AA</q>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium, voluptatem repudiandae odio quae illum iure vitae. Dicta eum sapiente similique, perferendis veritatis nemo inventore, atque sunt assumenda ullam, temporibus quibusdam!</p>
</body>
</html>

来个餐厅练习(https://flukeout.github.io/)轻松一下吧~

qq_48424026
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
选 择 器
qq_46423017的博客
09-18 7550
1、三种基本选择器（重要） （1）基本选择器 （2）类选择器 class （3）id选择器 2、层次选择器 （1）后代选择器 （2）子选择器 （3）相邻兄弟选择器 （4）通用选择器 3、结构伪类选择器 （1）这个就是ul的第一个元素 （2）这个是ul的最后一个元素 （3）选中p1 ：定位到父元素，选择当前的第一个元素 （4）如果第一个标签不是p，则就无效 （5）需要修改的话则要把nth-child(1)改成nth-child(2) （6）选中父元素，下的p元素的第二个，类型
选择器
whpu1234的博客
08-07 157
1.在{}之前的部分就是“选择器”，其指明了“样式”作用的对象    选择器{     样式;    } 2.标签选择器   如：段落标签p{ ... },以标签名为选择符的，且写在&lt;style&gt;...&lt;/style&gt;里面的 3.类选择器   语法： .类选择名称{ css样式代码; } 4.id选择器   语法： #id名称{ css样式代码; } 5.类选择器和id选择...
什么是选择器
忆_恒心的博客
03-12 1746
什么是选择器？每一条css样式声明（定义）由两部分组成，形式如下：选择器{    样式;}在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。比如右侧代码编辑器中第7行代码中的“body”就是选择器。 类选择器类选择器在css样式编码中是最常用到的，如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。语法：.类选器...
②CSS介绍及选择器的基本使用
一个努力学习的程序猿
04-01 195
CSS选择器选择器元素选择器类选择器ID选择器通用选择器复合选择器群组选择器后代选择器子元素选择器 ※兄弟选择器 ※属性选择器 ※伪类和伪元素 ※其他子元素选择器 ※否定伪类样式的继承选择器的权重 ※ 本人是个新手，写下博客用于自我复习、自我总结。 如有错误之处，请各位大佬指出。 学习资料来源于：尚硅谷 CSS 层叠样式表 (Cascading Style Sheets) • css可以用来...
css--概述、选择器
小白小白从不日别的博客
05-08 626
目录 一、概述 1.1 语法 1.2 css的特点 1.3 css的注释 1.4常见属性介绍 1.5Css的书写位置(引入方式) 1.6link和@import的区别 1.7css书写方式之间的区别 1.8颜色的表达方式 二、选择器概述 2.1 选择器分类 2.2 选择器的优先级 三、基础选择器 3.1 标签(元素)选择器 3.2 类选择器 3.3 ID选择器 3.4 通配符选择器 3.5 合并选择器 3.6交集选择器（标签指定选择器） 3.7后代选择器...
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
CSS 选择器支持列表
09-25
CSS 选择器支持列表 CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML ...
react-React组件的css选择器
08-15
在React开发中，CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面，因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用，以及如何优化组件的...
html css星号选择器,DIV+CSS星号（*）选择器
weixin_39972264的博客
06-05 719
CSS DIV+CSS星号(*)选择器星号(*)选择器也称为通用选择器、通配符选择符等，星号(*)表示通配符。通配符选择符用于对页面所有元素(HTML中所有标签)应用样式。例如：*{margin:0;padding:0;font-family:宋体;}将网页HTML中所有标签的padding设置为0、margin设置0,字体设置为宋体。特殊情况下，可以对特定元素的所有后代元素应用样式。例如，将页面...
CSS3三：选择器
qq479850581的博客
09-18 264
选择器作用 选择页面上的某一个或者某一个元素 基本选择器 标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器，会选择页面上所有的这个标签元素*/ h1{ color: #a7ff81;
29个常用CSS选择器说明与使用
一捆铁树枝的博客
12-15 1175
1、 *：通用选择器 * { margin:0; padding:0; } *选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除浏览器默认样式的方法。 *选择器也可以应用到子选择器中，例如下面的代码： #container * { border:1px solid black; } 这样ID为container 的所有子标签元素都被选中了，并且设置了border。 2、 #id：id选择器 #container {.
CSS的四种基本选择器和四种高级选择器
热门推荐
Jack
07-11 9万+
CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。 CSS的选择器分为两大类：基本选择题和扩展选择器。 基本选择器： 标签选择器：针对一类标签 ID选择器：针对某一个特定的标签使用 类选择器：针对你想要的所有标签使用 通用选择器（通配符）：针对所有的标签都适用（不建议使用） 下面来分别讲一讲。 1、标签选择器：选择器的名字代表html页面上的标签...
选择器的种类
weixin_50713646的博客
09-27 6512
选择器的种类 选择器共有六种类型： 1.（元素）标签选择器 2.id选择器 3.（类）class选择器 4.后代选择器 5.子代选择器 6.交集选择器 例子： 1.(元素)标签选择器： 标签名{样式1；样式2；........} name{color:red;} 2.id选择器： #标签的id{属性值：样式值1；.......} #name{color:red;} 3.（类）class选择器： .标签的类名{属性值：样式值1；......
你必须记住的30个CSS选择器[译]
追
05-19 3251
开篇 有30个CSS选择器你必须烂熟于心，它们适应于当今各大主流浏览器。 1.** { margin: 0; padding: 0; }*选择器选择的是每一个单一元素。很多程序员用上面的CSS将所有元素的margin和padding清零。虽然这是有效的，但最好还是别这么做，这会使得浏览器的负担很重。*选择器也可以用在孩子选择器中。#container * { border: 1px
CSS3选择器（全部）
GreenBark
10-16 9330
CSS3选择器再CSS2.1选择器的基础上增加了属性选择器、伪类选择器、过滤选择器，减少了对HTML类名或ID名的依赖，避免了对HTML结构的干扰，让编写代码更加轻松。 1，基本选择器 （1）标签选择器(类型选择器)             统一定义常用标签的基本样式。 ​ &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;...
JSoup全解析：CSS选择器详解与实战应用
本文档全面介绍了JavaScript库JSoup中的CSS选择器用法，是爬虫开发者不可或缺的参考资料。JSoup利用CSS选择器语法来定位和操作HTML文档中的元素，这对于处理网页抓取、数据提取和网页解析任务至关重要。 **CSS选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值