|
CSS常用选择器
CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,一起来看看吧!
一、通配符选择器
通配符选择器常用 ‘*’ 号表示,它是所有选择器里作用范围最广的,能匹配页面中所有的元素。
基本语法格式:*{ 属性1:属性值1;属性2:属性值2;}
例子
使用该选择器定义样式,清除所有HTML标记的默认边距。- *{
- margin:0; /*定义外边距*/
- padding:0; /*定义内边距*/
- }
复制代码 但实际开发中不建议使用通配符选择器,因为它设置的样式对所有的HTML标记都生效,不管标记是否需要该样式,反而降低了代码的执行速度。
二、标签选择器
标签选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标签指定统一的CSS样式。
基本语法格式:标签名{ 属性1:属性值1;属性2:属性值2;}
所有的HTML标记名都可以作为标签选择器,例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。
例子
使用p选择器定义HTML页面中所有段落的样式。- p{ font-size: 12px; color: #666; font-family:"微软雅黑"; }
复制代码 标签选择器最大的优势是能快速为页面中同类型的标签统一样式,同时这也是它的缺点,不能设计差异化样式。
三、类选择器
类选择器使用**‘.’**(英文点号)进行标识,后面紧跟类名。
基本语法格式:.类名{ 属性1:属性值1;属性2:属性值2;}
该语法中,类名即为HTML元素的class属性值,大多数HTML元素都可以定义class属性。
例子- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>类选择器</title>
- 6 <style type="text/css">
- 7 .red{color: red;}
- 8 .green{color:green;}
- 9 .font22{font-size:22px;}
- 10 p{ text-decoration:underline; font- family:"微软雅黑"; }
- 11 </style>
- 12 </head>
- 13 <body>
- 14 <h2 class="red">二级标题文本</h2>
- 15 <p class-"green font22">段落文本内容</p>
- 16 <p class="red font22">段落二文本内容</p>
- 17 <p>段落三文本内容</p>
- 18 </body>
- 19 </html>
复制代码 类选择器最大的优点是可以为元素对象定义单独或相同的样式,而且多个标记可以使用同一个类名,可以实现为不同类型的标记指定相同的样式。同时,一个HTML元素也可以应用多个class类,设置多个样式,此时多个类名之间需要用空格隔开,如上述代码中的前两个<p>标记。
注意:类名的第一个字符不能使用数字,并且严格区分大小写。一般采用小写的英文字符。
四、id选择器
id选择器使用**‘#’**进行标识,后面紧跟id名。
基本语法格式:#id名{ 属性1:属性值1;属性2:属性值2;}
该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。
例子- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>id选择器</title>
- 6 <style type="text/css">
- 7 #bold{font -weight:bold; }
- 8 #font24 {font-size:24px; }
- 9 </style>
- 10 </head>
- 11 <body>
- 12 <pidf"bold">段落1: id="bold",设置粗体文字。</p>
- 13 <p id="font24">段落2: id="font24", 设置字号为24px。</p>
- 14 <p id="font24">段落3: id="font24", 设置字号为24px。</p>
- 15 <pid="bold font24">段落4: id="bold font24",同时设置粗体和字号24px。</p>
- 16 </body>
- 17 </html>
复制代码 注意:同一个id不允许应用于多个标记,虽然很多浏览器并不会报错,但JavaScript等脚本语言调用id时会出错。另外,id选择器不支持像类选择器那样定义多个值。
五、属性选择器
属性选择器可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
语法格式:[标签名称] { 属性1:属性值1;属性2:属性值2;}
注意:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。
CSS 选择器参考手册:
选择器 | 描述 | [attribute] | 用于选取带有指定属性的元素 | [attribute=value] | 用于选取带有指定属性和值的元素 | [attribute~=value] | 用于选取属性值中包含指定词汇的元素 | [attributeI=value] | 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词 | [attribute^=value] | 匹配属性值以指定值开头的每个元素 | [attribute$=value] | 匹配属性值以指定值结尾的每个元素 | [attribute*=value] | 匹配属性值中包含指定值的每个元素 | 例子
1、为带有 title 属性的所有元素设置样式:2、为 title=“W3School” 的所有元素设置样式:- [title=W3School]
- {
- border:5px solid blue;
- }
复制代码 3、为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:- [title~=hello] { color:red; }
复制代码 4、为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:- [lang|=en] { color:red; }
复制代码 5、设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用:- input[type="text"]
- {
- width:150px;
- display:block;
- margin-bottom:10px;
- background-color:yellow;
- font-family: Verdana, Arial;
- }
- input[type="button"]
- {
- width:120px;
- margin-left:35px;
- display:block;
- font-family: Verdana, Arial;
- }
复制代码 使用属性选择器,可以只指定元素的某个属性,还可以同时指定元素的某个属性和其对应的属性值。
六、并集选择器
并集选择器是同时匹配多个选择器,取多个选择器的并集,选择器之间用逗号隔开,如em,strong{ }。
语法格式:
标签名称1,标签名称2 { 属性1:属性值1;属性2:属性值2;}
例子- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta name="author" content="https://www.cnblogs.com/jizuiku"/>
- <title></title>
- <style type="text/css">
- span,div, .content {
- color:darkorange;
- }
- </style>
- </head>
- <body>
- <span>博客园</span>
- <div>给最苦</div>
- <p class="content">网页设计</p>
- </body>
- </html>
复制代码 并集选择器的优点是将多个标签的相同样式 提取出来,集体声明,优化代码,方便阅读。
七、后代选择器
后代选择器也称包含选择器,用来选择特定元素的后代。如.asideNav li{ },表示先匹配第二个选择器的元素,并属于第一个选择器内。
语法格式:
标签名称1 标签名称2{ 属性1:属性值1;属性2:属性值2;}
在CSS中,后代是根据HTML文档中的DOM上下文来决定的。当元素发生嵌套时,内层的元素就成为外层元素的后代。如元素B嵌在元素A内部,B就是A的后代。而且,B的后代也是A的后代,就像家族关系。
定义后代选择器时,外层的元素写在前面,内层的元素写在后面,中间用空格分隔。后代选择器会影响到它的各级后代,没有层级限制。如:上述选择器中,div 为祖先元素,p 为后代元素,其作用就是选择 div 元素的所有后代 p元素,不管 p 元素是 div 元素的子元素、孙辈元素或者更深层次的关系,都将被选中。换句话说,不论 p 是 div 的多少辈的后代,p 元素中的文本都会变成红色。
例子
后代选择器中的空格,是用来表示后代层级的,当然就不限于二级的。根据需要,从任一个祖先元素开始,直到想应用样式的那个元素,都可以被放到后代选择器链中。如:- <ul>
- <li><a href="/home/">首页</a></li>
- <li><a href="/new/">新房</a></li>
- <li><a href="/esf/">二手房</a></li>
- <ul>
- <li><a href="/sale/">出售房源</a></li>
- <li><a href="/buy/">求购房源</a></li>
- </ul>
- <li><a href="/rent/">租房</a></li>
- </ul>
复制代码 上述导航菜单中,假如希望所有锚文本的字体大小是16px,就可以通过后代选择器ul a来选择 ul 元素的所有后代,因为后代选择器会影响到它的各级后代。如:假如又希望第二级列表项的锚文本的字体大小是12px,就可以通过ul.nav ul a的这种多层后代关系的后代选择器,它只选择第二级列表项的锚文本。- ul li a {
- font-size: 12px;
- }
复制代码 当然,这个后代选择器也可以写成ul、li、ul、li、a,以实现更精准的控制。
注意:
1、后代包括儿子,孙子,只要是放在指定标签的后代都是。
2、也可以不用标签名称1、2,也可以用id和class名,分别用id和class来选择。
3、后代选择器可以无限衍生。
八、子代选择器
子代选择器使用**‘>’**表示,如ul>li{ },表示匹配第二个选择器,且为第一个选择器的元素的后代。
语法格式:
标签名称1>标签名称2{ 属性1:属性值1;属性2:属性值2;}
例子- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>实例</title>
- <style>
- #box>p{
- color: darkorange; /*设置颜色为 深橙色*/
- font-size: 80px;
- }
- </style>
- </head>
- <body>
- <div id="box">
- <div>
- <div>
- <div>
- <p>
- 狸花猫
- </p>
- </div>
- </div>
- </div>
- <p>
- 大橘猫
- </p>
- </div>
- </body>
- </body>
- </html>
复制代码 注意:
1、只会查找儿子,不会查找其他被嵌套的标签。
2、子元素选择器也可以用其他的id和class选择器来进行查找。 3、子元素选择器也可以通过>符号一直延续下去。
九、兄弟选择器(+和~)
相邻兄弟选择器使用+号表示,如p+a{ },表示匹配紧跟第一个选择器并匹配第二个选择器的元素,如紧跟p元素后的a的元素。
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。
语法格式:标签名称1+标签名称2 { 属性1:属性值1;属性2:属性值2;}
例子- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/css">
- h1 + p {
- margin-top:50px;
- color:red;
- }
- </style>
- </head>
- <body>
- <p>This is paragraph.</p>
- <h1>This is a heading.</h1>
- <p>This is paragraph.</p>
- <p>This is paragraph.</p>
- </body>
- </html>
复制代码 兄弟只会影响下面的p标签的样式,不影响上面兄弟的样式。
注意这里的’+’的意义跟’and’意义不一样,兄弟选择器的样式是应用在兄弟元素上,跟参照的元素样式无关,如上例只影响p元素的样式,而不影响h1标签的样式。
当两个兄弟元素相同时,会实现一次循环查找:- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/css">
- li + li {
- color:red;
- }
- </style>
- </head>
- <body>
- <div>
- <ul>
- <li>List item 1</li>
- <li>List item 2</li>
- <li>List item 3</li>
- </ul>
- </div>
- </body>
- </html>
复制代码 而~ 选择器 :作用是查找某一个指定元素的后面的所有兄弟结点。- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/css">
- h1 ~ p{
- color:red;
- }
- </style>
- </head>
- <body>
- <p>1</p>
- <h1>2</h1>
- <p>3</p>
- <p>4</p>
- <p>5</p>
- </body>
- </html>
复制代码 十、伪选择器
伪选择器是一种特殊的选择器,它分为伪类选择器和伪对象选择器2种。
1.伪类选择器:
CSS提供了五种基本伪类选择器,分别对应HTML标记的五种状态。
伪类选择器 | 作用 | 应用对象 | :hover | 定义标记在鼠标悬停(划过)时的样式 | 所有显示标记 | :link | 定义标记在超链接状态下的样式 | a标签 | :focus | 定义标记在获取焦点时的样式 | a标签(IE浏览器不支持) | :visited | 定义标记被访问过后的样式 | a标签 | :active | 定义标记在选定时刻下的样式 | a标签 | 例子
以下是5个a标签- <a href="#" id="a1">链接1</a>
- <a href="#" id="a2">链接2</a>
- <a href="#" id="a3">链接3</a>
- <a href="#" id="a4">链接4</a>
- <a href="#" id="a5">链接5</a>
复制代码 加点CSS样式:- a{
- padding: 10px;
- color:black; /*初始颜色全为黑色*/
- font-weight: bold;
- }
- #a1:hover{
- color:red; /*当鼠标悬停时链接1变成红色*/
- }
- #a2:link{
- background-color: blue; /*给链接2添加蓝色的背景色*/
- }
- #a3:focus{
- color:yellow; /*当链接3获取焦点时变为黄色,失去焦点时恢复黑色*/
- }
- #a4:visited{
- color:green; /*被访问过后的链接4变为绿色*/
- }
- #a5:active{
- background-color: blue; /*鼠标点击的那一瞬间给链接5添加蓝色的背景*/
- }
复制代码 除了以上五种基本伪类选择器之外,CSS还支持诸如:”:first-child“首元素选择器和“:lang()”语言选择器等伪类选择器。
2.伪对象选择器
伪对象选择器根据对象内部的局部元素定义其样式。
伪对象选择器 | 作用 | :first-letter | 定义文本的第一个字符样式 | :first-line | 定义文本的首行样式 | :before | 定义对象之前内容的样式 | :after | 定义对象之后内容的样式 | 例子使用:before和:after样式后:- p:before{
- content:'我说:“';/*在文本前面追加内容*/
- color:red;
- }
- p:after{
- content:'。”我说完了!';/*在文本结尾追加内容*/
- color:red;
- }
复制代码 以上就是CSS常见的选择器啦,你记住了吗?^_^ |
|