css各类选择器类型和用法
1.ID 选择器（ID selector，IS）：使用 # 标识selector，语法格式：#S{...}（S为选择器名）。例：id为name的标签会匹配下面的样式
<style>
#name{
color:red;
}
</style>
<!--下面文字是红色的-->
<p id="name">red text</p>
2.类选择器（class selector，CS）：使用 . 标识selector，语法格式：.S{...}（S为选择器名）。例：class属性值为value的标签会匹配下面的样式
<style>
.value{
text-align:center;
}
</style>
<!--下面的文字是居中对齐的-->
<p class="value">center text</p>
3.元素选择器（element selector，ES）：又叫标签选择器，使用标签名作为selector名，语法格式：S{...}（S为选择器名）。例：所有的p标签都会匹配以下的样式
<style>
p{
font-style:italic;
}
</style>
<!--下面的文字是斜体的-->
<p style="font-style:italic">italic text</p>
4.属性选择器（attribute selector，AS）：ES其实是AS的一个特例，在AS基础上还能对selector描述得更具体，语法格式为 E[attr[~=][|=][^=][$=][*=]VALUE]{...}，是并没有得到所有浏览器支持的选择器，因此不举例
5.包含选择器（package selector，PS）：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。例：以下div内的p标签和div外的p标签分别匹配不同的样式
<style>
p{
color:red;
}
div p{
color:yellow;
}
</style>
<p>red text</p><!--文字是红色的-->
<div>
<p>yellow text</p><!--文字是黄色的-->
</div>
6.子选择器（sub-selector，SS）：类似于PS，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签，语法格式：A>B{...}（A、B为HTML元素/标签）。例：以下div内的p标签匹配样式，div内的table内的p不匹配
<style>
div>p{
color:red;
}
</style>
<div>
<p>red text</p><!--文字是红色的-->
<table>
<tr>
<td>
<p>no red text;</p><!--文字是非红色的-->
</td>
</tr>
</table>
</div>
7.兄弟选择器（brother selector，BS）：BS是CSS3.0新增的一个选择器，语法格式：A~B{...}（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）
<style>
div~p{
color:red;
}
</style>
<div>
<p>no red text</p><!--文字是非红色的-->
<div>no red text</div>
<p>red text</p><!--文字是红色的-->
</div>
1. 补充包含选择器：
包含选择器除了有 A B{...} 的形式外（A和B都是标签），还可以有这种形式：.A B{...} 的形式（A是类名，B是标签）。
作用与上面介绍的相同，会使 class 名为 A 的标签里面所有名为 B 的子代标签的内容按照设定的内容显示。
<style>
.first span{
color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
<li><span>内容也是红色</span></li>
<li><span>内容也是红色</span></li>
</ol></p>
</body>
2. 补充子选择器
子选择器除了有 A >B{...} 的形式外（A和B都是标签），还可以有这种形式：.A >B{...} 的形式（A是类名，B是标签）。
作用与上面介绍的相同，会使 class 为 A 的标签里面所有名为 B 的直接子代标签的内容按照设定的内容显示。而非直接子代的 B 标签的内容是不会改变的。
<style>
.first>span{
color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
<li><span>内容不是红色</span></li>
<li><span>内容不是红色</span></li>
</ol></p>
</body>
3.通用选择器
语法形式为：*{属性：属性值}。它的作用是匹配 html 中的所有元素标签。
<!--使用html中任意标签元素字体颜色全部设置为红色：-->
<style>
*{color:red;}
</style>
<body>
<h1>标题为红色</h1>
<p>段落也为红色</p>
</body>
相邻选择器。
语法形式为：
A+B{
声明1;
声明;
...
}
实例:
<!--相邻选择器选择每个div紧邻后的一个元素p-->
<style>
div+p{
color: red;
}
</style>
<div>
<p>not red text</p>
<p>not red text</p>
</div>
<p>red text</p>
<p>not red text</p>
css各类选择器类型和用法的更多相关文章
- CSS选择器的新用法
前面的话 现在,预处理器(如sass)似乎已经成为开发CSS的标配,正如几年前jQuery是开发JS的标配一样.JS的querySelector借鉴了jQuery的选择器思想,CSS选择器也借鉴了预处 ...
- css格式比较及选择器类型总结
在前端入门的前三天把网页制作过程中常用的一些标签和属性都认识和练习了一遍,能够做出简单模块的框架.就像老师说的网页制作就像建一栋大楼,html是砖和水泥,css是精装,js是完善各个功能.现在就开始进 ...
- CSS选择器类型总结
CSS选择器类型总结 1.通用选择器 一般用于给所有元素做一些通用性的样式设置,比如清除内边距.外边距等.但是效率比较低,尽量不要使用. * { margin: 0; padding: 0; } 2. ...
- CSS中的各类选择器
属性选择器 结构性伪类选择器 UI状态伪类选择器 CSS其他选择器
- CSS系列------选择器和选择器的优先级
1.1.基本选择器 通配符选择器(*) 通配符选择器的使用方法如下 *{margin:0px; padding:0px;} //*代表所有的 ID选择器(#) ID选择器的使用方式如下: * ...
- css基础-选择器
CSS选择符(选择器) 一.各类选择器 选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素. 常用的选择符有十种左右 类型选择符,id选择符,class选择符,通配符,群组 ...
- 1:CSS中一些@规则的用法小结 2: @media用法详解
第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule ...
- CSS 属性选择器的深入挖掘
CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...
- 0009 CSS基础选择器（ 标签、类、id、通配符）
typora-copy-images-to: media 第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用 ...
随机推荐
- 剑指offer-面试题15-二进制中1的个数-位运算
/* 题目: 二进制中1的个数,例如9为1001,有2位1. */ /* 思路: 算法2: 左移unsigned类型flag=1,和n做&运算,当flag移动中1的位置与n对应位置也为1时,则 ...
- centos7 下 安装GeoIP2，在nginx中根据ip地址对应的国家转发请求
最近有个需求是根据用户的地理位置,访问不同的服务器,比如国外用户访问国外的服务器,国内的用户访问国内的服务器,实现的思路主要两种: 智能dns,这个需要在阿里云中注册为企业版才有提供 nginx中使用 ...
- 欢迎来到ZhuSenlin的博客
置顶说明: 本博客的目的:为了巩固自己所学知识,努力提高自己的专业技能:若文章能够帮助到你,是我莫大的荣幸. 本博客的文章主要涉及的领域为游戏开发(本人不才,也在努力学习中) 随笔主要记录一些琐碎的知 ...
- git flow开发分支管理模型
Git Flow 是什么 Git Flow是构建在Git之上的一个组织软件开发活动的模型,是在Git之上构建的一项软件开发最佳实践.Git Flow是一套使用Git进行源代码管理时的一套行为规范和简化 ...
- 统一身份认证服务IdentityServer4实践
导读 当企业的应用系统逐渐增多后,每个系统单独管理各自的用户数据容易形成信息孤岛,分散的用户管理模式阻碍了企业应用向平台化演进.当企业的业务发展到一定规模,构建统一的标准化账户管理体系将是必不可少的, ...
- springboot里面的缓存注解
https://blog.csdn.net/u012240455/article/details/80844361 https://lfvepclr.gitbooks.io/spring-framew ...
- Linux内核0.11代码阅读（转）
最近决定开始阅读Linux 0.11的源代码. 学习Linux操作系统的核心概念最好的方法莫过于阅读源代码.而Linux当前最新的源代码包已经有70MB左右,代码十分庞大,要想深入阅读十分困难.而Li ...
- C++——模板、数组类
1.函数模板:可以用来创建一个通用功能的函数,以支持多种不同形参,进一步简化重载函数的函数体设计. 声明方法:template<typename 标识符> 函数声明 求绝对值的模板 #in ...
- Linux - mysql 异常： ERROR! MySQL is not running, but lock file (/var/lock/subsys/mysql) exists
问题描述 ERROR! MySQL is not running, but lock file (/var/lock/subsys/mysql) exists 解决方案 删除:/var/lock/su ...
- IDEA构建maven项目生成的文件详解
IDEA构建的maven+springBoot项目结构如下: 1. .gitignore:分布式版本控制系统git的配置文件,意思为忽略提交 在 .gitingore 文件中,遵循相应的语法,即在每一 ...