时间:2021-07-01 10:21:17 帮助过:12人阅读
通配符,选择页面所有元素。
1 *{ 2 margin:0; 3 padding:0; 4 }
上面代码的作用是把页面上所有元素的内外边距设置为 0,这是最基本的清除默认 CSS 样式的方法。在平时练习时使用这个没问题,但在实际的项目中不建议使用,可以使用世界级专家 Eric Meyer 的 CSS Reset 方案来重置浏览器默认样式,也可以使用 Normalize.css, CSS reset 和 Normalize 存着着根本理念上的差异,前者是将所有浏览器自带的样式重置掉,以确保各浏览器渲染的一致性,而后者则是尽量保留浏览器的默认样式,是一个可定制的 CSS 文件,使浏览器渲染所有元素更加一致,符合现代标准,Bootstrap 就使用了该方案。也可以百度参考各大网站 CSS 代码初始化样式。
* 也可以用来选择某元素的所有子元素。
1 #box *{ 2 background-color:blue; 3 }
上面的代码,会选则 ID 为 box 下的所有元素。
ID 选择器,选择具有指定 id 属性的元素。
1 #content{ 2 width:960px; 3 margin:0 auto; 4 }
ID 就像身份证一样,具有唯一性,所以 ID 选择器是 CSS 中效率最高的选择器。
类选择器,选择具有指定类的所有元素。
1 .main{ 2 color:red; 3 }
class 选择器和 id 选择器不同的是,一个页面可以有多个 class,并且 class 可以在不同的标签中使用,如果样式相同的话。当你想对多个元素设置样式时就可以使用 class,而只是对某个特定的元素设置样式那就使用 id。
(1)、什么时候使用 ID,什么时候使用 Class
ID 和 Class 最主要的区别就在于 ID 不能重复,只能使用一次,一个 ID 只能用于一个标签。而 Class 可以重复使用,同一个 Class 可以定义在多个标签上,且一个标签可以定义多个 Class。简单理解,就是 ID 只能调用一次,而 Class 可以调用无数次。
在同一个页面中只出现一次的块可以使用 ID 定义,比如网站的布局:头部、主体、侧边栏和页脚等。ID 主要用于特殊的元素,针对性强。
而 Class 是一个集体声明,当相同样式应用于很多元素时,则使用 Class 定义。在一个网站中,需要调用的公用类比较多,所以使用 Class 可以写一些公用类,在使用时调用就可以了。
总结:只有一个独立样式的元素用 ID,而多个元素拥有相同样式时用 Class。
另外,document 的方法中 getElementById() 这个方法只能调用指定 ID 属性的元素,因此当页面中用到 JS 或者要动态调用对象时,就要用到 ID。当然也可以通过标签名、name 属性获取元素,还可以通过元素的 className 来获取元素,所以还是要根据实际的需求来决定使用哪个。如果一个元素使用 JS 进行交互,在命名时,可以在名称前边加上一个 J,这样能增强代码的可读性,在页面量大的情况下,便于调用,但不能使用加了 J 的名称来定义 CSS 样式。
标签选择器,选择指定标签名称的所有元素。
1 a{ 2 text-decoration:none; 3 }
如果你想让页面上所有指定标签的样式改变,可以直接使用标签选择器。
分组选择器,在样式表中具有相同样式的元素,就可以使用分组选择器,把所有元素组合在一起,元素之间用逗号分隔,这样只需要定义一组 CSS 声明。
1 h1, h2, h3, h4, h5, h6 ,p{ 2 color:red; 3 }
上面的代码,选择页面上所有 h1 - h6 元素以及段落。
后代选择器,选择指定元素内部的所有子元素,包括子元素、孙元素、曾孙元素等等。
1 li a{ 2 text-decoration:none; 3 }
如果你想选择更加具体的元素,就可以使用后代选择器。比如:并不需要去掉页面中所有链接的下划线,而只是去掉所有列表链接的下划线,这时就可以使用后代选择器。
子元素选择器,选择指定父元素的所有直接子元素,不包括孙元素、曾孙元素等等。
1 div > ul{ 2 border:1px solid black; 3 }
如果不希望选择任意的后代元素,而只是选择某个元素的子元素,那么就使用子元素选择器。
X Y 和 X > Y 的区别:前者作用于指定元素的所有后代元素,而后者只作用于指定元素的第一代后代,即直接子元素。
相邻兄弟选择器,选择相同父元素下,紧跟着指定元素之后的兄弟元素。
1 ul + p{ 2 color:red; 3 }
上面的代码,选择所有相同父元素下紧跟着 ul 元素之后的第一个 p 元素。
普通兄弟选择器,选择相同父元素下,指定元素后的所有兄弟元素。
1 ul ~ p{ 2 color:red; 3 }
上面的代码,选择所有相同父元素下 ul 元素之后的每一个 p 元素。
与相邻兄弟选择器不同,普通兄弟选择器,兄弟元素不必紧跟在指定元素的后面,并且选择指定元素后面所有的兄弟元素。
属性选择器,选择所有指定属性的元素。
1 a[target]{ 2 background-color:red; 3 }
上面的代码,选择所有带有 target 属性的 a 元素。那些没有此属性的锚点将不会应用此样式。
属性和值选择器,选择所有指定属性和值的元素。
1 a[target=_blank]{ 2 background-color:red; 3 }
上面的代码,选择所有属性为 target="_blank" 的 a 元素。只应用于在新标签页打开的链接,其他锚点将不受影响。
这个选择器用于选择属性值包含一个指定单词的元素。~ 符号可以选择指定属性值是空格分隔多值的元素。
1 img[title~=flower]{ 2 border:2px solid blue; 3 }
上面的代码,选择所有带有 title 属性值包含 flower 单词的 img 元素。
这个选择器用于选择属性以指定值开始的元素。
注意:该值必须是整个单词,无论是单独的像 lang="en",或者像连字符(-)连接的如 lang ="en-us" 都可以。
1 [class|=test]{ 2 background-color:yellow; 3 }
上面的代码,选择所有 class 属性以 test 开头的元素。
在 CSS2 中定义的 ~=、|= 和在 CSS3 中定义的 *=、^=、$= 之间的区别:
~= 和 *= 都可以选择属性值包含指定值的元素,前者必须是一个独立的单词,比如 test-a 和 test a 可以被选中,而 testa 不能被选中。而后者这三个都可以选中,只要是值的子串就可以了。
其他选择器和上面的原理相同,即 |= 和 ~= 特性相同,^=、$= 和 *= 特性相同。
这个选择器匹配元素属性值包含指定值的元素。该选择器类似于与上面的选择器,但是比上面的选择器更强大更灵活。* 符号可以选择指定属性值包含子字符串的元素,也就说,只要属性值中带有指定的值,无需是一个单词,无需空格分开,就可以匹配。
1 div[class*="test"]{ 2 background-color:red; 3 }
上面的代码,选择所有 class 属性的值包含子字符串 "test" 的 div 元素。
DEMO:注意观察下面代码,各元素 title 属性的定义以及所使用的选择器,在页面截图中对比这两个选择器的区别:
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>属性包含选择器的区别title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 img{ 12 width:90px; 13 height:90px; 14 } 15 16 img[title~=boy]{ 17 border:5px solid blue; 18 } 19 20 img[title*=girl]{ 21 border:5px solid red; 22 } 23 24 img[title~=boy]{ 25 width:60px; 26 height:60px; 27 } 28 29 img[title*=girl]{ 30 width:120px; 31 height:120px; 32 } 33 style> 34 head> 35 <body> 36 <img src="images/1.jpg" title="xxgirl-a" alt=""> 37 <img src="images/2.jpg" title="boy a" alt=""> 38 <img src="images/3.jpg" title="xxgirloo-b" alt=""> 39 <img src="images/4.jpg" title="boy-b" alt=""> 40 body> 41 html>
在 Chrome 中显示如下:
X[attr*=value] 选择器那是相当强大的,在某些时候将显得尤为重要,比如页面中有很多不同的链接地址时,想要更改某一域名相同的链接的样式时,使用这个选择器那简直是没谁了。
1 a[href*="ximo"]{ 2 background-color:red; 3 font-size:20px; 4 }
上面的代码,就指定了所有 href 属性值中包含 ximo 的链接的样式,那不管它是 http 的 ximo 还是 https 的 ximo,也不管它是 ximo.com 还是 ximo.cn,更不管它是 ximo.com/index.php?postid=1234567 还是 ximo.com/#zh/a%b%C%2B,只要该属性值中包含 ximo,统统吃掉,是统统都改变样式。
强大固然好,但往往太强大的东西,就有可能超出控制,所以使用这个选择器还得小心行事,避免造成不必要的结果。比如这样的:http://www.domo.com/ximo 也会匹配。
这个选择器用于匹配元素属性值带有指定的值开始的元素。
1 a[href^="https"]{ 2 background-color:red; 3 }
上面的代码,选择所有 href 属性的值以 "https" 开头的 a 元素。
这个选择器匹配元素属性值带有指定的值结尾的元素。
1 img[src$=".png"]{ 2 border:2px solid red; 3 }
上面的代码,选择所有 src 属性的值以 ".png" 结尾的 img 元素。
伪类选择器。
:link 选择所有未访问的链接。
:visited 选择所有访问过的链接。
1 a:link{ 2 color:red; 3 } 4 a:visited{ 5 color:purple; 6 }
上面的代码,所有未访问的链接显示为红色,所有访问过的链接显示为紫色。
伪类选择器。
用于选择活动的链接,当鼠标点击一个链接时,他就会成为活动链接,该选择器主要用于向活动链接添加特殊样式。
1 a:active{ 2 background-color:yellow; 3 }
上面的代码,当点击页面每个链接时,显示黄色背景色。
伪类选择器。
用于选择当前活动的目标元素。
1 #news:target{ 2 background-color:yellow; 3 }
上面代码,选择当前活动的 ID 为 #news 的元素,#news 即包含该锚名称的点击的 URL。
URL 带有 # 锚的名称,指向文档中一个具体的元素,即链接到某个元素的 URL,这个被链接的元素就是目标元素(target element)。
下面的例子,突出显示活动的 HTML 锚:
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>:targettitle> 6 <style> 7 :target{ 8 border:2px solid red; 9 background-color:#CFCFCF; 10 } 11 style> 12 head> 13 <body> 14 <h1>我是大标题h1> 15 16 <p><a href="#news1">跳转至内容 1a>p> 17 <p><a href="#news2">跳转至内容 2a>p> 18 19 <p>点击上面的链接,:target 选择器会突出显示当前活动的 HTML 锚。p> 20 21 <p id="news1"><b>内容 1 ...b>p> 22 <p id="news2"><b>内容 2 ...b>p> 23 body> 24 html>
注意:IE9+ 以及所有浏览器都支持该选择器,IE8 以及更早版本的浏览器不支持。
在 Chrome 中显示如下:
伪类选择器。
:hover 用于当鼠标移入链接时添加的特殊样式。
:hover 选择器可用于所有元素,不仅是链接,主要用于定义鼠标滑过效果。
1 div:hover{ 2 background-color:pink; 3 } 4 a:hover{ 5 border-bottom: 1px solid red; 6 }
上面的代码,当鼠标移入所有 div 元素时显示粉色背景色,当鼠标移入所有链接时显示 1 像素的底边框。
伪元素选择器,在网上有很多创造性用法,主要用于在指定元素周围生成一些内容。
:before 和 :after 这俩小伙伴,用于在指定元素之前和之后插入内容,使用 content 属性来指定要插入的内容,具体应用可以点这里。
(1)、:before
配合 CSS 的 content 属性在指定元素之前插入内容。
1 p:before{ 2 content:"看这里 - "; 3 color:red; 4 font-weight:bold; 5 }
上面的代码,在所有段落之前插入 “看这里 - ”并显示为红色的粗体字。
(2)、:after
配合 CSS 的 content 属性在指定元素之后插入内容。
该伪元素有一个比较神奇的创造性用法,那就是 clearfix:after,即清除浮动。
在 CSS 中,浮动会使元素向左或向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止,其周围的元素也会重新排列。浮动元素之后的元素将围绕它,由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。简单理解就是,浮动元素脱离了文档流,包围图片和文本的 div 不占据空间。如下:
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮动问题title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 #box{ 12 border:2px solid red; 13 width:800px; 14 } 15 .float{ 16 width:200px; 17 height:200px; 18 float:left; 19 background:#9C9C9C; 20 margin-right:10px; 21 } 22 style> 23 head> 24 <body> 25 <div id="box" class="clearfix"> 26 <div id="" class="float"> 27 div> 28 <div id="" class="float"> 29 div> 30 <p>浮动元素脱离了文档流,包围图片和文本的 div 不占据空间。p> 31 <img src="images/1.jpg" width="90px" height="90px" alt=""> 32 div> 33 <img src="images/4.jpg" alt=""> 34 body> 35 html>
在 Chrome 中显示如下:
如上图所示,容器内部使用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,浮动元素脱离了文档流,包围图片和文本的 div 不占据空间。在 IE、Firefox 等符合 W3C 的标准浏览器中,如果有一个 DIV 作为外部容器,内部的 DIV 如果设置了 float 样式,则外部的容器 DIV 因为内部没有 clear,导致不能被撑开。如下所示:
要解决浮动问题,可以给父容器设置 overflow:hidden; 属性,父容器的高度可被自动撑开。现在让我们来了解一下更高级的用法,即使用 :after 伪元素来清除浮动。上面的例子中,给父容器设置了一个 class 类 clearfix,现在给他应用如下样式:
1 .clearfix:after{ 2 content:" "; 3 display:block; 4 height:0; 5 clear:both; 6 }
在 Chrome 中显示如下:
可以看到父容器高度被撑开了,这就是 clearfix:after 清除浮动的应用,他的原理是:创建一个内容为空高度为0的块来为目标元素清除浮动。在标准浏览器下,.clearfix:after 会在应用到 clearfix 的元素后面插入一个 clear:both 的块级元素,从而达到清除浮动的作用。这样在需要清除浮动时,只要声明一个 .clearfix,然后在需要清浮动的元素中添加 clearfix 类名就好了。
这个选择器用于选择具有焦点的元素,该选择器接受键盘事件或其他用户输入的元素。
1 input:focus{ 2 background-color:yellow; 3 }
上面的代码,当输入域获得焦点时显示为黄色背景。
(1)、:first-child
:first-child 选择器匹配父元素中第一个子元素。如果不是指定的子元素,则匹配失败。
p:first-child 等同于 p:nth-child(1)。
1 p:first-child{ 2 color:red; 3 }
上面代码,选择所有相同父元素中第一个 p 元素。
(2)、:last-child
:last-child 选择器匹配父元素中最后一个子元素。如果不是指定的子元素,则匹配失败。
p:last-child 等同于 p:nth-last-child(1)。
1 p:last-child{ 2 background:red; 3 }
上面的代码,选择所有相同父元素中最后一个 p 元素。
一、他们有什么区别呢?
:first-child 和 :first-of-type 这两个选择器都可以选择父元素中的第一个子元素,
:last-child 和 :last-of-type 这两个选择器都可以选择父元素中最后一个子元素。
用 :first-child 和 :first-of-type 做比较:
:first-child 是在 CSS2 中定义的,:first-of-type 是在 CSS3 中定义的。
前者用于匹配相同父元素下第一个子元素,而后者是匹配指定类型的第一个子元素。如下:
1 <div> 2 <p>我是第一个子元素p> 3 <h1>我是第二个子元素h1> 4 <span class="">第三个子元素span> 5 <span class="">第四个子元素span> 6 div>
:first-child
p:first-child 匹配到 p 元素,因为 p 元素是 div 的第一个子元素。
h1:first-child 匹配失败,因为 h1 是 div 的第二个子元素,而不是第一个。
span:first-child 匹配失败,因为这两个 span 元素都不是 div 的第一个子元素。
:first-of-type
p:first-of-type 匹配到 p 元素,因为 p 是 div 中所有类型为 p 的子元素中的第一个。
h1:first-of-type 匹配到 h1 元素,因为 h1 是 div 中所有类型为 h1 的子元素中的第一个。
span:first-of-type 匹配到第三个子元素 span,上面代码中 div 有两个类型为 span 的子元素,该选择器匹配它们中的第一个。
总结: :first-child 匹配相同父元素的第一个子元素,即结构上的第一个子元素。而 :first-of-type 匹配的是相同父元素下同类型子元素中的第一个,该选择器主要指定的是同类型,不再限制是第一个子元素,只要是指定类型的元素中第一个就行了。
:last-child 和 :last-of-type 都是在 CSS3 中定义的,他们的区别与上面总结的原理相同。
(1)、:first-of-type
:first-of-t