CSS选择器 CSS教程

【CSS选择器】【Web前端基础】CSS3高级选择器用法

2020-10-22 14:35发布

站内问答 / CSS3
1755 3 2
发送
3条回答
水默
2楼 · 2020-10-22 15:51

1、相邻兄弟选择器

作用：匹配指定元素的相邻【下一个】兄弟元素

语法：由 + 号来充当连接符，如 选择器1+选择器2

image.png

aijingda
3楼 · 2020-10-23 16:28

CSS3中添加了一些新的选择器 与之前的不同 这些选择器有些类似于jquery的选择器 能够让我们更高的操作DOM 废话不多说

为了更直观的了解 我们以这段为实例 来进行操作

 1  2  3  4      5     Title 6  7  8     
     9         
  • 第一个测试标题
    • 10         
  • 第二个测试标题
    • 11         
  • 第三个测试标题
    • 12         
  • 第四个测试标题
    • 13         
  • 第五个测试标题
    • 14     
15 16 

:nth-of-type(n)  选择属于其父元素第n个元素的每个元素。

和这个类似的是 :first-of-type和:last-of-type 分别是选择第一个元素和最后一个元素

DEMO:

        
        
        <

 

技术分享

:before 在元素内容前面添加内容

:after 在元素内容后面添加内容

这两个元素类似于:hover 但是他们不是鼠标悬浮 而是利用content属性添加内容 

需要注意的是 用css添加的内容不能被选中 也不能被js获取 显示成技术分享 这些内容属于css样式类型的

DEMO:

        li:before{
            content: ‘在前面添加内容 ‘;
        }
        li:after{
            content: ‘ 在后面添加的内容‘;
        }

 

技术分享

:focus 这个也类似于我们常用的:hover 用来动态选择获取焦点的元素

DEMO:别如获取焦点的input框改变背景颜色


    
    Title
    

    输入框1：

    输入框2：

 

技术分享

:nth-child(n) 选取每个父元素的第n个子元素

:nth-last-child(n) 选取每个父元素从后向前数的第n个元素

:last-child 选择每个父元素的最后一个子元素

注意 这个选择器慎用  因为选择面太大 不好控制

DEMO:


    
    Title
    
    

        
我是P元素

        
我是P元素

        
我是P元素

        我不是p元素 我是span元素
        
我是P元素

    

 

 

 技术分享


雨陵西 - 每一代青年都有自己的际遇和机缘
4楼 · 2020-12-09 14:02

1、相邻兄弟选择器

作用：匹配指定元素的相邻【下一个】兄弟元素

语法：由 + 号来充当连接符，如 选择器1+选择器2

2、通用兄弟选择器

作用：匹配到某元素【后面的】 【所有指定】兄弟元素

语法：由~充当结合符，如 选择器1~选择器2

3、属性选择器

3.1、[attribute]:匹配具有attribute属性的元素

如：div[id]:匹配所有具备id属性的div

3.2、element[attr1][attr2] 匹配所有具备attr1属性以及attr2属性的element元素

如：div[id][class] 匹配同时具备id和class属性的div

3.3、element[attr=value] 匹配attr属性值为value的element元素

如：input[type=text] 或 input[type='text']，匹配type为text的input元素


相关问题推荐

  • 【Web前端基础】css选择器有哪几种CSS选择器 2020-11-19 09:42
    回答 15
    已采纳

    css中有很多选择器，比如类别选择器、标签选择器、ID选择器、后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等，常见的选择器有id选择器、类选择器、标签选择器三大类。...

  • 【Web前端基础】css3高级选择器有哪些CSS选择器 Web端视觉 2020-10-22 14:36
    回答 6

    相邻兄弟选择器、通用兄弟选择器、属性选择器、伪类选择器、伪元素选择器

  • 【Web前端基础】css3选择器优先级顺序CSS选择器 Web端视觉 2020-10-21 10:44
    回答 9

           1.   ！important　　　　在属性后面写上这条样式，会覆盖掉页面上任何位置定义的元素的样式。　　2.   行内样式，在style属性里面写的样式。　　3.  id选择器　　4. class选择器　　5. 标签选择器 　  6. 通配符选择器*　　7. 浏览器的自...

  • 【Web前端基础】常见的css选择器有哪些CSS选择器 Web端视觉 2020-10-21 10:43
    回答 9

    ID选择器：#header {}类选择器：.header {}元素选择器：div {}子选择器：ul > li {}后代选择器：div p {}伪类选择器：a:hover {}属性选择器：input[type=text] {}

  • 【Web前端基础】id属于什么css3选择器CSS教程 CSS选择器 2020-10-20 10:06
    回答 6

    id选择器(#ID)在使用ID选择器之前需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个.号(.className)而id选择器是在名称前使用#如(#id),...

  • 浏览器是怎样解析CSS选择器的？CSS选择器 2020-10-18 11:49
    回答 1

    CSS 的后代选择器本身就是一种在标准里面不那么推荐的方式。首先，对浏览器来说，ID 选择器 #xx 是最快的，其次是 class 选择器、html 元素选择器等。假如 DOM 的结构如上图，e799bee5baa6e58685e5aeb931333363383938匹配规则是 .mod-nav h3 span。若从左向右...

  • css选择器有哪些？那些css属性可以继承？CSS选择器 2020-10-18 11:49
    回答 2

    CSS哪些属性可以继承?css继承特性主要是指文本方面的继承，盒模型相关的属性基本没有继承特性。不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom...

  • 【Web前端基础】css绝对定位和相对定位区别CSS教程 2020-12-14 14:06
    回答 11

    一、position 的四个值：static、relative、absolute、fixed。绝对定位：absolute 和 fixed 统称为绝对定位相对定位：relative默认值：static二、relative定位与absolute定位的区别实例：HTML代码：css代码：初始效果：1、relative：相对于原来位置移动，元素...

  • 【Web前端基础】css定位元素的方式CSS教程 2020-12-11 11:21
    回答 14

    1.static:正常文档定位，此时top,bottom,left和z-index属性无效，块级元素从上往下纵向排布，行级元素从左往右排列2.relative: 相对定位，此时的相对是相对于正常文档流的位置3.absolute:相对于最近的非static定位祖先元素的偏移，来确定元素位置，比如一个绝...

  • 【Web前端基础】css相对定位的使用条件是什么CSS教程 2020-12-11 11:20
    回答 8

    设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素相对于它的起点进...

  • 【Web前端基础】css浮动和定位有什么区别CSS教程 2020-12-04 14:16
    回答 15

    浮动和定位都可以使元素脱离标准文档流,提升层级,  浮动脱离文档流，提高半个层级，不能完全覆盖下面元素（不能覆盖图片文字）定位脱离标准文档流，提升一个层级，可以完全覆盖下面元素及其内容...

  • 【Web前端基础】css定位如何理解CSS教程 2020-12-04 14:15
    回答 7

    绝对定位就是你的位置已经不属于你了，你只能漂浮在半空中。相对定位就是你的位置你还占用的，人还在飘着有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的，都找不到的话就以body窗口来定位。...

  • 【Web前端基础】css定位方式有哪几种CSS教程 2020-12-02 09:56
    回答 17

    定位：1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容

  • 【Web前端基础】css浮动条件是什么CSS教程 2020-12-02 09:53
    回答 5

    css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起，举个例子来说吧，就比如有两个div盒子在网页中显示，一个盒子里展示的是图片，另一个盒子中展示的是文字，他们虽说自己占有的位置不大，可是他们却各占一行来显示，这可...

  • 【Web前端基础】如何触发css bfcCSS教程 2020-12-01 11:39
    回答 7

    引言：这篇文章是我对BFC的理解及总结，带你揭开BFC的面纱。你将会知道BFC是什么，形成BFC的条件，BFC的相关特性，以及他的实际应用。一、何为BFC       BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的...

没有解决我的问题，去提问