先说选择器，要知道js里，也有，就是你给标签起了id，class名，在js里需要获取是一个意思。...在jq中很方便，不用写很长的xxx=document.getElementById(‘xxx’) 1.基本选择器 ? 2.层次选择器 ? 3.过滤选择器 ? 4.内容过滤器 ?...5.可见选择器 ? 6.属性选择器 ? 7.子元素选择器 ?...其中nth-child（xn+y）表示：从第y各元素起，选取每第x个元素 例3n+2表示从第二个子元素开始，选取每个第三个的元素 even：偶数 odd：奇数 8.表单元素过滤选择器 ?...表单中选择确切的某个属性的元素，不需要全部都写input 熟练使用选择器是熟练使用jq的前提 图片全部来自个人word文档中的截图，如有错误欢迎指出，互相学习。
---- title: CSSS选择器总结 date: 2018-07-30 20:11:07 tags: css 在css的学习中有一个很容易让人混乱的就是css选择器，因为选择器有很多种，而且在使用的时候有些类似...那么本文就对css选择器，作为一个集中的总结梳理。...属性选择符 简单属性选择 [属性]使用，无论什么属性，该选择器会选择所有具有该属性的元素，如： a[href] {color:green;} 前三行都会匹配，但是a_2不匹配（要用子串匹配属性选择器...子串匹配属性选择器 伪类和伪元素 伪类 应用在链接里的伪类 a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #
一、CSS选择器。 a、基本选择器详解。...名称语法构成描述返回值示例标签选择器element根据给定的标签名匹配元素元素集合$(“h2”)选取所有的h2元素类选择器.class根据给定的class匹配元素元素集合$(“.title”)选取所有class...为title的元素ID选择器id根据给定的id匹配元素单个元素$(“#title”)选取id为title的元素并集选择器selector1, selector2, …., selectorN将每一个选择器匹配的元素...全局选择器*匹配所有元素集合元素$(“*”)选取所有的元素 PS：CSS选择器优先级的结论是： id选择器优先级 > 类class选择器优先级 > 标签选择器优先级 ---- b...、层次选择器的详细 名称语法构成描述返回值示例后代选择器ancestor descendant选取ancestor元素里的所有 descendant（后代）元素元素集合$(“#menu span”)
xpath选择器 表达式 说明 article 选取所有article元素的所有子节点 /article 选取根元素article article/a 选取所有属于article的子元素的a元素 //div...css 选择器 表达式 说明 * 选择所有节点 # container 选择id为container的节点 .container 选取所有class 包含container的节点 li a 选取所有li
优先级：离标签越近的选择器优先级越高，所以相同权重的样式后者才生效；内联样式表>头部样式表>导入样式表。...权重 权重为0000： 通用选择器* {} 组选择器h1, h2, p, em, img {} 后代选择器h1 em{} 子代选择器table>tbody>tr{} 分类选择器div.top,header.main...{} +相邻兄弟选择器: div.s+p{} 只能选择后面的 ~通用兄弟选择器： div.s~p{} 只能选择后面的 权重为0001： 标签选择器h3 em {} :first-letter每段首字符(...first-line矛盾时优先:first-letter :before :after :content ::selection用户在页面中选中部分(只能改颜色和背景颜色) 权重0010： 类(class)选择器...(odd|2n-1)//奇数 :empty 空格换行不算空,匹配同级元素中一个子元素都没有的元素 :only-child匹配同级元素中只有一个子元素的元素 否定伪类：:not() 权重0100： ID选择器
复合选择器 后代选择器 后代选择器 可以选择 子元素 , 孙子元素 , 不限制选择层数深度 ; 后代选择器 可用于 选择 基础选择器选择出的元素组 中的 另外基础选择器选择出的元素组 ; 后代选择器...语法 : 父选择器 和 子选择器 都是 CSS 基础选择器 , 父选择器 和 子选择器 之间 使用空格分开 ; 父选择器 子选择器 { 属性名称1:属性值1; 属性名称2:属性值2; 属性名称3:...选择 元素 ; 子元素选择器语法 : 父选择器 写在前面 , 子选择器 写在后面 , 两个选择器之间使用 > 大于号隔开 ; 父选择器>子选择器 { 属性名称1:属性值1; } 交集选择器 交集选择器...由 两个 基础选择器 组成 , 目的是 选择出 同时满足 两个 基础选择器 要求的标签 ; 交集选择器语法 : 两个基础选择器之间没有空格 ; 基础选择器1基础选择器2 { 属性名称1:属性值1;...} 并集选择器 并集选择器 可以 选择 若干 基础选择器 选择出的 并集元素集合 ; 并集选择器语法 : 若干 基础选择器 可以写在一起 , 基础选择器之间使用 , 逗号隔开 ; 基础选择器1,基础选择器
class属性值匹配的元素； 4）并集选择器：$("选择器1,选择器2")，获取多个选择器选中的所有元素。...2.2 层级选择器 层级选择器包括两类： 1）后代选择器：$("A B ")，选择A元素内部的所有B元素； 2）子选择器：$("A>B")，选择A元素内部的所有B子元素； 【练习案例】：在2.1程序基础上...2.3 属性选择器 属性选择器包括三类： 1）属性名称选择器：$("A[属性名]")，包含指定属性的选择器 2）属性选择器：$("A[属性名= ‘值’]")，包含指定属性等于指定值的选择器 3）复合属性选择器...2.4 过滤选择器 过滤选择器包含9类： 1）首元素选择器： :first ，获得选择的元素中的第一个元素 2）尾元素选择器： :last ，获得选择的元素中的最后一个元素 3）非元素选择器： :...2.5 表单过滤选择器 表单过滤选择器包括4类： 1）可用元素选择器：:enabled，获得可用元素； 2）不可用元素选择器：:disabled，获得不可用元素； 3）选中选择器：:checked，获得单选
作为style属性写在元素内的样式 id选择器 类选择器 元素选择器 通配符选择器 浏览器自定义或继承 总结排序：!...，优先级不同 总结排序：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。...说明css引入方式优先级：内联(行内)样式 > 内部样式表 > 外部样式表 二、选择器 1、普通选择器 选择器 eg 描述 通用选择器 * * 选择所有元素。...元素选择器 el p 选择所有 元素。 选择器分组 el,el div,p 选择所有 元素和所有 元素。...2、多类选择器 类选择器很简单，那多类选择器呢？好好看下面的例子及注释。
element元素 attr代表attribute属性，val代表value属性值 :xxx都属于伪类选择器，::xxx都属于伪元素选择器 有名字的选择器我尽量细分了 #CCS1选择器# 选择器...类型 示例 说明 .class 类选择器 .demo 选择所有class包含demo的元素 #id ID选择器 #unique 选择所有id是unique的元素 ele 元素选择器 div 选择所有div...伪类选择器 a:visited 选择访问过链接 :active 伪类选择器 a:active 选择活动链接 :hover 伪类选择器 a:hover 选择鼠标悬浮链接 ::first-letter 首字母选择器...# 选择器 类型 示例 说明 * 通配选择器 * 选择所有元素 ele>ele 直接子元素选择器 div>p 选择父级是div元素的p元素 ele+ele 相邻兄弟元素选择器 div+p 选择紧挨着div...#CSS3选择器# 敲这么多终于到关键地方了 CSS3增加了很多强大的选择器，以伪劣选择器为主 CSS1和CSS2版本的选择器加起来都没它多 我们一起来看一下 选择器 类别 示例 说明 ele
总结CSS3新特性(选择器篇) CSS3新增了 嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p{color: red;/*此条规则将用于p后边所有的p....attribute*=value]: 选择该属性中出现了特定值的元素 上边三个是可以组合使用的,方法如 ↓ : 实际中可以应用在区分本地链接与外部链接,通过判断是否有http.com什么的(等到CSS4选择器问世就不用这么麻烦了...only-child: 选择仅有一个子元素的元素; 如果去掉:only-child前边的p,那个孤独的span也会应用该样式; 同样可以使用:not反选, :nth-child(n): 选择第n个子元素,可以结合选择器来限制...:enabled为可用,:disabled反之; :checked: 用于多选及单选被选中的伪类; :not: 这个就不多说了- -上边用了那么多了; ::selection: 被选中文本的样式; 总结...: CSS3选择器带来了极大的便利,上文有什么不对或不详细,还请指出.有点虎头蛇尾了,哈哈 部分参考链接: http://www.w3school.com.cn/cssref/css_selectors.asp
在这篇博客中，我会结合具体例子来分析伪类选择器（可能概念性不是很强，但是好用 ~ ） 属性选择器 input[value] 意思是选择的input标签，必须具有value属性 input[type=text...但低于div .box…） 结构伪类选择器 ul:first-child 选择ul中的第一个孩子 ul li:first-child 选择ul中的第一个li ul:last-child 选择ul中的最后一个孩子...> 第一 第二 第三 伪元素选择器...element::before 在element元素内部的前面插入内容 element::after 在element元素内部的后面插入内容 （此处的element代指所有标签元素） 这个选择器是要写在...-- 伪元素选择器 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 注意： before和
iOS中UIPickerView使用总结 UIPickerView是iOS中的原生选择器控件，使用方便，用法简单，效果漂亮。
CSS3中使用了很多的属性选择器，通过这些属性选择器，可以根据我们自己的设计来定义元素的样式，制作精美的网页。 CSS3属性选择器 下面是CSS3的属性选择器的语法，及使用。...元素名字[元素类型=“类型名字”]：选择器名字{ 属性：值； 属性：值； } 在元素类型匹配时，就可以使用类似正则的匹配方法。...伪元素选择器 通常，CSS中会有一些已经定义好的元素选择器，我们通过 选择器:伪元素{属性名：值} 来定义。 ...常用的伪选择器有： 1 first-line 伪元素选择器：某个元素的第一行 2 first-letter：某元素的首字母 3 after：某元素之后插入内容，如 :before{ content...:123 } 4 before：某元素之前插入内容 常用选择器 root：整个DOM的元素定点，也就是html not：排除特定的元素 empty：比如一个列表空的那个元素 target：链接指定的目标
jQuery常用选择器 【标签选择器】 清平调 李白 $("h1").attr("style", "font-size:3rem...-- id选择器 --> $("#hr_1").attr("color", "red"); $("#hr_1").attr("width...", "30%"); 【class选择器】 云想衣裳花想容， 春风拂槛露华浓。
这就是接下来要说的选择器的优先级。 ...2、选择器的优先级 Css选择器优先级计算规则： 根据Css选择器的类型，可以计算出这个样式有多大的优先级： 选择器类型 计算规则 元素标签中定义的样式（Style属性） 加1,0,0,0 每个ID...为了更好的理解这些计算规则，举些例子如下： 选择器 计算结果 * { } 0 li { } 1 (one element) li:first-line { } 2 (one element, one
文章目录 一、基础选择器与复合选择器 二、后代选择器 1、语法说明 2、示例分析 3、完整代码示例 一、基础选择器与复合选择器 ---- CSS 基础选择器 : 在之前的博客中 , 介绍了 CSS...的基础选择器 ; 标签选择器 类选择器 ID 选择器 通配符选择器 在实际开发中 , 基础选择器 不能满足 快速选择标签的需求 ; 复合选择器 是 由 两个以上 的 基础选择器 通过 各种方式 组合 而成的...选择器 ; 复合选择器 可以 更精准 更快速 地 选择 目标元素标签 ; 二、后代选择器 ---- 1、语法说明 后代选择器 可用于 选择 基础选择器选择出的元素组 中的 另外基础选择器选择出的元素组...; 后代选择器 语法 : 父选择器 和 子选择器 都是 CSS 基础选择器 , 父选择器 和 子选择器 之间 使用空格分开 ; 父选择器 子选择器 { 属性名称1:属性值1; 属性名称2:属性值2...设置为 类选择器 .gradefather , 子选择器 也设置为 类选择器 .father2 , 孙子选择器 设置为 标签选择器 label , 那么将 label 标签内的文本设置为红色 , 则可以使用如下样式
文章目录 一、CSS 选择器作用 二、CSS 选择器分类 三、标签选择器 1、简介 2、代码示例 四、类选择器 1、简介 2、类名规范 3、代码示例 4、div 与 span 标签 ① span...标签 ② div 标签 5、多类名选择器 一、CSS 选择器作用 ---- CSS 作用 : 以下面的代码为例 , 先通过 选择器 h3 将 HTML 中的 h3 标签类型选择出来 , 然后为这些标签设置...选择器分类 ---- CSS 选择器 主要分为 : 基础选择器 复合选择器 两种类型 ; CSS 基础选择器 主要分为以下几类 : 标签选择器 类选择器 id 选择器 通配符选择器 三、标签选择器 --...-- 1、简介 标签选择器 是 使用 HTML 标签作为选择器 , 如果 HTML 引入了使用 标签选择器的 CSS 样式 , 那么该 HTML 中的 所有的指定标签 , 都使用该 CSS 样式 ; 标签选择器...1、简介 CSS 类选择器 可以 将 页面中的 某几个 标签选择出来 , 使用 " .类名 " 识别标签 ; CSS 类选择器 使用方式如下 : 首先 , 在标签中的 class 属性中设置类名 ;
属性选择器 1E[att$=”val”]{ sRules } 选择具有att属性且属性值为以val结尾的字符串的E元素。 1 18 列表项目 18 列表项目 19 20 21 属性选择器的权值是
文章目录 一、 ID 选择器 1、简介 2、代码示例 二、通配符选择器 1、简介 2、代码示例 三、CSS 选择器使用注意事项 一、 ID 选择器 ---- 1、简介 ID 选择器 使用 " #...id " 选择 指定的 某一个 标签 , 使用 ID 选择器 步骤如下 : 首先 , 在 HTML 中 设置 标签的 ID ; 标签内容 然后 , 在 CSS 样式中使用...* ID 选择器 与 类选择器 的使用方法基本一致 ;** 在开发时 , ID 选择器 不推荐使用 , 使用频率不高 , 推荐使用 类选择器 ; 2、代码示例 代码示例 : <!...:20px; } 通配符选择器 会降低 页面的 打开速度 , 如果没有特殊情况 , 不推荐使用 ; 2、代码示例 通配符选择器代码示例 : 使用通配符选择器 * 将 HTML 所有页面标签的文本设置成了...---- CSS 选择器使用注意事项 : 尽量不使用 ID 选择器 ; 尽量不使用 通配符选择器 ; 使用标签选择器时 , 尽量不对 无意义的标签 进行选择 , 如 div , span 标签 ;
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
