展开

关键词

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

一、属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1、E[attr] 表示存在attr属性即可; div[class] 2、E[attr=val] 表示属性值完全等于val; div val字符并且在“开始”位置; div[class^=mydemo] 5、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置;   div[class$=demos] 二、伪类选择器 除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。 四、伪元素选择器 重点:E::before、E::after 是一个行内元素,需要转换成块元素 E:after、E:before 在旧版本里是伪类,在新版本里是伪元素,新版本下E:after、E:before ,并且没有伪元素的概念       CSS3中 提出伪元素的概念 E::before和E::after,并且归属到了伪元素当中,伪类里就不再存在E:before或者   E:after伪类;

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
  • 广告
    关闭

    腾讯云精选爆品盛惠抢购

    腾讯云精选爆款云服务器限时体验20元起,还有更多热门云产品满足您的上云需求

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

    css3选择器

    CSS3新增选择器 属性选择器 E[attr]只使用属性名,但没有确定任何属性值 E[type="text"]指定属性名,并指定了该属性的属性值 E[attr~="value"]指定属性名,并且具有属性值 开头的 E[attr$="value"]指定了属性名,并且有属性值,而且属性值是以value结束的 E[attr="value"]指定了属性名,并且有属性值,而且属值中包含了value 结构性伪类选择器 注意:子节点不包含文本节点 伪类选择器 E:target 表示当前的URL片段的元素类型,这个元素必须是E E:disabled 表示不可点击的表单控件 E:enabled 表示可点击的表单控件 E:checked 表示已选中的checkbox或radio 伪元素选择器 E::first-line 表示E元素中的第一行 E::first-letter 表示E元素中的第一个字符 E::selection 表示E元素在用户选中文字时 E::before 生成内容在E元素前 E::after 生成内容在E元素后 E::not(s) 表示E元素不被匹配 E~F表示E元素毗邻的F元素 Content

    24620

    CSS3关系选择器、属性选择器

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

    25520

    CSS3常用选择器

    一、基本选择器元素选择器 概念:子元素选择器只能选择某元素的子元素 语法格式:父元素 > 子元素 (Father > Children) 兼容性:IE8+、FireFox、Chrome、Safari 、Opera 相邻兄弟元素选择器 概念:相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素 语法格式:元素 + 兄弟相邻元素 (Eelement + Sibling) (Eelement ~ Siblings) 兼容性:IE8+、FireFox、Chrome、Safari、Opera 群组选择器 概念:群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号 :enabled 选择器匹配每个已启用的元素(大多用在表单元素上) :disabled 选择器匹配每个被禁用的元素(大多用在表单元素上) :checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框) 兼容性:IE9+、FireFox、Chrome、Safari、Opera 2、CSS3结构类 Element:first-child 概念:选择属于其父元素的首个子元素的每个

    29420

    css3选择器

    元素选择器: <! 记住,他只会查找对应的标签对应的子元素,不是孙子元素哈哈,记住哈. 具体还要看优先级哈。 后代选择器和子元素选择器: 核心:其实两者最大的的不同是后代是查找包括子元素,孙子元素之类的。。。 而子元素只会查找子元素,不会查找孙子的哈。 交集选择器: <! (h1~p)是给指定选择器的后面的所有选择器设置属性。 序选择器: <! : red; } /*核心在于:独一无二的元素,没有其他相同的了.*/ /*.para:only-of-type { color: red; } /*代表兄弟元素中没有一样的

    18840

    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属性 字符串 新增结构伪类选择器: E:root 匹配文档所在的根元素 E:nth-child(n) 匹配E所在父元素第n个匹配E的元素,非E的子元素也参与排序,若第n个子元素不是E元素,则该语句没有效果(注意这里的 n从1开始) E:nth-last-child(n) 匹配E所在父元素倒数第n个匹配E的元素 E:nth-of-type(n) 匹配E所在父元素第n个匹配E的元素,非E的子元素不参与排序(n同样是从1开始

    29830

    CSS(CSS3)选择器(1)

    这篇文章主要用于存储CSS以及CSS3选择器部分知识,以便日后查阅及记忆. 该内容分为两部分,第一部分为css选择器的一些基本知识。第二部分为CSS3新增加的选择器。 在开始之前,先简单介绍一下选择器选择器的作用就是定位我们想要样式化的网页HTML元素选择器可以分为以下几种类型。 1、简单选择器,通过元素类型,class或id匹配一个或多个元素。 2、属性选择器,通过属性/属性值 匹配一个或多个元素。 3、伪类,匹配处于确定状态的一个或多个元素。 一.基本选择器:      1:*,通配符,匹配所有元素。 参考:css选择器笔记,30个你必须熟记的css选择器,MDN-docs-选择器介绍,HTML5和CSS3权威指南(第3版下册-庐陵牛)第十九章,before和after伪元素的用法。

    403100

    css3选择器高级部分

    选择器; <! div的第一个子元素如果为p的话,设为红色. ? 1.什么是属性选择器? ] CSS3代表了只要包含value就行了 ? 通配符选择器: <!

    8210

    CSS(CSS3)选择器(2)

    该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3选择器(1) 一.通用兄弟选择器:                         24:E ~ F,匹配任何E元素之后的同级F元素。 */ 三.结构性伪类选择器:                         28:E:root,匹配文档的根元素,对于HTML文档,就是HTML元素。 29:E:not,匹配不符合当前选择器的任何元素。 input::placeholder{ color:red; } 至此,CSS(CSS3选择器的简单说明笔记就到这里结束了,其实这些内容包含了CSS(CSS3)世界的绝大多数常用选择器,当然, 参考:css选择器笔记,30个你必须熟记的css选择器,MDN-docs-选择器介绍,HTML5和CSS3权威指南(第3版下册-庐陵牛)第十九章,before和after伪元素的用法。

    47660

    认识css3元素

    css3元素 css2的规定为单冒号表示,而css3已经明确表示伪类使用单冒号,伪元素使用双冒号,本次所有测试双冒号 对于读者阅读,有的地方显得有些冗余,但是,这是为了测试没办法了,如果写的不全面或者有错误 background-color: red; } </style> </head> <body>

    </body> </html> w3cshool,css3 ::selection ---- ::before 在元素显示内容之前进行某些样式
    CSS 伪元素用于将特殊的效果添加到某些选择器
    CSS 伪元素用于将特殊的效果添加到某些选择器

    35850

    css3选择器-选择范围 原

    使用媒体查询根据不同的屏幕隐藏不同的元素    @media (max-width: 1500px){     li:nth-child(n+4):nth-child(-n+5){display

    37610

    css中伪元素选择器

    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>68-伪元素选择器</title> <style */ content: "么么哒"; /*指定添加的子元素的宽度和高度*/ width: 50px; /* -- 1.什么是伪元素选择器? 伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素 2.格式: 标签名称::before{ 属性名称:值; } 给指定标签的内容前面添加一个子元素 标签名称::after{ 属性名称:值; } 给指定标签的内容后面添加一个子元素 -->

    css3 nth-child选择器

    css3 nth-child选择器 css3的nth-child选择器,乍看起来很简单,其实不是那么容易。 简单用法 p:nth-child(n) // 选择属于其父元素的第n个子元素的每个

    元素 p:nth-child(2n) // 选择属于其父元素的子元素的每个偶数

    元素 p:nth-child 这和程序里面的数组起始序号还有jQuery的选择器都是不一样的。 这样子就很好理解了。 当我们要选择哪些元素的时候,只要把参数根据n的递增算出来的值对应到子元素在父元素里面的位置序列就好了 比如查找第一个元素 :nth-child(1) 查找序列大于等于10的元素 :nth-child(n +10) 就这样子的 css3中还有一些其他的子元素选择器 比如 :first-child // 第一个元素 :last-child // 最后一个元素 :nth-last-child // 从最后一个子元素开始计数

    22220

    CSS3选择器与边框样式

    CSS3选择器 选择器中的属性: 之前介绍过[ ]里可以定义属性或属性值,之后的标签中只要含有该定义的属性或属性值就会拥有该样式。所以继续介绍剩下的几种声明方式。

    20240

    总结CSS3新特性(选择器篇)

    总结CSS3新特性(选择器篇) CSS3新增了 ? 嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p{color: red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth-of-type(1) 实际中可以应用在区分本地链接与外部链接,通过判断是否有http.com什么的(等到CSS4选择器问世就不用这么麻烦了[:local-link]) :first-of-type与:last-of-type :nth-child(n): 选择第n个子元素,可以结合选择器来限制 ? 结合变量n(应该说是关键字吧= =),可以用来在表格里,列表里做隔行换色什么的 ? 为可用,:disabled反之; :checked: 用于多选及单选被选中的伪类; :not: 这个就不多说了- -上边用了那么多了; ::selection: 被选中文本的样式; 总结: CSS3选择器带来了极大的便利

    35240

    前端基础-CSS相邻元素选择器

    相邻元素选择器 哥哥+弟弟{} /*通过哥哥选择到弟弟 */ 例: <style> div+p{/* 兄弟选择器,哥哥标签+弟弟标签,,,,修饰的是弟弟 */ color:red; } </ 总结: ​ 1.哥哥和弟弟中间用的符号:+ ​ 2.修饰的是弟弟标签 ​ 3.不能通过弟弟选哥哥 关系选择器:后代(空格),子元素(大于号),兄弟(加号)

    26830

    使用CSS选择器进行元素定位

    在selenium webdriver中,支持使用CSS选择器来进行元素定位,事实在真的投入工作,大量编辑用例和元素定位的时候,使用css 和 xpath才是经常需要用到的。 之前有专门讲过使用xpath对元素定位的使用,下面要介绍css选择器来进行元素定位。 '.foo') """ return self.find_elements(by=By.CSS_SELECTOR, value=css_selector) 常见语法 CSS选择器用于选择你想要的元素的样式的模式 "CSS"列表示在CSS版本的属性定义(CSS1,CSS2,或对CSS3)。 选择器 示例 示例说明 CSS .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * 选择所有元素

    1K50

    css3实现元素圆周运动

    2015-04-09 06:22:50 在网页的编写中,好多特效都是通过js来实现,但是还有很多通过css3实现的特效,并且这种方法实现的特效不需要引入外部文件,只需要短短几行代码即可实现,下面这段代码就是由 css3来实现的元素进行圆周运动的代码: <!

    34120

    CSS3 transform对元素的影响

    transform提升元素的垂直地位 ? ? 我们可能都知道这样一个规则,当遭遇元素margin负值重叠的时候,如果没有static以外的position属性值的话,后面的元素是会覆盖前面的元素的。 元素应用了transform属性之后,就会变得应用了position:relative一个尿性,原本应该被覆盖的元素会雄起,变成覆盖其他元素,修改为如下代码: <img src="mm1" style= 只要是支持transform元素的浏览器,包括IE9(-ms-), 都会提高普通元素的垂直地位,使其覆盖其他元素而不是被覆盖。 transform限制absolute的100%宽度大小 以前,我们设置absolute元素宽度100%, 则都会参照第一个非static值的position祖先元素计算,没有就window. transform属性还会创建层叠上下文,影响元素发生重叠时候的表现。

    55130

    相关产品

    • 办公文档还原

      办公文档还原

      办公文档还原基于业界领先的深度学习技术和图像检测技术,集高精度识别、智能版面还原、全文排版输出等多功能为一体,针对办公场景下常见的各类文档。

    相关资讯

    热门标签

    扫码关注腾讯云开发者

    领取腾讯云代金券