CSS选择器几种用法-详解

已于 2024-01-19 10:27:21 修改
阅读量1.1k 收藏 21
点赞数 27
分类专栏： 前端 文章标签： css tensorflow 前端
于 2024-01-18 10:00:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72210904/article/details/135665431
版权

目录

 

CSS选择器类型

一，基本选择器

1.ID选择器

2.标签选择器

3.类选择器

4.通用选择器

二，包含选择器

三，属性选择器

四，伪类选择器

:checked

:first-child

:last-child

:nth-child(n)

案例：实现表格隔行变色效果。

五，伪元素选择器

六，常见样式

基本语法

CSS选择器类型

在 CSS 中，对于元素的修饰是通过选择器来获取到的，它有很多选择器。

  • 基本选择器

  • 包含选择器

  • 属性选择器

  • 伪类选择器

一，基本选择器

基本选择器使用的频率是最高的，它分为以下几种：

  • ID选择器

  • 标签选择器

  • 类选择器

  • 通用选择器

1.ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style>
        #div1 {
            color: blueviolet;
        }
    </style>
</head>
<body>
<div id="div1">这是第一个块元素</div>
<div>这是第二个块元素</div>
</body>
</html>

ID 选择器的优先级是最高的，因为页面中的 ID 不能重复，即是唯一的。

2.标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        div {
            color: blueviolet;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="div1">这是第一个块元素</div>
<div>这是第二个块元素</div>
<span>这个span元素</span>
</body>
</html>

3.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .container {
            color: blueviolet;
            font-size: 18px;
        }
    </style>
</head>
<body>
<div>这是第一个块元素</div>
<div class="container">这是第二个块元素</div>
<span class="container">这个span元素</span>
</body>
</html>

注意：

  1. 使用类样式是通过 class 属性来指定的

  2. 在编写样式时，需要前面有个小圆点

4.通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用选择器</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            color: blueviolet;
        }
    </style>
</head>
<body>
<div>这是第一个块元素</div>
<div>这是第二个块元素</div>
<span>这个span元素</span>
</body>
</html>

通用选择器是使用 * 号来表示匹配所有的页面元素。padding 表示内边距，margin 表示外边距。

id，标签选择器的优先性大于类，和通用选择器

二，包含选择器

包含选择器又分为以下几种：

  • 子选择器：只能获取某个标签的第一级子元素 >

  • 后代选择器：能够获取某个标签的所有子元素 空格

  • 分组选择器：使用逗号选择器，还叫并列选择器。它可以设置多个标签 逗号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>包含选择器</title>
    <style>
        /* 子选择器 */
        /* div.list 交集选择器 */
        div.list > li { /* 子选择器的格式为：父选择器 > 子选择器 {} */
            color: blueviolet;
        }
​
        /* 后代选择器 */
        [div].list li { /* 后代选择器的语法：父选择器  子选择器 {} */
            background-color: aquamarine;
        }
​
        /* 分组选择器，也叫逗号选择器，也叫并列选择器 */
        .mylove, #myprogram, h1 {
            color: red;
        }
    </style>
</head>
<body>
<div id="first" class="mylove">这是一个 div 块元素</div>
<p id="myprogram">这是一个段落标签</p>
<div class="mylove mylove2">这也是一个 div 块元素</div>
<h1>这是标题</h1>
<hr>
<div class="list">
    <ul>
        <li>这是一个列表1</li>
        <li>这是一个列表2</li>
        <li>这是一个列表3</li>
        <li>这是一个列表4</li>
        <li>这是一个列表5</li>
        <li>这是一个列表6</li>
        <li>这是一个列表7</li>
        <li>这是一个列表8</li>
        <li>这是一个列表9</li>
        <li>这是一个列表10</li>
    </ul>
    <li>这是一个列表8</li>
    <li>这是一个列表9</li>
    <li>这是一个列表10</li>
</div>
</body>
</html>

三，属性选择器

        由于在 HTML 中标签的属性是很重要的元素，所以 CSS 中也提供了直接可以通过标签属性的方式来获取元素。属性选择是在使用过程需要使用到中括号（[]）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /* 需求1：获取页面中所有带有 class 属性的元素 */
        [class] {
            color: blueviolet;
        }
        /* 需求2：获取带有 class 属性，并且值为 container 的元素 */
        .container[class] {
            color: white;
            background-color: blue; 
        }
        /* 需求3：获取页面中所有 div 且带有 title 属性的元素 */
        div[title] {
            margin-top: 5px;
            margin-bottom: 5px;
            border: 1px solid #0000ff;
        }
        /* 需求4：获取页面中所有 input 元素且有 type 属性的，同时这个属性的值必须是 text 的所有元素  */
        input[type="text"] {
            color: red;
            border: 1px solid blue;
        }
        /* 需求5：获取所有 input 元素的 type 属性的值中包括字母 e 的所有元素 */
        input[type*='e'] {
            background-color: aquamarine;
        }
        /* 需求6：获取type属性的值中以字母 e 开头的所有元素 */
        input[type^='e'] {
            border: 1px dotted orange;
            outline: none;
        }
        /* 需求7：获取 type 属性的值中以 rl 结尾的所有元素 */
        input[type$='rl'] {
            color: brown;
        }
        /* 需求8：通过类样式为 msg 元素来获取它的下一个元素 p */
        div.msg + p {
            border: 1px solid #ff0000;
            background-color: orange;
        }
    </style>
</head>
<body>
<div class="container">这是一个容器</div>
<p>第一个段落</p>
<p>第二个段落</p>
<div title="这是标题">这是第二个容器</div>
<input type="text" name="company" value="西安鸥鹏">
<input type="url" name="url" value="www.xianoupeng.com">
<input type="email" name="email" value="li@xianoupeng.com">
<hr>
<div class="msg">这是个人信息</div>
<p id="msg2">第三个段落</p>
</body>
</html>

属性选择器说明：

  1. 要使用属性选择器，必须合适中括号

  2. 可以直接使用属性，也可以使用属性名="属性值" 的方式

  3. 还可以使用包含（*）、以什么开头（^）、以什么结尾（$）的方式来获取

  4. 加号表示某个元素之后紧跟着的第一个元素

四，伪类选择器

同一个标签，在不同的状态下，它就具有不同的样式，这就叫伪类样式。伪类选择器使用冒号来表示。

常见的状态主要有以下几种：

1）:link 超链接点击之前

2）:visited 超链接点击之后

3）:hover 鼠标悬停在某个标签上时

4）:active 鼠标点击某个标签时，但没有松开

5）:focus 某个标签获取焦点时的状

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /* 超链接点击之前的颜色 */
        a:link {
            color: orange;
        }
        /* 超链接点击之后的颜色 */
        a:visited {
            color: brown;
        }
        /* 鼠标移动到元素上的效果，注意不能移开鼠标 */
        a:hover {
            text-decoration: none;
        }
        /* 按住鼠标不松开的效果 */
        a:active {
            color: red;
        }
        /* 元素获取焦点的效果 */
        input[type]:focus {
            border: 1px solid #ff0000;
            outline: none;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="https://www.taobao.com" target="_blank">淘宝</a>
<br>
<input type="text" name="name">
</body>
</html>

在 CSS 中伪类选择器有很多。

选择器示例示例说明
:checkedinput:checked选择所有选中的表单元素
:disabledinput:disabled选择所有禁用的表单元素
:emptyp:empty选择所有没有子元素的p元素
:enabledinput:enabled选择所有启用的表单元素
:first-of-typep:first-of-type选择的每个 p 元素是其父元素的第一个 p 元素
:in-rangeinput:in-range选择元素指定范围内的值
:invalidinput:invalid选择所有无效的元素
:last-childp:last-child选择所有p元素的最后一个子元素
:last-of-typep:last-of-type选择每个p元素是其母元素的最后一个p元素
:not(selector):not(p)选择所有p以外的元素
:nth-child(n)p:nth-child(2|2n-1|odd|even)选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)p:nth-last-child(2)选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)p:nth-last-of-type(2)选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素
:only-of-typep:only-of-type选择所有仅有一个子元素为p的元素
:only-childp:only-child选择所有仅有一个子元素的p元素
:optionalinput:optional选择没有"required"的元素属性
:out-of-rangeinput:out-of-range选择指定范围以外的值的元素属性
:read-onlyinput:read-only选择只读属性的元素属性
:read-writeinput:read-write选择没有只读属性的元素属性
:requiredinput:required选择有"required"属性指定的元素属性
:rootroot选择文档的根元素
:target#news:target选择当前活动#news元素(点击URL包含锚的名字)
:validinput:valid选择所有有效值的属性
:linka:link选择所有未访问链接
:visiteda:visited选择所有访问过的链接
:activea:active选择正在活动链接
:hovera:hover把鼠标放在链接上的状态
:focusinput:focus选择元素输入后具有焦点
::first-letterp::first-letter选择每个p 元素的第一个字母
::first-linep::first-line选择每个p元素的第一行
::first-childp::first-child选择器匹配属于任意元素的第一个子元素的 <p> 元素
::beforep::before在每个p元素之前插入内容
::afterp::after在每个p元素之后插入内容
::sectionp::section被鼠标选中后的样式
:lang(language)p:lang(it)为p元素的lang属性选择一个开始值

:checked

这个伪类选择器，是用于获取所有选中的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>:checked选择器</title>
    <style>
        input:checked + label {
            color: red;
            background-color: orange;
        }
    </style>
</head>
<body>
<input type="radio" name="gender" checked="checked" value="男"> 男 <input type="radio" name="gender" value="女"> 女<br>
<input type="checkbox" name="hobby" id="hobby" value="看书" checked="checked"> <label for="hobby">看书</label>
<input type="checkbox" name="hobby" value="游戏"> <label for="hobby">游戏</label><br>
</body>
</html>

:first-child

选择器匹配属于任意元素的第一个子元素的 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>:first-child</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none; /*去掉小圆点*/
        }
        ul li {
            width: 200px;
            height: 25px;
            background-color: orange;
            margin-top: 2px;
            padding-left: 5px;
        }
        ul li:first-child {
            color: white;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

:last-child

选择所有指定元素的最后一个子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>:last-child</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none; /*去掉小圆点*/
        }
        ul li {
            width: 200px;
            height: 25px;
            background-color: orange;
            margin-top: 2px;
            padding-left: 5px;
        }
        ul li:last-child {
            color: white;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

:nth-child(n)

选择所有 p 元素的父元素的第二个子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>:nth-child</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none; /*去掉小圆点*/
        }
        ul li {
            width: 200px;
            height: 25px;
            background-color: orange;
            margin-top: 2px;
            padding-left: 5px;
        }
        /*
        ul li:first-child + li {
            color: white;
        }*/
        /* 奇数行为白色 */
        ul li:nth-child(odd) {
            color: white;
        }
        /* 偶数行为兰色 */
        ul li:nth-child(even) {
            color: blue;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

案例：实现表格隔行变色效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格隔行变色</title>
    <style>
        table {
            width: 500px;
            border-left: 1px solid #000000;
            border-top: 1px solid #000000;
            border-collapse: collapse;
        }
        td,th {
            border-right: 1px solid #000000;
            border-bottom: 1px solid #000000;
            text-align: center;
        }
        tr:nth-child(odd) {
            background-color: #cccccc;
        }
        tr:first-child {
            background-color: grey;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
    </tr>
    <tr>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
    </tr>
</table>
</body>
</html>

五，伪元素选择器

在 CSS3 中出现了伪元素选择器，我们常用的有两个：

  • ::before 它是在元素的内容之前添加前缀内容

  • ::after 它是在元素的内容之后添加后缀内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        div::before {
            content: '你好！';
        }
        div::after {
            content: '。';
        }
    </style>
</head>
<body>
<div class="container">这是内容</div>
</body>
</html>

六，常见样式

样式名称样式的值说明
font-family字体名称（如微软雅黑or Microsoft YaHei）文本字体
font-stylenormal、italic、oblique规定斜体文本
font-variantsmall-caps、normal小型大写字母
font-weightnormal、bold、bolder、数值文本的粗细
font-size默认大小是 16 像素 (16px=1em)，单位一般是px，也可以是其他文本的大小
text-indent所有元素的第一行都可以缩进一个给定的长度，该长度可以是负值软化文本内容
text-alignleft、right 、center、justify文本行间的对齐方式
word-spacing其默认值 normal 与设置值为 0 是一样的改变单词间隔
letter-spacing其默认值 normal 与设置值为 0 是一样的改变字（字母）间隔
text-transformnone、uppercase、lowercase、capitalize处理文本的大小写
text-decorationnone、underline、overline、line-through、blink文本装饰
white-spacenormal、pre-line、nowrap、pre、pre-wrap空格换行和tab 处理
color#十六进制三原色、颜色单词、rgb函数、rgba函数文本颜色
direction默认ltr、rtl、inherit文本的方向
line-heightnormal、数值、%等行高
text-shadowh1 { text-shadow: 5px 5px 5px #FF0000; }文本阴影效果
box-shadowdiv{ text-shadow: 5px 5px 5px #FF0000; }盒子阴影效果
list-style-typedisc、circle、square、decimal、lower-roman、lower-latin列表的样式
list-style-imageurl函数引入图片列表图标
list-style-positioninside、outside、inherit何处放置列表项标记
list-stylelist-style:square inside url('imgs/point.png');统一设置列表样式
outlinep { outline:#00FF00 dotted thick; }轮廓线
outline-offset数值轮廓和元素的距离
outline-color#十六进制三原色、颜色单词、rgb函数、rgba函数轮廓颜色
outline-styledotted、solid、dashed、double等轮廓样式
outline-widththin（细）、medium（默认）、thick（粗）、数值轮廓的宽度
border-imagediv { border-image:url(border.png) 30 30 round;}使用图片来创建边框
opacity0~1之间的数值，0表示全透明，1表示不透明透明度
width数值元素的宽度
height数值元素的高度
max-height数值最大高度
max-width数值最大宽度
min-height数值最小高度
min-width数值最小高度
margin{margin: 0px; margin: 10px 20px; margin: 10px 20px 30px 0px; margin: auto;}外边距
margin-left数值左外边距
margin-right数值右外边距
margin-top数值上外边距
margin-bottom数值下外边距
padding{padding: 0px; padding: 10px 20px; padding: 10px 20px 30px 0px; }内边距
padding-xx和margin一致也有四个
borderborder: 1px solid red;边线
border-width数值边线粗细
border-styledotted、dashed、solid、double边线样式
border-color#十六进制三原色、颜色单词、rgb函数、rgba函数颜色
border-xx-xxborder-top-width: 15px样式、颜色、粗细
border-radiusdiv { border:2px solid; border-radius:25px; }，数值或者百分比边线的弧度
background{ background: #00FF00 url(bgimage.gif) no-repeat fixed top; }背景综合写法
background-color#十六进制三原色、颜色单词、rgb函数、rgba函数背景颜色
background-positiontop left 这种单词对 或者 坐标位置（x,y）或者 x%, y%背景位置
background-sizebackground-size:80px 60px;| cover背景图像的尺寸
background-repeatrepeat、repeat-x、repeat-y、no-repeat背景图像重复
background-imageurl函数引入图片背景图片
background-attachment默认scroll、fixed背景图像是否固定或者随页面的滚动
visibilityvisible、hidden元素是否可见
displaynone、block、inline、inline-block、list-item元素类型转换、可见性
positionstatic、relative、absolute、fixed元素定位
z-index数值，默认0表示z轴的优先级
vertical-alignbaseline、sub、super、top、text-top、middle、text-bottom元素的垂直对齐方式
overflowvisible、hidden、scroll、auto溢出元素框时处理
clearleft、right、both、none清除浮动
floatleft、right、none元素在哪个方向浮动
resizenone、both、horizontal、vertical规定是否调整元素尺寸
box-sizingcontent-box、border-box容器尺寸计算方式
filteropacity()、url()、blur()、grayscale()、brightness()等函数设置页面的滤镜

基本语法

CSS的样式编写的基本语法如下：

选择器 {
    属性: 属性值;
    属性: 属性值;
    ......
}

注意：每一个属性值后要用分号结束，属性与属性值之间用英文冒号分隔。

坚持@success
关注
  • 27
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS的几种选择器
brokyz
06-24 230
标签选择器可以把一类标签全部选择出来，能快速为同类标签统一设置样式，但是无法做出差异化设置。 类选择器 可以给需要修改样式的标签指定class值，通过类选择器将其选择出来，进行样式修改 类选择器可以进行多类名使用，多类名在标签以空格隔开 id选择器 通过给标签指定id来，进行选择，与类选择器有相似处，但是id选择器只能选择一次，不能被选择第二次，是一次性的。 通配符选择器 选取页面中的所有元素标签。 复合选择器 复合选择器是建立在基础选择器之上的，对基本选择器进行组合形成的。选择外层标签里面的所有内层标签。
CSS多种选择器
k157507281的博客
08-01 410
CSS选择器：就是给CSS指定要作用的标签，那个标签就是CSS选择器。 文章目录ID选择器：以 "#" 来定义标签选择器 ：选择器的名字就是HTML页面的标签类选择器：使用 . 为标识 CSS分为基本选择器和扩展选择器。 基本选择器： ID选择器（ID selector，IS）： 可以为标有特定 id 的 HTML 元素指定特定的样式 标签选择器（element selector，ES）： 以 ...
CSS选择器种类及使用方法
whiteGay的博客
10-16 556
css选择器 有通配符选择器书写格式：*+｛声名块｝ 并集选择器/组合选择器 书写格式;元素或类或id+“”+元素或类或id+“，”+元素或类或id｛声明块｝ 列：h1，h2，h3｛color：red...
css的用法与选择器用法
weixin_45875361的博客
04-11 67
* opacity 0-1 设置透明度的 */<link rel="stylesheet" href="css路径">/* 不建议进行连写 顺序不能乱 */background-attachment：控制背景图是否滚动。/* rgba:设置透明度的 *//* cursor鼠标样式 */[type$="h"]选择type属性值以h结尾元素。background-image：url（）引入图片。创建一个伪元素，作为已选中元素的最后一个子元素。background-position：定位。
css都有哪些选择器怎么使用
最新发布
codedadi的博客
05-19 611
实际上，CSS 还提供了许多其他选择器，如组合选择器（如逗号分隔的选择器组、后代选择器、子选择器、相邻兄弟选择器和一般兄弟选择器）等。* `:last-child`、`:nth-child()`、`:nth-last-child()` 等也是常见的伪类选择器。在 HTML 中，你可以这样使用它：<div id="myID">这是一个 ID 为 myID 的 div。CSS 选择器是用于选择你想要样式化的 HTML 元素的模式。这将选择所有的 <p> 元素，并将它们的文本颜色设置为红色。
CSS的选择器(超详细)
热门推荐
前端开发,HTML5,css3,JavaScript,node.js,vue
11-21 7万+
一、常用的选择器 1.元素选择器 2.类选择器(class选择器) 3.id选择器 4.通配符选择器 二、群组选择器 三、关系选择器 1.后代选择器 2.子代选择器 3.相邻兄弟选择器 4.通用兄弟选择器 5.案例 四、属性选择器 五、伪类选择器 1.常用的伪类选择器 2.否定伪类 3.元素的伪类 六、伪元素选择器
CSS选择器分类大全
m0_67859656的博客
11-05 6289
CSS选择器分类大全 基础选择器 一、基础选择器 二、复合选择器 三、CSS3选择器补充： （一）层级选择器： （二）属性选择器 （三）伪类选择器
学习Qss--选择器
hw5230的博客
06-17 2069
Qt是一个跨平台的C++应用程序开发框架，提供了丰富的GUI和应用程序开发工具。Qt的OpenGL模块可以让开发者在Qt应用程序中轻松地使用OpenGL进行硬件加速的图形渲染。C++ Qt开发中的QSS（Qt样式表）是一种强大而灵活的定制Qt应用程序外观的方式。QSS允许开发人员使用类似CSS的语法来定义应用程序中UI元素的视觉样式。QSS可用于更改小部件（例如按钮，标签和文本框）的字体，颜色，间距，背景图像和其他属性。它还可以用于为特定小部件甚至整个应用程序创建自定义样式。
CSS6大种选择器(超详细!!!!!!)
weixin_52682014的博客
11-05 2万+
注意：1.所有的标签上都有class属性，class属性的属性值成为类名（类似于起了一个名）/* 选择属性名为title和属性值以ab结尾的元素，设置字体为30px *//* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 *//*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 *//* 选择属性名为title和属性值含有c的元素，设置背景色为绿色 */语法：[属性值*=属性名]{} */作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式。
详解CSS 去掉inline-block元素间隙的几种方法
09-22
需要注意的是，不同的解决方案可能对不同浏览器的兼容性有不同的影响，因此在选择方法时应充分考虑目标用户群体所使用的浏览器类型。 总结，理解inline-block元素的间隙来源是解决问题的关键。通过删除空白字符、...
jQuery选择器用法实例详解
11-24
使用 CSS 和 XPath 选择器选择的方法有许多种用法，关于详细的 CSS 选择器可参考本站相关文章。 首先来看通过元素的 ID 取得元素：$( “#id” )，在名字前面增加 # 表示这是一个 id，注意引号不要丢掉。 在页面中...
详解CSS中的选择器优先级及样式层叠问题解决
09-24
首先，我们需要了解CSS选择器的优先级计算规则，它由四个级别组成： 1. ID选择器（如`#id`）：每个ID选择器的权值为100。 2. 类选择器、属性选择器或伪类（如`.class`，`[attr]`，`:hover`）：每个此类选择器的权值...
用css截取字符的几种方法详解(css排版隐藏溢出文本).pdf
11-27
本文将详细介绍两种常见的CSS方法来实现文本截取。 **方法一：使用`overflow`、`text-overflow`和`white-space`** 这种方法适用于需要在固定宽度内展示任意HTML元素的情况，包括超链接和图片。下面的代码示例展示...
AngularJS中关于ng-class指令的几种实现方式详解
10-21
本文将详细解析三种使用`ng-class`的方法。 **第一种：通过数据的双向绑定** 这种方式是直接将控制器中的变量绑定到`ng-class`中。尽管这种方式在某些情况下可能显得直接且方便，但不被广泛推荐。示例如下： ```...
CSS 选择器的种类有哪些？怎么用？
黑马程序员官方博客
12-09 9088
CSS 选择器的种类有哪些？怎么用？CSS 选择器的种类有标签选择器、类选择器、层级选择器(后代选择器)、id选择器、组选择器、伪类选择器，作为程序员应该具备根据不同的场景选择适合的CSS选择器。 CSS 选择器学习目标：熟悉掌握CSS 选择器的种类。 1、CSS 选择器是什么？ CSS 选择器是用来选择标签的，选出来以后给标签加样式。 2、CSS 选择器的种类有哪些？ 六种CSS 选择器：标签选择器、类选择器、层级选择器(后代选择器)、id选择器、组选择器、伪类选择器 3、标签选择器 根据标签来选择标签，
选择器的使用
2301_77661976的博客
10-15 42
【代码】选择器的使用。
前端——CSS选择器的常见用法详解
xh1605004242的博客
05-14 3150
CSS选择器的常见用法
CSS中的常见选择器
Java 技术专栏，从入门到精通，熟悉企业级开发
03-09 2570
本文介绍了CSS中的常见选择器，选择器的出现可以让我们实现对具体的元素标签进行定制，因此我们要掌握好各类选择器的使用。
html通用选择器怎么用,通用选择器
weixin_42303803的博客
06-03 555
通用选择器通用选择器的一个常见用法。为了保证作出的页面能兼容多种浏览器，需要对HTML内的所有标签进行重置，将以下代码加到CSS文件的顶端：* { margin: 0; padding: 0; }这是因为每种浏览器都自带有CSS文件，若一个页面在浏览器加载完页面后没有发现CSS文件，则浏览器会自动调用自身所带的CSS文件，但不同的浏览器所带的CSS文件又都不一样，对不同的标签定义的样式也不同，故若...
css选择器nth-last-child
08-11
:nth-last-child() 是一个 CSS 伪类选择器，用于选择父元素下的倒数第 n 个子元素。它的语法如下： ```css :nth-last-child(n) ``` 其中，n 是一个整数，表示要选择的倒数第几个子元素。 举个例子，如果我们有一个父元素包含 6 个子元素，我们可以使用 :nth-last-child(2) 来选中倒数第二个子元素。 ```css .parent div:nth-last-child(2) { /* 样式 */ } ``` 在上述示例中，只有倒数第二个子元素会应用样式。 还可以通过使用关键字来选择特定的子元素。例如，:nth-last-child(odd) 选择倒数第奇数个子元素，:nth-last-child(even) 选择倒数第偶数个子元素。 希望这能帮助到你！如果你有任何其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值