2.8学习CSS选择器总结

最新推荐文章于 2024-10-12 12:26:23 发布
最新推荐文章于 2024-10-12 12:26:23 发布
阅读量468 收藏
点赞数
文章标签： 学习 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45255560/article/details/128937560
版权

目录

基本选择器

CSS 元素选择器

CSS id 选择器

CSS 类选择器

 CSS 通用选择器

优先级

层次选择器

结构选择器

选择器1 选择器2:first-child

选择器1 选择器2:first-of-type

选择器1 选择器2:last-child

选择器1>选择器2:last-of-type

选择器1 选择器2:last-of-type

选择器1 选择器2:nth-child(num)

选择器1>选择器2:nth-child(num)

选择器1>选择器2:nth-of-type(num)

选择器:not(条件)

基本选择器

CSS 元素选择器

        元素选择器根据元素名称来选择 HTML 元素。

CSS id 选择器

        id 选择器使用 HTML 元素的 id 属性来选择特定元素。注意：id 名称不能以数字开头。

        元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

        要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

CSS 类选择器

        类选择器选择有特定 class 属性的 HTML 元素。

        如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

        注意：类名不能以数字开头！

 CSS 通用选择器

        通用选择器（*）选择页面上的所有的 HTML 元素。

!important:是最高级别的，后面是不可修改，一般情况下，不推荐使用!important关键字提升优先级

优先级

      !important>行内样式>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>
        /* id选择器 */
        #para1{
                color:red;
                font-size: 20px;
        }
        /* 类选择器 */
        .test1{
            color: aqua;
        }
        /* 元素/标签 选择器 */
        h1{
            color: blue;
            font-size: 20px;
        }
        /* 通用选择器 */
        *{
            background-color: bisque;
            font-size: 50px !important; /* !important优先级最高，优先显示该属性 */
        }
    </style>
</head>
<body>
    <h1>标题111</h1>
    <p id="para1">段落111</p>
    <p class="test1">段落222</p>
    <p style="color: burlywood; font-size: 100px;">段落3 我是内联样式</p><!-- 内联样式 -->
</body>
</html>

层次选择器

        后代:标签1 标签2 {} ===> 选中标签1里面的标签2

        子代:标签1>标签2 {} ===> 选中标签1中的子代标签2

        注：后代可以包含子代，子代只能是父元素的第一层

        元素1+元素2 ===> 选中元素1后面第一个相邻的兄弟元素

        元素1~元素2 ===> 选中元素1后面所有的兄弟元素2

<!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{
            font-size: 50px;
        }
        /* 子代 */
        li>a{
            color: antiquewhite;
        }
        /* 类名为two的后代后面第一个相邻的li */
        .two+li{
            color: blue;
        }
        /* 类名为two后面的所有的兄弟元素li */
        .two~li{
            background-color: pink;
        }
    </style>
</head>
<body>
    <ul>
        
        <li><a href="">第1行</a></li>
        <li class="two">第2行</li>
        <li>第3行</li>
        <li>第4行</li>
    </ul>
    
</body>
</html>

结构选择器

选择器1 选择器2:first-child

===>在选择器1中选择第一个元素，并且该元素与选择器2选中的元素相同

         若不同，则设置的属性值无效

<!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-child{
            color: pink;
        }
    </style>
</head>
<body>
    <!-- 选择器1 选择器2:first-child===>在选择器1中选择第一个元素，并且该元素与选择器2选中的元素相同
            若不同，则设置的属性值无效
    -->
    <ul>
        <h1>我是第一个子元素，我不是li元素，用ul li:first-child{
            color: pink;}无效，我不会变粉</h1>
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
    </ul>
    
</body>
</html>

选择器1 选择器2:first-of-type

===》在选择器1中选中所有的同级别的选择器2选中的元素，再找第一个出现的元素2

<!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>
        /* 选择器1 选择器2:first-of-type=》在选择器1中选中所有的同级别的选择器2选中的元素，再找第一个出现的元素2 */
    ul li:first-of-type{
        color: aqua;
    }
    </style>
</head>
<body>
    <ul> 
        <h1>111</h1>
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
    </ul> 
</body>
</html>

选择器1 选择器2:last-child

===》在选择器1中选择最后一个元素，并且该元素与选择器2选中的元素相同

选择器1>选择器2:last-of-type

=》在选择器1的子元素中选中和选择器2一样的元素，再找最后一个出现的元素

选择器1 选择器2:last-of-type

=》在选择器1的后代元素中选中和选择器2一样的元素，并在每代中再找最后一个出现的和选择器2一样的元素元素

<!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>
    /* 选择器1>选择器2:last-of-type=》在选择器1的子元素中选中和选择器2一样的元素，再找最后一个出现的元素 */
    ul>li:last-of-type{
        color: aqua;
    }
    /* 选择器1 选择器2:last-of-type=》在选择器1的后代元素中选中和选择器2一样的元素，并在每代中再找最后一个出现的和选择器2一样的元素元素 */
    ul li:last-of-type{
        background-color: blue;
    }
    </style>
</head>
<body>
    <ul>
        <li>第1个</li>
        <li>第2个
            <ol>
                <li>我是li里的li</li>
                <li>我是li里的li</li>
                <li>我是li里的li</li>
            </ol>
        </li>
        <li>第3个</li>
        <li>第4个</li>
    </ul>
</body>
</html>

选择器1 选择器2:nth-child(num)

=>在选择器1每一代后代中选择第num个元素，并且该元素与选择器2选中的元素相同

选择器1>选择器2:nth-child(num)

=>在选择器1中选择第num个元素，并且该元素与选择器2选中的元素相同

<!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>
    /* 选择器1>选择器2:nth-child(num)=>在选择器1每一代后代中选择第num个元素，并且该元素与选择器2选中的元素相同 */
        ul li:nth-child(2){
        color: aqua;
    }
    </style>
    
</head>
<body>
    <ul>
        <h1>1111</h1>
        <li>第1个</li>
        <li>第2个
            <ol>
                <li>我是li里的li</li>
                <li>我是li里的li</li>
                <li>我是li里的li</li>
            </ol>
        </li>
        <li>第3个</li>
        <li>第4个</li>
    </ul>
</body>
</html>

选择器1>选择器2:nth-of-type(num)

=>在选择器1每一代后代中选择第num个元素，并且该元素与选择器2选中的元素相同

<!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>
        /* 选择器1>选择器2:nth-of-type(num)=>在选择器1后代中选择与选择器2选中的元素相同的第num个元素*/
        ul>li:nth-of-type(2){
            color: aquamarine;
        }
        /* 选择器1>选择器2:nth-child(num)=>在选择器1中选择第num个元素，并且该元素与选择器2选中的元素相同 */
        ul>li:nth-child(2){
            font-size: 50px;
            background-color: chartreuse;
    }
    </style>
</head>
<body>
    <ul>
        <h1>1111</h1>
        <li>第1个</li>
        <li>第2个
            <ol>
                <li>我是li里的li</li>
                <li>我是li里的li</li>
                <li>我是li里的li</li>
            </ol>
        </li>
        <li>第3个</li>
        <li>第4个</li>
    </ul>
</body>
</html>

选择器:not(条件)

=》除了符合条件的选择器选中的其他元素

对月亮动过心
关注
CSS小技能:常用样式属性、选择器分类、盒子模型
iOS逆向与安全
08-12 708
CSS(cascading style sheets,层叠式样式表)是一种用来表现HTML 或XML 等文件样式的计算机语言,CSS文档以.css作为后缀 。CSS的作用：设置HTML页面的布局和样式 CSS的语法： 1.1 HTML中引入CSS的方式 外部样式，link标签将外部样式表链接到页面。 内部样式是指放在 HTML 文件标签里的 内联样式表存在于 HTML 元素的 style 属性之中，每个 CSS 表只影响一个元素。 1.2 选择器 选择器的优先级排序:例子：+～结合filt
HTML、CSS知识总结
xzc1453的博客
09-04 603
HTML、CSS知识总结
CSS选择器学习小结
weixin_33881050的博客
01-12 191
前言： 半途出家做Front End，以前只是大概知道点，现在就必须从头把css好好看看啦，呜呜~~~~~~ 一、基本选择器 序号 选择器 含义 1. * 通用元素选择器，匹配任何元素 2. E 标签选择器，匹配所有使用E标签的元素 3. .info class选择器，匹配所有class属性中包含info的元素 4. #f...
CSS选择器学习总结
qq_45996378的博客
04-13 322
目录 简单选择器 组合器选择器 伪类选择器 伪元素选择器 属性选择器 （菜鸟CSS选择器参考手册：https://www.runoob.com/cssref/css-selectors.html） 简单选择器 id选择器->#id名 {} 类选择器->.类(class)名 {} 元素选择器->元素名 {} 嵌套->.类名 元素名 {} （.aaa a {} 所有class="aaa"的元素中a元素） 元素名 .类名 {} （a .aaa {...
对CSS选择器的一些学习总结
我的博客
12-17 408
1.选择器的分组和继承 分组 你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h3,h4,h5,h6 { color: green; } 继承 根据 CSS，子元素从父元素继承属性。但是当你不希望子元素继承父元素的属性时该怎么做呢？例如，在下方代码片段中...
css选择器学习总结
hurricane_li的博客
03-03 301
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; &a
2.8css3 新特性；结构伪类、伪元素选择器 过渡
weixin_65223633的博客
01-23 475
HTML5新特性 HTML5新增的语义化标签： <header>：头部标签 <nav> ：导航栏标签 <article>： 内容标签 <section>：定义文档某个区域 <aside>： 侧边栏标签 <footer>：尾部标签 注意： 语义化标签主要是针对搜索引擎的 新标签在页面中可以使用多次 在IE9中，需要把这些元素转换为块级元素 移动端更喜欢使用这些标签 HTML5新增多媒体标签： 2....
CSS3选择器
weixin_47782618的博客
04-06 486
1. 关系选择器 1.1 后代选择器 ① 定义：选择所有被A元素包含的B元素，连接符号是空格 ② 语法：A B{} <head> <style> div p{ color:red; } </style> <head> <body> <p>黑色的</p> <div> <p>红色的</p> <p&g
CSS选择器-使用方法及规范
解启超
02-18 767
前端基础.CSS基础选择器 CSS选择器（重点） 学习目标： 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用基础选择器给页面元素添加样式 1. CSS选择器作用（重点） 如上图所以，要把里面的小黄人分为2组，最快的方法怎办？ 很多， 比如 一只眼睛的一组，剩下的一组 选择器的作用 ​ 找到特定的HTML页面元素 启超老师一句话说出他们： ※※※※ **CS...
2.8css选择器学习总结
m0_57282850的博客
02-08 253
css选择器
html+css学习心得
weixin_45376650的博客
07-14 4507
最近一周在学习html+css的知识，总结一下学习心得。 1、css选择器 在网页样式设计时，有三种方法：行内样式，内部样式，外部样式。 一般采用的是外部样式，它利于维护，方便复用，也实现了网页内容与样式分离。 在优先级上，行内样式>内部样式>外部样式 所以选择器在设计样式时，显得非常重要。以下是几种常用选择器： 1.class选择器 .className{} 2.id选择器...
第二天CSS学习心得
qq_44467405的博客
02-15 556
今日知识点： 1、css基础选择器优先级 2、css文本相关属性 3、css选择器进阶（6个） 4、盒模型 初识CSS 学习目标 能够说出什么是CSS 熟悉CSS的语法规范 掌握CSS的三种引入方式，能够使用3种引入方式写一个红色的小方块 什么是CSS? 全称 Cascading Style Sheets 通常称为CSS样式表或层叠样式表（级联样式表） 作用 为HTML标记语言提供了一种样式描述 即【设置HTML页面中的元素的位置、排版、样式外观等】 如文本内容（字体、大小、对齐方式等）、图片的外形（
关于我学习css的感悟和心得
dou_ding91的博客
12-02 1420
首先谈一谈我学到的知识吧，我会做个总结罗列出来。 1.css的基础了解 可以使用更方便和多样的总标签来对代码进行改变。 2.标签选择器 对一个指定的标签有效，也是最基础的，后面的都是再此之上添加的。同时这个指令适用于选中的所以标签，不管有多少和多深。 3.ID选择器 对特定的标签进行命令和改变。 4.类选择器 也是对特定的标签进行改变，只是方式上有所不同。 5.后代和子选择器 后代选择器是对一个标签的所以个体都生效，子代则是只对下一代生效的指令。 ...
初步学习Css的心得体会
zjt200013的博客
07-12 1439
Css全称为Cascading Style Sheets，它是层叠样式表，是描述标记语言页面格式的标准/语言。主要用于描述网页的表示，即布局和格式。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。...
CSS学习总结与心得体会
m0_49305575的博客
07-11 6607
CSS的学习总结与心得体会 CSS又称为层叠样式表，学习CSS就是学习许多选择器以及属性。CSS的主要作用是对前端页面进行布局与美化。 布局 盒子模型 块级元素并排显示 盒子模型 盒子模型是对页面进行布局所需要使用的非常重要的一部分。盒子模型本质上就是一个盒子，它包括边距（margin）、边框（border）、填充（padding）、内容（content）、背景（backbround），下面对每一部分进行简单的说明。 margin(外边距)：清除边框外的区域，外边距是透明的； border(边框)：
CSS选择器学习小结 (css基本选择器 + 组合选择器 + :nth-child()高级选择器)
kilig_CSM的博客
05-26 4032
css基本选择器: 通用选择器: 格式: *{ x:y } 元素选择器: 格式: 指定元素:{ x:y } 样例: div{ x:y } id选择器: 格式: #id{ x:y } class类选择器: 格式: .class属性值{ x:y } 分组选择器: 将选择器1,2,3的内容都选中. 格式: 选择器1,选择器2,选择器3{ x:y } 基本选择器的权重: css组合选择器: 后代选择器: 格式: 选择器1 子元素{..
CSS选择器小结（python使用css方式定位）
热门推荐
lynnpaul的博客
04-11 1万+
学习Python写爬虫的时候，遇到css定位问题，故小结一下css选择器定位的方式通配符选择器：* {color:red;}CSS 类选择器匹配所有class = ‘important’*.important {color:red;}去掉前面通配符也是一样的。结合元素选择器匹配所有p标签下class = ‘important’p.important {color:red;}CSS 多类选择器匹配c...
【人工智能学习之PaddleOCR快速上手】
最新发布
Jiagym的博客
10-12 1168
在配置文件中，可以设置组建模型、优化器、损失函数、模型前后处理的参数，PaddleOCR从配置文件中读取到这些参数，进而组建出完整的训练流程，完成模型训练，在需要对模型进行优化的时，可以通过修改配置文件中的参数完成配置，使用简单且方便修改。而 L2 正则化中，添加正则化项的目的在于减少参数平方的总和。准确检测的标准是检测框与标注框的IOU大于某个阈值，正确识别的检测框中的文本与标注的文本相同。如果缺少带标注的数据，或者不想投入研发成本，建议直接调用开放的API，开放的API覆盖了目前比较常见的一些垂类。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值