CSS选择器详解

最新推荐文章于 2023-08-04 11:11:48 发布
最新推荐文章于 2023-08-04 11:11:48 发布
阅读量1.5k 收藏 7
点赞数 2
分类专栏： H5+CSS3 文章标签： CSS选择器 css3 css w3c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Panda_m/article/details/49976617
版权

CSS选择器详解

选择器是CSS的核心，从最初的CSS版本到现在的CSS3，选择器的发展变化使得定位页面内的某个元素的方式越来越简单和多样化。
需要查找某个选择器讲解的直接在目录里选择，由于伪类比较多而且这篇略长，伪类将重新单独一篇~

元素选择器（W3C标准中又称类型选择器）

选择文档树中的元素。
e.g.
HTML:

<body>
    <p>this is an example</p>
</body>

CSS:

p{
    font-size: 50px;
    color: red;
}

效果：
这里写图片描述

派生选择器

依据元素在其位置的上下文关系来选择

后代选择器

在后代选择器中，样式左边的选择器一端包括两个或多个用空格隔开的选择器，他们之间的空格是结合符。
e.g.
HTML：

<body>
    <ul>
        <li>
            <div>li的div</div>
        </li>
        <li>
            <div>li的div</div>
        </li>
        <li>
            <div><div>li的div的div</div></div>
        </li>
        <li><p>li的p</p></li>
        <li><a><div>li的a的div</div></a></li>
    </ul>
</body>

CSS:

li div{
    font-size: 50px;
    color: red;
}

效果：
这里写图片描述

e.g.2
HTML如上
CSS：

li a div{
    font-size: 50px;
    color: red;
}

效果：
这里写图片描述

1、必须从左往右读选择器
2、后代选择器的意思是选择该元素所有的后代元素，该元素和后代元素之间的层次间隔可以是无限的。也就是说，只要是它的后代，无论隔了多少层，都会被选出来。

子元素选择器

子元素选择器只选择某元素的子元素。
e.g.
HTML:

<body>
    <ul>
        <li>
            <div>li的div</div>
        </li>
        <li>
            <div>li的div</div>
        </li>
        <li><p>li的p</p></li>
        <li><a><div>li的a的div</div></a></li>
    </ul>
</body>

CSS:

li > div{
    font-size: 50px;
    color: red;
}

效果：
这里写图片描述
其中的“>”是子结合符，两边可以有空格

相邻兄弟选择器

选择紧邻在一个元素后的元素，他俩具有相同的父元素
e.g.
HTML：

<body>
    <h1>我是h1</h1>
    <p>我是h1后面紧邻的p</p>
    <p>我和h1中间隔了一个p</p>
</body>

CSS:

h1 + p{
    color: blue;
}

效果：
这里写图片描述
其中的“+”是相邻兄弟结合符，两边可以有空格

一般兄弟选择器

选择在某元素后的所有和它有着同一个父元素的元素
e.g.
HTML:

<body>
    <h1>我是h1</h1>
    <p>我是h1后面紧邻的p</p>
    <p>我和h1中间隔了一个p</p>
    <div><p>我是div里的p</p></div>
    <p>我是最后一个p</p>
</body>

CSS:

h1 ~ p{
    color: blue;
}

效果：
这里写图片描述
其中的“~”是一般兄弟结合符

类选择器

语法：

.类名{
styles
}
或
*.类名{ styles }
通配符*可以省略
可以结合元素选择器使用
匹配class属性中包含指定值的所有元素
e.g.
HTML：

<body>
    <h1 class="cls1">我是h1</h1>
    <p  class="cls1">我是h1后面紧邻的p</p>
    <p>我和h1中间隔了一个p</p>
    <div><p  class="cls1">我是div里的p</p></div>
    <p>我是最后一个p</p>
</body>

CSS :

.cls1{
    color: blue;
}

效果：
这里写图片描述

e.g.2
CSS：

p.cls1{
    color: blue;
}

效果：
这里写图片描述

多类选择器

仅可以选择同时包含这些类名的元素，类名的顺序不变
e.g.
HTML：

<body>
    <h1 class="cls2 cls1">我是h1</h1>
    <p  class="cls1">我是h1后面紧邻的p</p>
    <p>我和h1中间隔了一个p</p>
    <div><p  class="cls1 cls2">我是div里的p</p></div>
    <p>我是最后一个p</p>
</body>

CSS:

.cls1.cls2{
    color: blue;
}

效果：
这里写图片描述

重要：IE7之前版本的IE浏览器不能正确处理多类选择器

ID选择器

语法：

#ID名{ styles }
或
*#ID名{ styles }  *通配符选择器可省略

e.g.
HTML：

<body>
    <h1 >我是h1</h1>
    <p id="id1" >我有id1</p>
    <p>我和h1中间隔了一个p</p>
    <div><p>我是div里的p</p></div>
    <p>我是最后一个p</p>
</body>

CSS:

#id1{
    color: blue;
}

效果：
这里写图片描述
类选择器与ID选择器的区别：

  • 一个ID在一个HTML文档中只能使用一次
  • ID选择器不能结合使用，因为ID的属性值中不允许有用空格分隔的词列表

  • ID可以包含更多的含义(如下)

    类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。

    类与ID选择器是否区分大小写取决于文档的语言，在HTML和XHTML中，ID和类被定义为区分大小写

属性选择器

根据元素的属性及其属性值来选择元素

简单属性选择器

语法：
*[属性名] { 样式 }
e.g.
HTML：

<body>
    <h1>我是h1</h1>
    <a href="#" title="tt1">我有title tt1</a>
    <p title="tt1">我也有title tt1</p>
</body>

CSS:

[title]{
    color: blue;
    /*选择包含有title这个属性的所有元素*/
}

效果：
这里写图片描述
e.g.2
HTML：

<body>
    <h1>我是h1</h1>
    <a href="#" title="tt1">我是a有href</a>
    <p title="tt1">我也有title tt1</p>
    <a>我是a没有href</a>
</body>

CSS:

a[href]{
        color: blue;
}
/*选择有href的a元素*/

效果：
这里写图片描述
e.g.3
HTML：

<body>
    <h1>我是h1</h1>
    <a href="#" title="tt1">我是a有href有title</a>
    <p title="tt1">我也有title tt1</p>
    <a href="">我是a有href没title</a>
</body>

CSS:

a[href][title]{
    color: red;
}
/*选择同时有href和title属性的a元素*/

效果：
这里写图片描述

根据具体属性值选择

e.g.
HTML

<body>
    <h1>我是h1</h1>
    <a href="#" title="tt1">我是a有href有title=tt1</a>
    <p title="tt1">我不是a,也有title tt1</p>
    <a >我是a没title</a>
</body>

CSS:

a[title='tt1']{
    color: red;
}

效果：
这里写图片描述

p.s.具体属性值这种格式要求属性值必须完全匹配才能选出来
e.g.
HTML：

<body>
    <p class="class1 class2">我的属性是 class="class1 class2"</p>
    <p class="class2 class1">我的属性是 class="class2 class1"</p>
    <p class="class1">我的属性是 class="class1"</p>
</body>

CSS:

p[class='class1 class2']{
    color: pink;
}

效果：
这里写图片描述

根据多个属性值选择

也就是把多个属性-值选择器链接在一起使用
e.g.
HTML:

<body>
    <a href="123" title="a1">我是a， href="123" title="a1"</a>
    <br/>
    <a href="1234" title="a1">我是a， href="1234" title="a1"</a>
</body>

CSS:

a[href='123'][title='a1']{
    color: pink;
}

效果：
这里写图片描述

根据部分属性值选择

若需要根据属性值的词列表中的某个词（是完整的一个词）进行选择，则需使用“~”
e.g.
HTML ：

<body>
    <p class="class1 class2">我的属性是 class="class1 class2"</p>
    <p class="class2 class1">我的属性是 class="class2 class1"</p>
    <p class="class1">我的属性是 class="class1"</p>
</body>

CSS:

p[class~='class1']{
    color: pink;
}

效果：
这里写图片描述

子串匹配属性选择器

  • [attr^=’value’]：attr属性值以”value”开头的所有元素（必须是整个属性值列表里第一个词的开头）
    e.g.
    html： 
<body>
    <p class="class1 class2">我的属性是 class="class1 class2"</p>
    <p class="po class2 class1">我的属性是 class="class2 class1"</p>
    <p class="class1">我的属性是 class="class1"</p>
</body>

CSS:

p[class^='cla']{
    color: pink;
}

效果：
这里写图片描述

  • [attr$=’value’]：attr属性值以”value”结尾的所有元素（必须是整个属性值列表里最后一个词的结尾）

  • [attr*=’value’]：attr属性值中包含子串”value”的所有元素

    特定属性选择器

    常见的用途是匹配语言值，以方便为不同的语言的文字添加样式
    （以下示例中的语言值是瞎编的）
    e.g.
    HTML：

 <body>
    <p lang="en-ut">我的lang="en-ut"</p>
    <p lang="en ut">我的lang="en ut"</p>
    <p lang="ent-ut">我的lang="ent-ut"</p>
    <p lang="en-fra">我的lang="en-fra"</p>
</body>

CSS:

p[lang|='en']{
    color: pink;
}
/*选择带有以“en”开头的lang属性的元素*/
/*[attr|=value]  value必须是整个单词*/

效果：
这里写图片描述

伪元素

语法：

选择器:伪元素 { 样式 }

为了与伪类区分，常使用下面的形式：

选择器::伪元素 { 样式 }

::first-line伪元素

用于向文本的首行设置样式
e.g.
HTML：

<body>
    <p>
        我是第一行<br/>
        我是第二行<br/>
        我是第三行<br/>
    </p>
</body>

CSS:

p::first-line{
    color: pink;
}

效果：这里写图片描述
可用于::first-line的属性：

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

::first-line伪元素只能用于块级元素

::first-letter伪元素

用于向文本首字母添加样式
e.g.
HTML

<body>
    <p>
        我是第一行<br/>
        我是第二行<br/>
        我是第三行<br/>
    </p>
</body>

CSS:

p::first-letter{
    color: pink;
    font-size: 30px;
}

效果：
这里写图片描述
可用于::first-letter的属性：

  • font
  • color
  • background
  • margin
  • padding
  • border
  • text-decoration
  • vertical-align(仅当float为none时)
  • text-transform
  • line-height
  • float
  • clear

只能用于块级元素

::before伪元素

可使用content属性在元素的内容前插入新内容
e.g.
HTML:

<body>
    <p>
        我是第一行<br/>
        我是第二行<br/>
        我是第三行<br/>
    </p>
</body>

CSS:

p::before{
    content: "|";
}

效果：
这里写图片描述

::after伪元素

用于在元素内容后插入新内容，使用方法与::before相同。

::selection伪元素

用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的。火狐浏览器需要加前缀
e.g.
HTML:

<body>
    <p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，
有的设计要求不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。
    </p>
</body>

CSS:

::selection{
  background: orange;
  color: white;
}
::-moz-selection{
  background: orange;
  color: white;
}

效果：
这里写图片描述

祝大余
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS常用子元素选择器-选择特定子元素
m0_53206841的博客
06-22 4152
常用举例：p:nth-child(n + 2)：除其父元素下的第一个p元素外所有p元素。p:nth-last-child(n + 2)：除其父元素下倒数第一个p元素外所有p元素。2n：偶数。2n+1：奇数。-n+4：第一个到第四个。3n：3的倍数，每三个取一次。注：nth-child(n)和：nth-of-type(n)的区别：两者都可以选择其父元素下第n个子元素，但在子元素的类型上有所区分。p:nth-of-type(n)：其父元素下的第n个p元素。p:nth-child(n)：其父元素下的第n个且为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_50953782的博客
02-02 145
比较优先级时，需要将所有的选择器元素的优先级进行相加计算，最后优先级越高，越优先显示（分组选择器是单独计算的），选择器的累加不会超过其最大的数量级，如类选择器再高也不会超过id选择器。当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同样式，当样式发生冲突时应用哪个样式由选择器的权重（优先级）决定。伪类（不存在的类，特殊的类）用来描述一个元素的特殊状态，如被点击的元素、鼠标移入的元素、第一个子元素。语法：选择器1，选择器2，选择器3，选择器n{}[属性名*=]选择属性值中含有某值的元素的元素。
前端——CSS选择器的常见用法详解
xh1605004242的博客
05-14 2434
CSS选择器的常见用法
CSS十种选择器详解
这个人好有趣....hh
02-22 3321
优先级：ID 选择器 > 类选择器 > 标签选择器 > 通配符我们来介绍一下 CSS 中几种常用选择器的定义方式：通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素。在开发中，我们通常使用通用选择器来清除 HTML 元素中默认的内外边距，如下所示： 2. 标签选择器 一个完整的 HTML 文档由各式各样的标签组成，而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签，如下所示： 3. ID 选择器 ID 选择器用来匹配 HTML 文档中具有指定 ID
十种CSS选择器详解介绍
最新发布
01-31
1. 通用选择器 2. 标签选择器 3. ID 选择器 4. 类选择器 5. 后代选择器 6. 子选择器 8. 通用兄弟选择器 9. 分组选择器 10. 属性选择器 基础选择器总结
详解css常用选择器
09-27
本文主要对CSS选择器进行详细介绍，对初学CSS样式的朋友具有很好的参考价值。下面跟着小编一起来看下吧
详解CSS中的选择器优先级顺序
09-24
CSS在使用选择器对元素施加属性的时候会有先后顺序,包括特殊性和重要性等概念在内,这里我们就来详解CSS中的选择器优先级顺序,需要的朋友可以参考下
CSS选择器种类、优先级与匹配原理详解
09-25
作为一个Web开发者，掌握必要的前台技术也是很重要的特别是CSS选择器的优先级问题，为了广大web爱好者可以更好的解决问题，这里就CSS选择器的优先级问题做了一些总结
前端之CSS样式
raojiaxing_的博客
03-29 224
CSS 首先我要谈1下CSS是什么。 CSS形象一点来讲，就是一件衣服，可以是很丑，可以是很漂亮。 css是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 的作用 解...
CSS选择器解析（一文了解）
qq_62977276的博客
04-02 336
一文了解CSS3 选择器，适用新手小白！
CSS中所有选择器详解
杨杨吖的博客
08-04 4105
作用：通过id属性值，找到页面中带有这个id属性值的标签，并设置样式。作用：通过类名，找到页面中所有的带有这个类名的标签，并设置样式。作用：通过标签名，找到页面中所有的这类标签，并设置样式。作用：找到页面中所有的标签，然后设置样式。作用：选中页面中同时满足多个选择器的标签。作用：同时选择多组标签，设置相同的样式。作用：选中含有指定属性和指定属性值。作用：选中含有指定属性和指定属性值。作用：选中含有指定属性的元素。作用：选中含有指定属性和。作用：选择某元素后面的。作用：选中指定属性和。
CSS学习笔记
Saurfang
06-01 445
1.css的简介 *css:层叠样式表 **层叠:一层一层的 **样式表: 很多的属性和属性值 *使页面显示效果更加好 *css将网页内容和显示样式进行分离,提高了显示功能   属性: overflow visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚...
详解css选择器
weixin_68613594的博客
07-16 1024
其中浏览器获取到了id为a2,a3,a4,a5的div标签，他们的父元素都是a1，而a1的最后一个子元素是p，不是div，所以无效。而first-of-type选择器则是选择父元素中第一个与指定类型相同的子元素，也就是说，如果父元素中有多个相同类型的子元素，只有第一个会被选择。通配符选择器用*号表示，*就是选择所有的标签 他是所有选择其中作用范围最广的，能匹配页面中所有的元素。first-child选择器选择的是父元素的第一个子元素，无论这个子元素是什么类型的元素。not，就是“非，不是” 的意思。
学CSS选择器，看这篇文章就够了（近2万字详解）
微风洋洋的博客
02-06 3017
今天这篇文章就是来和大家详细聊聊CSS选择器，希望大家读完有所收获，那我辛苦码字也就值了。如果你觉得对你有一丢丢启发的话，不妨 <b>点赞、收藏、关注</b>支持一下，你的支持将是我继续创作的最大动力。下一篇将介绍CSS元素样式，到时不见不散~~~
CSS选择器详解及部分元素属性
小小码农
03-12 2302
CSS选择器详解及部分元素属性
CSS“隐藏”功能简介
Scorpion_Yang_Li的博客
05-23 349
如有不全，还请见谅。 “隐藏”功能 CSS的“隐藏”功能分为两种，一种为真实隐藏“消失不见”，即看不见也点击或者选中不了，另一种“看不见”，就只是看不见文本或者图片；图片或者文档内容还在，甚至还占有原来的位置，只是“看不见”了。 彻底隐藏 我们平时用得最多的属性，隐藏属性， display：none是指不生成盒子，也就是不存在咯，即当前元素盒子在页面（不产生）隐藏，且不占用实际尺寸，完全消失不见，不可点击、不可被选中。 这是我们平时在做页面时，简单动画（点击动画、悬停动画、轮播动画等）常用的属性，即需要将某
CSS学习之——选择器
Sakura__Lu的博客
11-05 561
CSS选择器的优先级 css中有四种基本选择器，就一般开发而言，css一般采用clss选择器进行dom样式编辑，而id则交给js进行一些逻辑交互处理（也有不少例外，这里是一般习惯来说，并没有特别严格的标准）。 !important > 行内选择器 > id选择器 > 类选择器 > 标签选择器 <!DOCTYPE html> <ht...
css3属性选择器详解
03-22
CSS3属性选择器可以根据元素的属性值来选择元素，常见的属性选择器有以下几种： 1. [attribute]：选择具有指定属性的元素。 2. [attribute=value]：选择具有指定属性和属性值的元素。 3. [attribute~=value]：选择具有指定属性且属性值中包含指定词汇的元素。 4. [attribute|=value]：选择具有指定属性且属性值以指定值开头的元素。 5. [attribute^=value]：选择具有指定属性且属性值以指定值开头的元素。 6. [attribute$=value]：选择具有指定属性且属性值以指定值结尾的元素。 7. [attribute*=value]：选择具有指定属性且属性值包含指定值的元素。 以上是CSS3属性选择器的详细解释，希望能对你有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值