您的当前位置:首页神奇的CSS3选择器_html/css

神奇的CSS3选择器_html/css

2023-11-27 来源:瑞奇养生

话说园子里也混迹多年了,但是基本没写过blog,写点基础的,那就从css3选择器开始吧。

Css3选择器

先说下,为什么提倡使用选择器。

  1. 使用选择器可以将样式与元素直接绑定起来,在样式表中什么样式与什么元素匹配一目了然,修改起来也很方便。
  2. 减少样式表的代码量。

属性选择器

1.[att*=val]属性选择器

意义:表示元素用att表示的属性的属性值包含用val表示的字符,则该元素使用这个样式

   

2.[att^=val]属性选择器

意义:表示元素用att表示的属性的属性值以val表示的字符串开头,则该元素使用这个样式。

   

3.[att$=val]属性选择器

意义:表示元素用att表示的属性的属性值以val表示的字符串结尾,则该元素使用这个样式

   

结构性伪类选择器

伪类选择器是指已经定义好的选择器,不能随便起名。

例如:a:link,a:visited,a:hover,a:active.

伪元素选择器是指已经定义好的为元素使用的选择器。

  1. first-line伪元素选择器

    

hello world 你好

2.first-letter 伪元素选择器

    

hello world

你好

befor伪元素选择器

    
  • demo1
  • demo1
  • demo1
  • demo1
  • demo1
  • after伪元素选择器

        
  • demo1
  • demo1
  • demo1
  • demo1
  • demo1
  • root选择器

    root选择器将样式绑定到页面的根元素。在使用:root与body元素的背景时,根据不同的条件,显示效果不同

       

    你好

    not 选择器

    排除结构元素下面子结构元素,使他不使用该元素

       大家好

    你好

    empty选择器

    当元素内容为空时使用的样式。

       
    1 2

    target选择器

    使用target选择器给页面中的target元素使用样式

        示例1 你好 

    你好你好你好你好你好你好你好你好你好你好你好你好你好你好

    你好

    你好你好你好你好你好你好你好你好你好你好你好你好你好你好

    你好

    你好你好你好你好你好你好你好你好你好你好你好你好你好你好

    first-child、last-child选择器

    指定第一个子元素和最后一个子元素的样式

       
  • 1
  • 2
  • 3
  • 1
  • nth-child、nth-last-child选择器

    针对父元素中某个指定序号的子元素来指定样式。

    也可以使用Nth-child(even)对偶数子元素指定样式,Nth-child(odd)对奇数元素指定样式

       
  • 1
  • 2
  • 3
  • 1
  • nth-of-type nth-last-of-type选择器

    这两个选择器是为了弥补nth-child、nth-last-child选择器的缺陷,这两个选择器只针对同类元素指定样式。

    UI元素状态选择器

    E:horver,E:active,E:focus选择器

       

    E:enabled,E:disabled,E:read-only,E:read-write选择器

       

    E:checked、E:default选择器

    E:checked指定复选框选取时的样式

    E:default 指定默认选取框的样式

    E::selection选择器

    指定元素处于选中状态时的样式

        

    测试测试

     

    小编还为您整理了以下内容,可能对您也有帮助:

    CSS3中选择器有哪些语法

    今天给大家介绍一下在CSS3中的常用选择器语法,语法一般分为三种,基本选择器语法,层次选择器语法和动态伪类选择器语法。下面就给大家详细的解读一下。

    1,基本选择器语法

    (1)* 通配选择器 选择文档中所以HTML元素

    (2)E 元素选择器 选择指定类型的HTML元素

    #id ID选择器 选择指定ID属性值为“id”的任意类型元素

    .class 类选择器 选择指定class属性值为“class”的任意类型的任意多个元素

    selector1,selectorN 群组选择器 将每一个选择器匹配的元素集合并

    2,层次选择器语法

    (1)E F 后代选择器(包含选择器) 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内

    (2)E>F 子选择器 选择匹配的F元素,且匹配的F元素所匹配的E元素的子元素

    (3)E+F 相邻兄弟选择器 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素的后面

    (4)E~F 通用选择器 选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素

    3,动态伪类选择器语法

    (1)E:link 链接伪类选择器 选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

    (2)E:visited 链接伪类选择器 选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

    (3)E:active 用户行为选择器 选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮上

    (4)E:hover 用户行为选择器 选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

    (5)E:focus 用户行为选择器 选择匹配的E元素,而且匹配元素获取焦点

    相信看了以上介绍你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

    相关阅读:

    用H5制作烟花粒子特效的制作方法

    让div宽度自适应教学

    网页中使用h标签的开发经验

    CSS3 选择器

    css3中,追加了三个属性选择器分别为:

    结构性伪类选择器由两部分构成,一是伪类选择器,一是伪元素选择器。

    伪类选择器 ,要注意命名不要与系统定义好的选择器重名,例如link、hover

    伪元素选择器 中包含 first-line、first-letter、before、after。

    当root和body起冲突时,body就对内容区域生效,在内容区外则是root生效。

    格式 :not(selector)

    1. first-child 对一个父元素中的 第一个 子元素进行样式的指定

    2. last-child 对一个父元素中的 最后一个 子元素进行样式的指定

    3. nth-child(positon) 对一个父元素中的 指定序号 的子元素进行样式的指定

    4. nth-last-child 对一个父元素中的 指定倒数序号 的子元素进行样式的指定

    2)使用nth-of-type(odd)和nth-of-type(even)

    1)使用nth-child

    2)使用nth-child(an+b),a表示每次循环中,包括几种样式,b表示指定的样式在循环中所处的位置。

    only-child选择器,在元素只有一个子元素时,可以代替使用 nth-child(1)/nth-last-child(1) 。

    在css3选择器中,除了结构性伪类选择器外,还有一种UI元素状态选择器——只有当元素处于某种状态下才起作用,在默认状态下不起作用。

    通过js改变输入框的可输入和不可输入状态,通过css样式改变输入框可输入和不可输入状态时的背景颜色。

    用来位于同一个父元素之下的,给与一个子元素平级的另一个子元素设定样式

    CSS3 选择器

    css3中,追加了三个属性选择器分别为:

    结构性伪类选择器由两部分构成,一是伪类选择器,一是伪元素选择器。

    伪类选择器 ,要注意命名不要与系统定义好的选择器重名,例如link、hover

    伪元素选择器 中包含 first-line、first-letter、before、after。

    当root和body起冲突时,body就对内容区域生效,在内容区外则是root生效。

    格式 :not(selector)

    1. first-child 对一个父元素中的 第一个 子元素进行样式的指定

    2. last-child 对一个父元素中的 最后一个 子元素进行样式的指定

    3. nth-child(positon) 对一个父元素中的 指定序号 的子元素进行样式的指定

    4. nth-last-child 对一个父元素中的 指定倒数序号 的子元素进行样式的指定

    2)使用nth-of-type(odd)和nth-of-type(even)

    1)使用nth-child

    2)使用nth-child(an+b),a表示每次循环中,包括几种样式,b表示指定的样式在循环中所处的位置。

    only-child选择器,在元素只有一个子元素时,可以代替使用 nth-child(1)/nth-last-child(1) 。

    在css3选择器中,除了结构性伪类选择器外,还有一种UI元素状态选择器——只有当元素处于某种状态下才起作用,在默认状态下不起作用。

    通过js改变输入框的可输入和不可输入状态,通过css样式改变输入框可输入和不可输入状态时的背景颜色。

    用来位于同一个父元素之下的,给与一个子元素平级的另一个子元素设定样式

    CSS选择器与优先级详解(一)

    CSS选择器又被称为CSS样式、CSS属性选择器。是由css命名及后面属性及属性值构成一个整体。

    1.基础选择器

    a.id选择器:通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时,ID选择器是以#开头的。

    HTML

    CSS

    执行效果:

    b.class选择器:是以于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,也就是要保证类名在html标记中存在。

    HTML

    CSS

    执行效果:

    c.元素选择器:通过note节点名称匹配元素。

    HTML

    CSS

    2.属性选择器:

    注意:最后一个选择器是E[attr|=val],由于输入|会对表格造成影响,只能用/代替。

    CSS3新增了一些属性选择器,待持续更新。

    3.组合选择器

    示例如下:

    实现效果如下:

    示例如下:

    从高到低依次是:

    1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式

    2.作为style属性写在元素标签上的内联样式

    3.id选择器

    4.类选择器

    5.伪类选择器

    6.属性选择器

    7.标签选择器

    8.通配符选择器

    9.浏览器自定义

    选择器的特殊性值表述为4个部分,用0,0,0,0表示。

    参考:

    1. css优先级计算规则

    2. CSS选择器笔记

    3. Selectors MDN

    4. CSS3 选择器——基本选择器

    5. CSS3 选择器——伪类选择器

    6. 征服高级CSS选择器

    css3的选择器有哪些?

    css3选择器如下: 

    一、通配符选择器(*) 

    通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素。 

    二、元素选择器(E) 

    元素选择器,是css选择器中最常见而且最基本的选择器。 

    三、类选择器(.className) 

    类选择器是以一于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名 

    四、id选择器(#ID) 

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

    五、后代选择器(E F) 

    后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素,比如说:E 

    F,前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,请注意他们之间需要一个空格隔开。 

    六、子元素选择器(E>F) 

    子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E>F所表示的是选择了E元素下的所有子元素F。这和后代选择器(E 

    F)不一样,在后代选择器中F是E的后代元素,而子元素选择器E > F,其中F仅仅是E的子元素而以。 

    七、相邻兄弟元素选择器(E + F) 

    相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素,换句话说,EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻,这样我们就可以使用相邻兄弟元素选择器来选择F元素。

    瑞奇养生还为您提供以下相关内容希望对您有帮助:

    CSS3选择器知识整理

    CSS3,作为CSS2.1的增强版,引入了丰富的新特性,如属性选择器、伪类和组合选择器,旨在降低对HTML类名和ID的依赖,提升样式选择的灵活性。让我们深入探讨CSS3的五大选择器类别:基本、组合以及它们的实战应用。基础选择器:...

    css3的选择器有哪些?

    一、通配符选择器(*)通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素。二、元素选择器(E)元素选择器,是css选择器中最常见而且最基本的选择器。三、类选择器(.className)类选择器是以一独立于文档...

    CSS3新增的哪些选择器和常见的属性是哪些?

    IE6+, FF 3.5, Safari 4, Chrome 3 七. border-radius(圆角边框) 使用: -moz-border-radius: 5px; -webkit-border-radius: 5px; 支持: FF 3+, Safari 4 , Chrome 3 八. opacity(不透明度) 使用: opacity: 0.5; filt...

    CSS3中选择器

    css3中的属性选择器 选择器: :root 根选择器(相当于html) :not 取反选中器(否定选择器) :empty 空选择器(选中没有任何元素的标签) :target 目的选择器 选择器:(同级元素标签,标签相同) :first-child &...

    css选择器

    相邻选择器( E+F )是 E 和 F 具有同一个父元素,并且 F 元素在 E 元素后面且相邻。语法 简介 根据具有链接属性的 E 元素的被访问情况进行匹配。例子 index.html index.css 简介 根据用户对于 E 元素的操作来进行...

    css3的基本选择器有哪几种?

    1、标签选择器,也称为元素选择器。标签选择器的基本形式如下:tagName{property:value},其中tagName是标签名称,property是css的属性。2、类选择器。类选择器用来为一系列标签定义相同的呈现方式,常用的语法是 .classValue{...

    如何使用新的CSS3选择器

    匹配表单中被选中的radio(单选框)或checkbox(复选框)元素 E::selection 匹配用户当前选中的元素 更多HTML5 CSS3选择器 CSS 1.0~3.0选择器(上)CSS 1.0~3.0选择器(中)CSS 1.0~3.0选择器(下)

    html 5的CSS3中新增了哪些选择器?

    "CSS3中新增了3个选择器:E[attr^=""value""]——属性值以value开头 E[attr$=""value""]——属性值以value结尾 E[attr*=""value""]——属性值包含value 通过选择器,可以快速匹配不同类型的属性。例如:a[href$...

    css3选择器怎么选择第3个,第6个,第9个,第12个……元素??

    } CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范...

    css三种选择器的特点

    在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。"CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。).class .intro 选择 class="intro" 的所有元素。 1 id #firstna...

    Top