CSS选择器详解1——常用选择器
来源:互联网 发布:seo诊断seo8 编辑:程序博客网 时间:2024/06/17 14:15
CSS选择器,实现对HTML页面元素的选择控制,为元素精确添加CSS样式。
选择器种类有很多,将其比较分类有利于对选择器进行系统的掌握。每个人都有不同的分类方法,我根据选择器的功能特点及其分支大致将其归为四大类——常用选择器、属性选择器、后代选择器、伪类选择器。
此文中,只对常用选择器进行归类整理。
(元素用字母“E”表示;属性用字母“A”表示;class表示类名;id表示id名)
1.通配选择器
语法规则: * {声明块}
选择对象: HTML文档中的所有元素
eg:
* {color:green;}/*将所有的HTML文档中的元素颜色设置为绿色*/
2.元素选择器
语法规则: E {声明块} / E1,E2{声明块}
选择对象: 对应的元素
eg:
p {font-size:20px; color:green;}/*将文档中所有段落字体设置为20,颜色设置为绿色*/
若对其他元素做同样颜色设置,可以将元素直接替换,则替换元素会被设置一样的样式。(将h1做出与p相同样式设置,示例代码如下)
h1 {font-size:20px; color:green;}/*h1元素字体设置为20,颜色为绿色*/
若多个元素有相同的样式设置,则可以对其分组。元素名在声明块之间用“,”链接即可。(示例代码如下)
p,h1 {font-size:20px; color:green;}
3.类选择器
语法规则: .class {声明块}
选择对象: 具有该类名的元素
attention:在使用该选择器之前需要在html文档中添加class标记。
eg:
(示例代码如下:)
/*html文档*/<p>this is an simple example</p><p class="hello">this is the first example</p><p class="world">this is the second example</p>/*样式表*/.hello {font-style:italic; color:red;}/*对类名为hello的元素进行字体和颜色的设置,其他段落不会匹配该样式*/
点号之前可以加元素,用于匹配拥有该类名的指定元素,而与其他类型的元素不匹配。(示例代码如下:)
/*html文档*/<p>this is an simple example</p><p class="hello">this is the first example</p><p class="world">this is the <span class="hello">second</span> example</p>/*样式表*/p.hello {font-style:italic; color:green;}/*p和span同属hello类,但在选择器之前加了p元素,span不是段落元素,那么span元素就不满足该选择器,所以不会设置该样式*/
4.多类选择器
语法规则: .class1 class2 …classN {声明块} (各词之间空格分隔)
选择对象: 同时满足所有罗列类名的元素
attention:
类名前后顺序无关紧要。
元素的类名列表相比于选择器类名多一个或者少一个,都会匹配失败。属于全串匹配。
eg:
/*html文档*/<p class="hi">this is an simple example</p><p class="hello">this is the first example</p><p class="hello hi">this is the <span class="hello">second</span> example</p>/*样式表*/.hello hi {font-style:italic; color:green;}/*只有第3个段落满足类名列表,所以该样式表只作用于第3个段落*/
5.id选择器
语法规则: #id {声明块}
选择对象: 具有该id的元素
attention: 类选择器与id选择器类似,但是同一页面内,同一类名class可以设置给多个元素,但同一id只能设置给一个元素。
eg:
/*html文档*/<p id="happy">the font will be boldfaced.</p> <p>the font is normal</p>/*样式表*/#happy {font-weight:bold;}
一个元素只能设置一个id,一个id唯一标识一个元素。
- CSS选择器详解1——常用选择器
- CSS—常用选择器
- CSS 类选择器详解——CSS 多类选择器
- CSS基础-22选择器-选择器详解(1)
- CSS——选择器
- CSS——选择器
- CSS—组合选择器
- CSS—选择器
- CSS——选择器——元素选择器+后代选择器
- 常用css的选择器
- 常用的css选择器
- CSS常用选择器
- CSS常用选择器学习
- css常用选择器
- CSS常用选择器汇总
- 常用CSS选择器
- CSS常用选择器
- 常用的css选择器
- hibernate状态
- mybatis--映射器
- 剑指offer--入栈、出栈正确性的判断
- C语言-数据结构-双链表插入查找
- CentOS7下安装MySQL5.7安装与配置(YUM)
- CSS选择器详解1——常用选择器
- C++和Java的浅层拷贝与深层拷贝
- 二叉树的遍历
- POJ 1177 Picture 笔记
- 你需要理解的 Java 反射机制知识总结
- Python压缩文件
- 4883: [Lydsy2017年5月月赛]棋盘上的守卫
- 在网页中使用个性字体
- 汇编--学习笔记(四)-DOS功能调用