展开

关键词

CSS3关系选择器属性选择器

属性选择器 属性选择器可以根据元素的属性属性值来选择元素,CSS3中新增的3种属性选择器: E[att^=value]属性选择器是指选择名称为E的标记中的att属性,att属性值包含前缀为value E[att$=value]是选择属性值包含后缀为value的子字符串 E[att*=value]是选择属性值包含value的子字符串,例如:div[id*=section] 表示匹配包含id属性,且id ⚠️以上三种属性选择器E都是可以省略的,若省略则表示可以匹配满足条件的任意元素。 关系选择器 1.子代选择器(>) 子代选择器主要用来选择某个元素的第一级子元素。 临近兄弟选择器(+):该选择器使用‘+’来链接前后两个选择器选择器中的两个元素有同一父亲,而且第二个元素必须紧跟第一个元素。 (老大跟老二,老二跟老三) 普通兄弟选择器(~):该选择器使用‘~’来链接前后两个选择器选择器中的两个元素有同一父亲,但第二个不必紧跟第一个元素。

25520

【前端开发系列】—— CSS3属性选择器总结

CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页。 CSS3属性选择器 下面是CSS3属性选择器的语法,及使用。 元素名字[元素类型=“类型名字”]:选择器名字{ 属性:值; 属性:值; }   在元素类型匹配时,就可以使用类似正则的匹配方法。 伪元素选择器   通常,CSS中会有一些已经定义好的元素选择器,我们通过 选择器:伪元素{属性名:值}   来定义。    常用的伪选择器有: 1 first-line 伪元素选择器:某个元素的第一行 2 first-letter:某元素的首字母 3 after:某元素之后插入内容,如

:before{   content required:支持这个属性,并且定义了required的 optional:支持requried属性,但是没有定义的 1 <html> 2 <head> 3 <style type=

34170
  • 广告
    关闭

    腾讯云+社区系列公开课上线啦!

    Vite学习指南,基于腾讯云Webify部署项目。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    第91天:CSS3 属性选择器、伪类选择器和伪元素选择器

    一、属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1、E[attr] 表示存在attr属性即可; div[class] 2、E[attr=val] 表示属性值完全等于val; div [class=mydemo] 3、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置; div[class*=mydemo] 4、E[attr^=val] 表示的属性值里包含val 字符并且在“开始”位置; div[class^=mydemo] 5、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置;   div[class$=demos] 二、伪类选择器 除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。 可改变选中文本的样式; ":" 与 "::" 区别在于区分伪类和伪元素 关于before和after       CSS2中 E:before或者E:after,是属于伪类的,并且没有伪元素的概念       CSS3

    63930

    css3 选择器

    以前学习css的时候总是看见一个效果就看一下,没有系统的学习,最近看见了这个css3的网站,打算系统学习下,今天要跟大家分享的是css3选择器。 我们先来看一张选择器列表图: ? 一、基本选择器 基本选择器参考传送门:http://www.w3cplus.com/css3/basic-selectors 1、通配符选择器(*) 通配符选择器是用来选择所有元素,也可以选择某个元素下的所有元素 CSS3新增加一种选择器,这种选择器将选择某元素后面的所有兄弟元素,他们也和相邻兄弟元素类似,需要在同一个父元素之中,换句话说,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E ~ F 选择器将选择中所有 /css3/attribute-selectors IE6不支持属性选择器 CSS3属性选择器主要包括以下几种: 1、E[attr]:只使用属性名,但没有确定任何属性值; .demo a[id] {background 3、CSS3的:nth选择器 这节内容才是关键,也是CSS3选择器最新部分,有人也称这种选择器CSS3结构类,下面我们通过实际的应用来具体了解他们的使用和区别,首先列出他具有的选择方法: 1):fist-child

    18410

    css3选择器

    CSS3新增选择器 属性选择器 E[attr]只使用属性名,但没有确定任何属性值 E[type="text"]指定属性名,并指定了该属性属性值 E[attr~="value"]指定属性名,并且具有属性值 ,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写 E[attr^="value"]指定了属性名,并且有属性值,属性值是以value开头的 E[ attr$="value"]指定了属性名,并且有属性值,而且属性值是以value结束的 E[attr="value"]指定了属性名,并且有属性值,而且属值中包含了value 结构性伪类选择器 E: 注意:子节点不包含文本节点 伪类选择器 E:target 表示当前的URL片段的元素类型,这个元素必须是E E:disabled 表示不可点击的表单控件 E:enabled 表示可点击的表单控件 E:checked 表示已选中的checkbox或radio 伪元素选择器 E::first-line 表示E元素中的第一行 E::first-letter 表示E元素中的第一个字符 E::selection

    24620

    【前端】:属性选择器

    属性选择器 1.1. 属性存在性选择器 1.2. 属性值直接匹配选择器 1.3. 属性值正则匹配选择器 2. AMCSS——基于HTML属性的CSS模块化技术 3. 属性选择器 The CSS attribute selector matches elements based on the presence or value of a given attribute 属性存在性选择器 语法: [attr] Represents elements with an attribute name of attr. 示例: <! 属性值直接匹配选择器 语法: [attr=value] Represents elements with an attribute name of attr whose value is exactly 属性值正则匹配选择器 语法: [attr^=value] Represents elements with an attribute name of attr whose value is prefixed

    21310

    CSS3常用选择器

    一、基本选择器 子元素选择器 概念:子元素选择器只能选择某元素的子元素 语法格式:父元素 > 子元素 (Father > Children) 兼容性:IE8+、FireFox、Chrome、Safari (Eelement ~ Siblings) 兼容性:IE8+、FireFox、Chrome、Safari、Opera 群组选择器 概念:群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号 隔开 语法格式:元素1, 元素2, …, 元素n (Eelement1, Element2, …, Elementn) 兼容性:IE6+、FireFox、Chrome、Safari、Opera 二、属性选择器 Element[attribute] 概念:选择所有带有attribute属性元素 兼容性:IE8+、FireFox、Chrome、Safari、Opera Element[attribute (大多用在表单元素上) :checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框) 兼容性:IE9+、FireFox、Chrome、Safari、Opera 2、CSS3

    29420

    css3选择器

    ul>

    我是标题

    </body> </html> 核心;给html标签设置相应的css属性 2.选择器可以使用标签名称/id名称/class名称 给所有选择器选中的标签设置属性 兄弟选择器: <! ="#">我是超链接

    我是段落

    我是标题

    我是段落

    我是段落

    我是段落

    </body> </html> 核心:给指定选择器后面紧跟的那个选择器选中的标签设置属性 (h1~p)是给指定选择器的后面的所有选择器设置属性。 序选择器: <!

    我是项目

    我是项目

    我是项目

    我是项目

    我是项目

    我是项目

    我是项目

    </body> </html> 属性选择器

    18840

    CSS3 动画属性

    因此,CSS3 新增了一个动画属性animation。 与过渡属性transition属性不同的是,CSS3 的animation属性可以像Flash制作动画一样,通过关键帧控制动画的每一步, 实现更为复杂的动画效果。 CSS3中通过animation实现动画和transition实现动画非常类似,都是通过改变元素的属性值来实现动画效果的。 CSS3动画属性animation和CSS3的transition属性一样是一个复合属性,它包含了8个属性: animation-name,主要用来指定一个关键帧动画的名字,这个动画名必须对应一个@keyframes 在CSS3中就是通过@keyframes属性来实现这样的效果的。

    21820

    CSS3变形属性

    CSS3将改变设计师这种思维,借助CSS3可以轻松倾斜、缩放、移动以及翻转元素。 2012年9月,W3C组织发布了CSS3变形工作草案。 CSS3变形属性及函数: CSS3变形允许动态的控制元素,可以在屏幕周围移动它们,缩小或扩大、旋转,或结合所有这些产生复杂的动画效果。 CSS 变形属性详解: transform属性指一组转换函数, transform-origin属性指定元素的中心点在哪, 新增加了第三个数transform-origin-z, 控制元素三维空间中心点 三维变换使用基于二维变换的相同属性,如果熟悉二维变换会发现,3D变形的功能和2D变换的功能类似。 在三维空间里,除了rotateX()、rotateY()和rotateZ()函数可以让一个元素在三维空间中旋转之外,还有一个属性函数rotate3d()。

    35210

    css3 Border属性

    css3中关于Border的属性一共有三个:圆角border-radius,图片边框border-p_w_picpath,边框多颜色border-color,其中圆角border-radius是常用的一个属性 而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left 前面,我们主要看了border-radius的缩写格式,其实border-radius和border属性一样 border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面) 圆角参考传送门 二、图片边框border-color  1、css2的border-color属性应用 : <color> /*给右边框上色*/ border-bottom-color:<color> /*给下边框上色*/ border-left-color: <color> /*给左框上色*/  2、css3 的border-color属性 首先css3的border-color属性现在只有Firefox3.0+浏览器支持, 所以css3的border-color属性只有一种写法: -moz-border-top-colors

    17620

    CSS3新增属性

    8IQ)618LDELV_R_S.png 1.png 2.png M2F_[`{%~SGNWD{~8$}{I[1.png CCS3变形 1.png 2.png 2.png 1.png CSS3

    24940

    css3新增选择器

    一、css3之前的选择器 ID选择器选择器 包含选择器(E F) 伪类选择器(:link,visited,hover,active,focus,first-child) 伪元素选择器(::first-line ,first-letter,before,after) 通配选择器(.) 属性选择器(foo[name='martin']) 子包含选择器(E>F) 相邻兄弟选择器(E+F) 二、css3新增选择器 新增属性选择器: E[foo^='bar'] 匹配E元素,该元素包含foo属性 ,且foo属性值以bar开头 E[foo$='bar'] 匹配E元素,该元素包含foo属性,且foo属性值以bar结尾 E[foo*='bar'] 匹配E元素,该元素包含foo属性,且foo属性值包含bar 字符串 新增结构伪类选择器: E:root 匹配文档所在的根元素 E:nth-child(n) 匹配E所在父元素第n个匹配E的元素,非E的子元素也参与排序,若第n个子元素不是E元素,则该语句没有效果(注意这里的

    29830

    CSS(CSS3)选择器(1)

    这篇文章主要用于存储CSS以及CSS3选择器部分知识,以便日后查阅及记忆. 该内容分为两部分,第一部分为css选择器的一些基本知识。第二部分为CSS3新增加的选择器。 2、属性选择器,通过属性/属性值 匹配一个或多个元素。 3、伪类,匹配处于确定状态的一个或多个元素。 */     2:#id,id选择器,匹配所有id属性为"id"的元素,id属性具有唯一性。 .demo + .text{ color: gray; } 三.属性选择器:     9:E[att],匹配所有具有att属性的E元素,不考虑它的值。 参考:css选择器笔记,30个你必须熟记的css选择器,MDN-docs-选择器介绍,HTML5和CSS3权威指南(第3版下册-庐陵牛)第十九章,before和after伪元素的用法。

    403100

    css3选择器高级部分

    选择器; <! <html lang="en"> <head> <meta charset="UTF-8"> <title>20-属性选择器上</title> <style> / 1.什么是属性选择器? DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>21-属性选择器下</title> <style ] CSS3代表了只要包含value就行了 ?

    8210

    详解:属性选择器1

    属性选择器的核心: =代表包含就能匹配 ^=代表第一个如果是的话就能匹配 =最后一个末尾如果是的话就能匹配 问题:比如[class=“test”]这个如果test如果taedsft也能匹配嘛? head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*什么标签名里面中括号包含的匹配的属性属性值 test12

    test33

    test44
    </body> </html> -属性选择器是看属性或者属性值匹配得出来的呀

    18430

    jquery属性选择器

    (选择给定的属性是以包含某些值的元素) attribute: 一个属性名 value: 一个属性值,可以是一个不带引号的一个单词,或一个带引号的字符串。 attribute: 一个属性名 value: 一个属性值,可以是一个不带引号的一个单词,或一个带引号的字符串。 attribute: 一个属性名 value: 一个属性值,可以是一个不带引号的一个单词,或一个带引号的字符串。 ='value']") 选择指定属性不等于这个值的元素 attribute:一个属性名 value: 一个属性值,可以是一个不带引号的一个单词,或一个带引号的字符串。 $("[attribute]") 选择所有具有指定属性的元素,该属性可以是任何值。 attribute: 一个属性名。

    32460

    CSS(CSS3)选择器(2)

    该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3选择器(1) 一.通用兄弟选择器:                         24:E ~ F,匹配任何E元素之后的同级F元素。 div ~ p{ background-color:#00FF00; } 二.属性选择器:                         25:E[att ^= val],匹配属性att的值以 max属性值来限定),且实际输入值在该范围内时使用的样式。 input::placeholder{ color:red; } 至此,CSS(CSS3选择器的简单说明笔记就到这里结束了,其实这些内容包含了CSS(CSS3)世界的绝大多数常用选择器,当然, 参考:css选择器笔记,30个你必须熟记的css选择器,MDN-docs-选择器介绍,HTML5和CSS3权威指南(第3版下册-庐陵牛)第十九章,before和after伪元素的用法。

    47660

    CSS 属性选择器备忘

    选择器 效果 [attr] el.attr !

    27020

    CSS3 Border属性介绍

    通过边框属性,我们可以实现一些类似按钮或者背景图片的替代效果。 因为大量的图片素材对网页的加载速度影响也很大,但是由于现在的浏览器对css3的兼容与支持各有不同,所以现在要用css替代 配合图片达到的效果还是不太现实。 言归正转,来看看css3下 border提供了那些新特性。 1、border-color <style type="text/css"> <! 由于国内的ie比重一直较大,甚至相当一部分还是ie6 ,所以如果要是考虑到兼容行的化,采用css3处理border特效还是不太合适的

    22230

    扫码关注腾讯云开发者

    领取腾讯云代金券