CSS选择器(通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器)
通配符选择器 * 与任何元素匹配
派生选择器:
后代选择器(包含选择器):后代选择器可以选择作为元素后代的元素
A B 对A元素中的B元素应用样式
后代选择器中两个元素间的层次间隔可以是无限的(也可A B C) ,以上 A B 应用样式会选择从A继承的所有B元素
子元素选择器:只选择某个元素的子元素
A > B 只对A 元素的B元素起作用
相邻兄弟选择器:可选择紧挨在另一元素,且二者有相同父元素。
A + B 选择紧挨在A 元素后面的B元素,两个元素有相同的父元素
id选择器:id选择器用于建立派生选择器,也可以单独起作用。
#A
类选择器:也可以用于创建派生选择器
属性选择器:对于指定属性的HTML元素设置样式。
属性选择器:用于选取带有指定属性的元素 [title]
属性和值选择器:选取带有指定属性和值的元素 [title=W3School]
属性和值选择器-多个值 :选取包含指定词汇的元素 [title~=hello]
群组选择器:几个元素的样式属性一样时 A,B,C
CSS选择器(通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器)的更多相关文章
- 0009 CSS基础选择器( 标签、类、id、通配符)
typora-copy-images-to: media 第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用 ...
- css:选择器(标签、类、ID、通配符)
1.css概述 主要的使用场景就是美化网页,布局页面 (1)html的局限性 它只关注内容的语义,只能做一些简单的样式,并且非常的臃肿和繁琐 (2)css对网页美化的作用 css是层叠样式表的简称,它 ...
- 前端(十八)—— jQuery高级操作:选择器、文本属性与类、事件、文档操作、动画、结构关系
JQ选择器.文本属性与类.事件.文档操作.动画.结构关系 可参考jQuery的API文档 一.选择器 1.css语法匹配 标签 | 类 | id | 交集 群组 | 后代 | 兄弟 伪类 | 属性 $ ...
- 理解css相邻兄弟选择器
今天在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”,刚开始对这个概念有些不太理解,通过查阅资料并且经过一些试验总算有了些头绪. 原文解释是“相邻兄弟选择器(Adjacent sibling se ...
- CSS系列之后代选择器、子选择器和相邻兄弟选择器
后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...
- CSS 相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
- CSS 相邻元素选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素.选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使 ...
- CSS篇-样式表、选择器、权重、伪类
CSS定义 CSS:Cascading Style Sheet(层叠样式表) // 写法 选择器 { 属性名: 属性值; } CSS样式表 (1)三种样式表使用 // 内联样式 <div sty ...
- CSS选择器详解(伪类) 转 http://blog.csdn.net/Panda_m/article/details/50084699
CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...
随机推荐
- 代码bug管理工具bugfree与禅道
禅道官网有一键安装包,一键安装即可用 bugfree 搭建lnmp环境 详情参考zabbix 解压bugfree包 到nginx的html里 unzip bugfree3.0.4.zip mv b ...
- 对于ssh服务的简单配置,似的自己的服务器更加安全
对于一台服务器,最大的问题莫过于安全.没有安全性的服务器即使再牛*,性能再好,作用再大,也是分分钟被人搞定,而且还是揉虐性的...当然万事没有绝对的安全,我们只是将危险降低而已.本文只针对于ssh服务 ...
- DisplayUtils
import android.app.Activity; import android.content.Context; import android.graphics.Rect; import an ...
- Sqlite的操作示例代码
import android.content.Context; import android.database.sqlite.SQLiteDatabase; import android.databa ...
- npm publish 发布失败 无法连接 https://registry.npmjs.org
自己写的npm包,之前每次更新都是正常发布,最近做个一个更新,想发布,然后npm publish 竟然失败, 错误提示如下: npm ERR! network request to https://r ...
- Js 监听器
在Ajax取数据时,采用$("#id").click(function(){})的方式不能正确设置监听,需要用$("#parent").on("cli ...
- Git学习教程三之分支管理
实战流程: 1:代码库克隆一份至本地 2:新分支操作 2.1 在需要的文件中创建并指向新的分支方便写代码 git checkout -b <name> 2 ...
- 【CSS】我的颜色到底听谁的?—— css的层叠性
我们之前学了很多个选择器,都可以帮我们定位到具体标签上,然后我们在设置样式.但这也不可避免会产生一个问题:如果多个选择器同时指向同一个标签,那么到底该听谁的??? css一定有自己的机制来处理这个问题 ...
- 【POJ - 1970】The Game(dfs)
-->The Game 直接中文 Descriptions: 判断五子棋棋局是否有胜者,有的话输出胜者的棋子类型,并且输出五个棋子中最左上的棋子坐标:没有胜者输出0.棋盘是这样的,如图 Samp ...
- tp5 ThinkPHP5 自定义异常处理类
在项目的开发过程中异常抛出尤为重要不仅能够做出友好提示帮助掩盖我们伟大的程序员们尴尬的瞬间,还能做到提示开发人员代码白编写的错误,下面进行自定义异常抛出类,纯属个人理解,希望大家指正 首先在框架中我们 ...