阿ken的HTML、CSS的学习笔记_CSS3选择器(笔记四)
你好,我是阿Ken
恭迎您能前来拜访
虽还未踏入社会尚处象牙塔内
却总总陷入迷茫不知所措
有时很渴望有一个信仰能够成为我的精神支柱促使我一路坚持走下去
但苦于一直未果
后来短暂接触了一下这社会环境
也看到了一些很有意思的灵魂
他们大多有趣且人心善良
但却也被生活折腾的一塌糊涂
这好像让我看到了如果再一直浑浑噩噩下去五年十年后自己的影子
稍微明白一点儿父亲的苦
… …
没有人在年少时想要成为一个普通人
4_CSS选择器
4.1_引入CSS样式表
1. 行内式
<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容</标记名>
style是标记的属性
2. 内嵌式
<head>
<style type="text/css">选择器{属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}</style>
</head>
此方式放在head标签里
3. 链入式
<head>
<link href="css文件的路径" type="text/css" rel="stylesheet"/>
</head>
注意:
- href:可以是所链接外部样式表的URL,也可以是相对路径或绝对路径。
- type:定义所链接文档的类型,在这里需要指定为“text/css”,表示链接的外部文件为CSS样式表。
- rel:定义当前的文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用, 同时一个HTML页面也可以通过多个< link>标记链接多个CSS样式表。
链入式是使用频率最高,也是最实用的CSS样式表,
实现了结构和表现的完全分离,使得页面的前期制作和后期维护都十分方便。
4.2_CSS选择器样式规则
选择器 {属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
选择器用来指定CSS样式作用的HTML对象
大括号内是对该对象设置的具体样式
其中属性和属性值以“键值对”的形式出现
属性和属性值之间用英文“:”连接 , “键值对”之间用英文“;”连接
注意:
- HTML5标签不严格区分大小写(< p>< /P>都一样),但是CSS样式中的选择器严格区分大小写,属性和值不区分大小写,按照书写习惯一般将“选择器、属性和值”都采用小写的形式。
- 如果属性的值由多个单词组成且中间包含空格,则必须为这个属性值加上英文状态下的引号。
- CSS代码中空格是不被解析的,花括号及分号前后的空格可有可无。因此可以使用空格键、Tab键、回车键等对样式及进行排版,以增加代码的可读性。
h1 {font-size: 20 px;
} // 20和单位px之间有空格
根据上述代码_注意:属性的值和单位之间是不允许出现空格的,否则浏览器解析时会出错。
- 多个"属性: 属性值"之间必须用英文分号";"隔开,最后一个”属性: 属性值“之后可以省略,但加上有利于增加代码可读性以及便于增加新”属性: 属性值“。
为了提高代码可读性,建议增加注释。
4.3_CSS选择器
要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。
在CSS中,执行这一任务的样式规则部分被称为选择器。
4.3.1_标记选择器
标记选择器是指用HTML标记名作为选择器
标记名 {属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
p {font-size: 12px;
color: #666;
font-family: "微软雅黑";
}
4.3.2_类选择器
类选择器使用“ . ”进行标识,后面紧跟类名。
.类名 {属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
class 属性和 id 选择器类似,只不过 class 属性可以定义多个属性
拥有相同 class 属性值的元素,我们可以说它们是一类元素
也可以同时为一个元素设置多个 class 属性值,多个值之间使用空格隔开
实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title><style type="text/css">.red {color: red;
}.green {color: green;
}.font22 {font-size: 22px;
} /* class后带有font22的 字体像素22 */p {text-decoration: underline;
font-family: "微软雅黑";
/* 所有p标签内字体: 微软雅黑+下划线 */
}</style>
</head>
<body><h2 class="red">二级标题文本</h2>
<!-- 红色 --><p class="green font22">段落一文本内容</p>
<!-- 字体:绿色+像素22+微软雅黑+下划线 --><p class="red font22">段落二文本内容</p>
<!-- 字体:红色+像素22+微软雅黑+下划线 --><P>段落三文本内容</p>
<!-- 字体:微软雅黑+下划线 --></body>
</html>
可见多个标记可以使用同一个类名,这样可以实现不同类型的标记指定相同的样式。
同时一个HTML元素也可以应用多个class类来设置多个样式,在HTML标签中多个类名之间需要用空格隔开,如上述代码中的green font22、red font22 。
4.3.3_id选择器
通过元素的 id 属性值选中 唯一 的一个元素
记住是选中属性值中唯一的元素
基本语法格式:
#id名 {属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title><style type="text/css">#bold {font-weight: bold;
}#font24 {font-size:24px;
}#bold#font24 {font-weight: bold;
font-size: 24px;
}</style>
</head>
<body><p id="bold">段落1:id="bold",设置粗体文字。</p> <!-- 粗体文字 -->
<p id="font24">段落1:id="font24",设置字号为24px。</p> <!-- 字号为24px -->
<p id="font24">段落1:id="font24",设置字号为24px。</p> <!-- 字号为24px -->
<p id="bold font24">段落1:id="bold font24",同时设置粗体和字号为24px。</p> <!-- 无变化 --> </body>
</html>
第四行代码即id = "bold font24"这样的写法是错误的,id 选择器并不支持像类选择器那样定义多个值。
4.3.4_通配符选择器
_
通配符选择器用“ * ”号表示,能匹配页面中所有的元素
_
基本语法格式:
* {属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
在实际网页开发中不建议使用通配符选择器,因为它设置的样式对所有的HTML标记都生效,不管标记是否需要样式,这样反而降低了代码的执行速度。
4.3.5_标签指定式选择器(交集选择器)
_
又称交集选择器,由两个选择器构成,其中第一个为标记选择器,第二个为 class 选择器或 id 选择器,两个选择器之间不能有空格,如 h3.special 或 p#one。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签指定式选择器</title><style type="text/css">p {color: blue;
} /*指定下方body标签的第一行文字颜色为蓝色*/.special {color: green;
} /*指定下方body标签的第三行文字颜色为绿色*/p.special {color: red;
}/*标签指定式选择器*/ /*指定下方body标签的第二行文字颜色为红色*/</style>
</head>
<body><p>普通段落文本(蓝色)</p>
<p class="special">指定了.special类的段落文本(红色)</p>
<h3 class="special">指定了.special类的段落文本(绿色)</h3> </body>
</html>
4.3.6_后代选择器(和子元素)
_
元素之间的关系
父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
后代元素:直接或间接包含祖先元素的元素
_
后代元素选择器
作用:
选中指定元素的指定后代元素
_
语法:
祖先元素 后代元素{ }
_
子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素 > 子元素{ }
后面 9. 关系选择器中会讲到
_
该选择器用来选择元素或元素组的后代,其**写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。**当标记发生嵌套时,内层标记就成为外层标记的后代。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style type="text/css">p strong {color: red;
} /*后代选择器*/ /* 指定的是body标签第一行文字颜色为红色 */strong {color: blue;
} /* 指定的是body标签第二行文字颜色为蓝色 */</style>
</head>
<body><p>段落文本<strong>嵌套在段落中,使用strong标记定义的文本(红色)</strong></p>
<strong>嵌套之外由strong标记定义的文本(蓝色)。</strong></body>
</html>
4.3.7_并集选择器
_
并集选择器又叫复合选择器
可以选中同时满足多个选择器的元素
并集选择器是各个选择器通过逗号连接而成
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>并集选择器</title>
<style type = "text/css">h2,h3,p {color: red;
font-size: 14px;
} /*不同标记组成的并集选择器*/h3,.special,#one {text-decoration: underline;
} /* 加下划线 */</style>
</head>
<body><h2>二级标题文本</h2> <!--字体14像素、红色-->
<h3>三级标题文本</h3> <!--字体14像素、红色、加下划线-->
<p class="special">段落文本1,加下划线。</p> <!--字体14像素、红色、加下划线-->
<p>段落文本2</p> <!--字体14像素、红色-->
<p id="one">段落文本3</p> <!--字体14像素、红色、加下划线--></body>
</html>
上述代码字号和颜色相同,只是有一个标题和两个段落文本有下划线效果(上述已注明)。
4.3.8_属性选择器
E[att^=value] 属性选择器
E[att^=value]属性选择器是指选择名称为E的标记,且该标记定义了 att 属性,att 属性值包含前缀为 value 的子字符串。
_
需要注意的是E是可以省略的,如果省略则表示可以匹配满足条件的任意元素。
_
例如:div[id^=section] 表示匹配包含 id 属性,且 id 属性值是以“ section ”字符串开头的 div 元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E[att^=value] 属性选择器的应用</title><style type="text/css">p[id^="one"] {color: pink;
font-family: "微软雅黑";
font-size: 20px;
}</style>
</head>
<body><p id="one">
天空是蔚蓝色
</p> <!-- 属性选择器已定义 -->
<p id="two">
窗外有千纸鹤
</p> <!-- 属性选择器不定义 -->
<p id="one1">
陪我弹琴写歌
</p> <!-- 属性选择器已定义 -->
<p id="two2">
每一分每一刻
</p> <!-- 属性选择器不定义 --></body>
</html>
在上述代码中,使用了E[att^=value]属性选择器 “ p[id ^=“one”] ” 。
只要p元素中的 id 属性值是以“ one ”字符串开头就会被选中,从而呈现特殊的文本效果。
E[att$=value] 属性选择器
E[att$=value]属性选择器是指选择名称为E的标记,且该标记定义了 att 属性,att 属性值包含后缀为 value 的子字符串。
_
E是可以省略的,如果省略则表示可以匹配满足条件的任意元素。
_
例如:div[ id $=section] 表示匹配包含 id 属性,且 id 属性值是以“ section ”字符串结尾的 div 元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E[att$=value]属性选择器的应用</title><style type="text/css">p[id$="one"] {color: pink;
font-family: "微软雅黑";
font-size: 20px;
}</style>
</head>
<body><p id="one1">
天空是蔚蓝色
</p> <!-- 属性选择器不定义 -->
<p id="two">
窗外有千纸鹤
</p> <!-- 属性选择器不定义 -->
<p id="1one">
陪我弹琴写歌
</p> <!-- 属性选择器已定义 -->
<p id="two2">
每一分每一刻
</p> <!-- 属性选择器不定义 --></body>
</html>
在上述代码中,使用了E[att$=value]属性选择器 “ p[id $=“one”] ” 。
只要p元素中的 id 属性值是以“ one ”字符串结尾就会被选中,从而呈现特殊的文本效果。
E[att*=value] 属性选择器
E[att*=value]属性选择器是指选择名称为E的标记,且该标记定义了 att 属性,att 属性值包含 value 的子字符串。
E是可以省略的,如果省略则表示可以匹配满足条件的任意元素。
例如:div[id*=section] 表示匹配包含 id 属性,且 id 属性值包含“ section ”字符串的 div 元素。
案例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E[att*=value]属性选择器的应用</title><style type="text/css">p[id*="one"] {color: pink;
font-family: "微软雅黑";
font-size: 20px;
}</style></head>
<body><p id="one1">
天空是蔚蓝色
</p> <!-- 属性选择器已定义 -->
<p id="two">
窗外有千纸鹤
</p> <!-- 属性选择器不定义 -->
<p id="1one">
陪我弹琴写歌
</p> <!-- 属性选择器已定义 -->
<p id="two2">
每一分每一刻
</p> <!-- 属性选择器不定义 --></body>
</html>
在上述代码中,使用了E[att*=value]属性选择器 “ p[id *=“one”] ” 。
只要p元素中的 id 属性值是包含“ one ”字符串就会被选中,从而呈现特殊的文本效果。
4.3.9_关系选择器
关系选择器主要包括子代选择器和兄弟选择器,其中子代选择器由符号“>”连接,兄弟选择器由符号“+”和“~”连接。
子代选择器(>)
子代选择器主要用来选择某个元素的第一级子元素。
例如希望选择只作用于 h1 元素子元素的 strong 元素,可以这样写:h1 > strong。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子代选择器的应用</title><style type="text/css">h1>strong {color: red;
font-family: "微软雅黑";
font-size: 20px;
}</style>
</head>
<body><h1>心怀梦想,<strong>不丢信仰</strong></h1> <!-- (1) -->
<h1><em><strong>看透疾苦,</strong></em>深爱人间</h1> <!-- (2) --></body>
</html>
在上述代码中,(1)中的 strong 元素为 h1 元素中的子元素,(2)中的 strong 元素为 h1 元素的孙元素,因此代码中设置的样式只对(1)中代码有效。
兄弟选择器(+、~)
兄弟选择器用来选择与某元素位于同一个父元素之中,且位于该元素之后的兄弟元素。
兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种。
临近兄弟选择器
该选择器使用加号“+”来;连接前后两个选择器。
选择器中的两个元素有同一个父亲,而且第二个元素必须紧跟第一个元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>临近兄弟选择器的应用</title><style type="text/css">p+h2 {color: green;
font-family: "宋体";
font-size: 20px;
}</style>
</head>
<body><h2>题菊花</h2>
<p>[唐] 黄巢</p>
<h2>飒飒西风满院栽,蕊寒香冷蝶难来。</h2> <!-- (1) -->
<h2>他年我若为青帝,报与桃花一处开。</h2></body>
</html>
临近兄弟选择器应用在(1)
从结构中看出p元素后紧邻的第一个兄弟元素所在位置为(1)
普通兄弟选择器
普通兄弟选择器使用“~”来链接前后两个选择器。
选择器中的两个元素有同一个父亲,但第二个元素不必紧跟第一个元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>普通兄弟选择器的应用</title><style type="text/css">p~h2 {color: pink;
font-family: "宋体";
font-size: 20px;
}</style>
</head>
<body><h2>题菊花</h2>
<p>[唐] 黄巢</p>
<h2>飒飒西风满院栽,蕊寒香冷蝶难来。</h2> <!-- (1) -->
<h2>他年我若为青帝,报与桃花一处开。</h2> <!-- (2) --></body>
</html>
临近兄弟选择器应用在(1)、(2)
从结构中看出p元素后紧邻的第一个兄弟元素所在位置为(1)、(2)
4.3.10_:empty 选择器
:empty 选择器用来选择没有子元素或文本内容为空的所有元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>empty 选择器的使用</title><style type="text/css">p {width:150px;
height:30px;
}:empty {background-color: #999;
} /* (1) */</style>
</head>
<body><p>题菊花</p>
<p>[唐] 黄巢</p>
<p></p> <!-- (2) -->
<p>飒飒西风满院栽,蕊寒香冷蝶难来。</p>
<p>他年我若为青帝,报与桃花一处开。</p> </body>
</html>
(1) 中代码使用" :empty 选择器 "定义(2)空元素p,将其空元素的背景颜色设置为灰色。
4.3.11_:target 选择器
:target 选择器用于为页面中的某个 target 元素(该元素的id被当做页面中的超链接来使用)指定样式。只有用户单击了页面中的超链接,并且跳转到target元素后,:target选择器所设置的样式才会起作用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>target选择器的使用</title><style type="text/css">:target {
background-color: #e5eece;
}</sty1e>
</head>
<body><h1>这是标题</h1>
<p><a href="#news1">跳转至内容1</a></p>
<p><a href="#news2">跳转至内容2</a></p>
<p>请单击上面的链接,:target选择器会突出显示当前活功的HTML锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
<p><b>注释:</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p></body>
</html>
当单击“跳转至内容1”或“跳转至内容2”时,所链接到的内容才会被添加背景颜色效果:
4.3.12_伪类选择器
结构化伪类选择器
:root 选择器
:root 选择器用于匹配文档根元素。
使用 :root 选择器定义的样式,对所有页面元素都生效,对于不需要该样式的元素,可以单独设置样式进行覆盖。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>:root 选择器的应用</title>
<style type="text/css">:root {color: pink;
}h2 {color: red;
}</style>
</head>
<body><h2>题菊花</h2> //(1)
<p>[唐] 黄巢 飒飒西风满院栽,蕊寒香冷蝶难来。
他年我若为青帝,报与桃花一处开。</p> //(2)</body>
</html>
开始第一步 :root 选择器 将页面中所有的文本设置为粉色,
第二部将 (1)中元素文字设置为红色
:not 选择器
如果对某个结构使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式,可以使用 :not 选择器。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>:not选择器的应用</title><style type="text/css">body *:not(h3) { // 格式不能变,只有这样才能成功运行
color: orange;
font-size: 20px;
font-family: "宋体";
} //(1)</style>
</head>
<body><h3>题菊花</h3> // 唯独<h3>未应用(1)中的文本样式
<p>[唐] 黄巢</p>
<p>飒飒西风满院栽,蕊寒香冷蝶难来。</p>
<p>他年我若为青帝,报与桃花一处开。</p> </body>
</html>
(1) 中定义了页面body的文本样式," body *: not(h3) " 选择器用于排除 body 结构中的子结构元素 h3,使其不应用该文本样式。
- 拓展参考:
:only-child 选择器
:only-child 选择器用于匹配属于某父元素的唯一子元素的元素,也就是说,如果某个父元素仅有一个子元素,则使用 " :only-child 选择器 " 可以选择这个子元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>:only-child 选择器的应用</title><style type="text/css">li:only-child {color:red;
} /* (1) */</style>
</head>
<body><div>
国内电影:
<ul>
<li>一代宗师</li>
<li>叶问</li>
<li>非诚勿扰</li>
</ul>
美国电影:
<ul>
<li>侏罗纪世界</li>
</ul>
日本动漫:
<ul>
<li>蜡笔小新</li>
<li>火影忍者</li>
<li>航海王</li>
</ul>
</div></body>
</html>
上述代码中使用了 :only-child 选择器 “li:only-child”,用于选择作为ul唯一子元素的li元素,并设置其文本颜色为红色。
:first-child 和 :last-child 选择器
:first-child 选择器和 :last-child 选择器分别用于为父元素中的第一个或者是最后一个子元素设置样式。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>first-child和last-child选择器的使用</title><style type="text/css">p:first-child{color:pink;
font-size:16px;
font-family:"宋体";
}p:last-child{color:blue;
font-size:16px;
font-family:"微软雅黑";
}</style>
</head>
<body><p>题菊花</p>
<p>[ 唐 ] 黄巢</p>
<p>飒飒西风满院栽,蕊寒香冷蝶难来。</p>
<p>他年我若为青帝,报与桃花一处开。</p> </body>
</html>
上述代码中,分别使用了 :first-child 选择器和 :last-child 选择器
前者:first-child 选择器能定义,后者 :last-child 选择器无法定义,该伪类方法比较繁琐
之后会更新一下该类选择器如何正确使用
:nth-child(n)和:nth-last-child(n)选择器
:nth-child(n) 和:nth-last-child(n)选择器是用来选择第n个和倒数第n个子元素的选择器
案例代码可参考4.3.4,把其中 :first-child和 :last-child更换成 :nth-child(n)和:nth-last-child(n) 理解即可。
:nth-of-type(n)和:nth-last-of-type(n)选择器
:nth-of-type(n)和 :nth-last-of-type(n)选择器 用来匹配属于父元素的特定类型的第n个子元素或倒数第n个子元素
案例同上解释
之后会特意整理出几篇博客讲解伪类选择器细节
伪元素选择器
所谓伪元素选择器,是针对CSS中已经定义好的伪元素使用的选择器。
CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器。
:before 选择器
:before伪元素选择器用于在被选元素的内容前面插入内容,必须配合 content 属性来指定要插入的具体内容。
其基本语法格式:
标签名:before {content:文字/url();
}
在上述语法中,被选元素位于“:before" 之前,“{ }"中的 content 属性用来指定要插入的具体内容,该内容既可以为文本也可以为图片。
案例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>before选择器的使用</title>
<style type="text/css">p:before {content: "我是";
color: #c06;
font-size: 20px;
font-family: "微软雅黑";
font-weight: bold;
}
</style>
</head>
<body><p>阿ken啊,</p></body>
</html>
使用了选择器 " :before",用于在段落前面添加内容,同时使用content属性来指定添加的具体内容。为了使插入效果更美观,还设置了文本样式。
:after 选择器
:after伪元素选择器用于在某个元素之后插入一些内容,使用方法与:before选择器相同。
案例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>after选择器的使用</title>
<style type="text/css">/*p:after{content:url(images/tu.jpg);}*/
p:after{content:url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3083554353,73017423&fm=26&gp=0.jpg);
}</style>
</head>
<body><p>十五的月亮<br/></p></body>
</html>
链接伪类
在CSS中,通过链接伪类可以实现不同的链接状态。
所谓伪类并不是真正意义上的类,它的名称是由系统定义的,通常由标记名、类名或id名加":”构成。
超链接标记< a>的伪类有4种
超链接标记< a>的伪类 | 含义 |
---|---|
a:link{ CSS样式规则;} | 未访问时超链接的状态 |
a:visited{ CSS样式规则: } | 访问后超链接的状态 |
a:hover{ CSS样式规则; } | 鼠标经过、悬停时超链接的状态 |
a:active{ CSS样式规则; } | 鼠标单击不动时超链接的状态 |
案例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>链接伪类</title>
</head>
<style type="text/css">a:link, a:visited { /*未访问和访问后 都为粉色*/
color: pink;
text-decoration: none;/*清除超链接默认的下划线*/
}a:hover { /*鼠标悬停 时文字颜色是蓝色*/
color: blue;
text-decoration: underline;/*鼠标悬停时出现下划线*/
}a:active {color: #F00;
}/*鼠标单击不动 时为红色*/</style>
</head>
<body><a href="#">公司首页</a>
<a href="#">公司简介</a>
<a href="#">产品介绍</a>
<a href="#">联系我们</a></body>
</html>
- 特别注意:
_
只有按上述定义中 :link, :visited、 :hover、:active顺序定义,一般 :link, :visited 一起定义,如果不按上述顺序定义,将会按上述中的顺序显示,在 :link, :visited之前和 :active 之后的代码将不运行
在实际工作中,通常只需要使用a:link、a:visited、a:hover定义未访问、访问后和鼠标悬停时的链接样式,并且常常对a:link和a:visited定义相同的样式,使未访问和访向后的链接样式保持一致。
注意:
(1) 同时使用链接的4种伤类时,通常按照a:link、a:visited、a:hover和a:active的顺序书写,否则定义的样式可能不起作用。
(2) 除了文本样式之外,链接伪类还常常用于控制超链接的背景、边框等样式。
4.4_CSS层叠性和继承性
层叠性
所谓层叠性是指多种CSS样式的叠加继承性
所谓继承性是指书写CSS样式表时,子标记会继承父标记的某些样式
4.5_CSS优先级
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。
选择器名称 | 权重 |
---|---|
标记选择器 | 1 |
类选择器 | 10 |
id选择器 | 100 |
P strong {color:black;} /*权重为: 1+1*/
strong.blue {color:green;} /*权重为: 1+10*/
.father strong {color:yellow;} /*权重为: 10+1*/
p.father strong {color:orange;} /*权重为: 1+10+1*/
p.father.blue {color:gold;} /*权重为: 1+10+10*/
#header strong {color:pink;} /*权重为: 100+1*/
#header strong.blue {color:red;} /*权重为: 100+1+10*/
对应的HTML结构为:
<p class="father" id="header" >
<strong class="blue">文本的颜色</strong>
</p>
这时,页面文本将应用权重最高的样式,即文本颜色为红色。
此外,在考虑权重时,还需要注意些特殊的情况。
- 继承样式的权重为0,即在嵌套结构中,不管父元素样式的权重多大,被子元素维承时,它的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
_
继承即子元素继承父元素的相关样式属性,如:
<html>
<body style="background:red;font-size:12px; ">
<p>测试一下</p>
<body>
</html>
上面的实例中段落的文字就会继承body的样式
例如下面的CSS样式代码:
strong{color: red;}
#header{color: green;}
对应的HTML结构为:
<p id="header" class="blue">
<strong>继承样式不如自已定义</strong>
</p>
在上面的代码中,虽然#header 具有权重100, 但被strong继承时权重为0,而strong选择器的权重虽然仅为1,但它大于继承样式的权重,所以页面中的文本显示为红色。
行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,它拥有比上面提到的选择器都大的优先级。
权重相同时,CSS遵循就近原则。也就是说最靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
例如:
/*CSS文档,文件名为style.css*/
#header{color: red;
} /*外部样式*/
// HTML文档结构为:
<doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS优先极</title><link rel="stylesheet" href="style.css" type="text/css"/>
<style type="text/css">#header{color: gray;
} /*内嵌式样式*/</style>
</head>
<body><p id="header">权重相同时,就近优先</p></body>
</html>
上面的页面被解析后,段落文本将显示为灰色,即内嵌式样式优先,
这是因为内嵌式比链入的外部样式更靠近HTML元素。
同样的道理,如果同时引用两个外部样式表,则排在下面的样式表具有较大的优先级。
如果此时将内嵌样式更改为:
p{color: gray;
} /*内嵌式样式*/
权重不同,#header 的权重更高,文字将显示为外部样式定义的红色。
- CSS 定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何及样式位置的远近,!important 都具有最大优先级。例如:
/* CSS 文档,文件名为style.css */
#header{color: red!important;} /*外部样式表*/
// HTML文档结构为:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>!important命令最优先</title><link rel="stylesheet" href="style.css" type="text/css"/>
<style type="text/css">#header{color: gray;
} /*内嵌式样式*/</style>
</head><body>
<p id="header" style="color:yellow">
<!--行内式CSS样式-->天王盖地虎,!important命令最优先
</p>
</body>
</html>
怎么不对???
该页面被解析后,段落文本显示为红色,即使用!important命令的样式拥有最大的优先级。
需要注意的是,important 命令必须位于属性值和分号之间,否则无效。
需要注意的是,复合选择器的权重为组成它的基础选择器权重的叠加,但是这种叠加并不是简单的数字之和,
案例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器权重的叠加</title><style type="text/css">.inner{text-decoration: line-through;
} /*类选择器定义到除线,权重为10*/div div div div div div div div div div div{text-decoration: underline;
}/*后代选择器定义下划线,权重为11个1的叠加*/</style>
</head>
<body><div>
<div><div><div><div><div><div><div><div><div>
<div class="inner"> 文本的样式</div>
</div></div></div></div></div></div></div></div></div>
</div></body>
</html>
最后文本并没有像预期的那样添加下划线,而显示了类选择器 .inner 定义的删除线,
即标记选择器无论怎么叠加,权重都不会高于类选择器
同理类选择器无论怎么叠加,权重都不会高于id选择器
如果累了就给自己加加油
这一路注定孤独
我们都能努力坚持走下去
祝你也祝我
你好,我是阿Ken
博文若有瑕疵请在评论区留言或私聊我
感谢不吝赐教
阿ken的HTML、CSS的学习笔记_CSS3选择器(笔记四)相关推荐
- html并集选择器怎么写,css案例学习之并集选择器
代码 并集选择器 h1, h2, h3, h4, h5, p{ /*并集选择器*/ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.s ...
- jquery1.9学习笔记 之选择器(基本元素四)
ID选择器("#id") 描述: 选择与给出ID属性匹配的单元标签. 对于ID选择器,jquery使用JS的函数document.getElementById(),当一个标签附加到 ...
- css案例学习之并集选择器
代码 <html> <head> <title>并集选择器</title> <style type="text/css"> ...
- CSS入门学习笔记+案例(1)
CSS入门学习 一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet 层叠样式表 是一组样式设置的规则,用于控制页面的外观样式 2.为什么使用CSS 实现内容与样式的分 ...
- CSS入门学习笔记(案例+详解)
CSS入门学习笔记 一.CSS简介 1.什么是CSS? 2.为什么使用CSS? 3.CSS的作用 二.CSS语法 1.CSS基础语法 2.CSS注释语法 3.CSS应用方法 三.CSS选择器 1.元素 ...
- CSS(3)学习笔记——持续更新
本篇皆是本人长期记录并整理出来的笔记,如有记录得不对的地方,欢迎探讨.记录的很少,将不断学习不断补充. 1 选择器 CSS(3)中提供的选择器手册(w3school):http://www.w3sch ...
- css样式学习笔记一
注:其中的内容只是自己学习时的一些笔记,好记性不如烂笔头,在此记录方便以后巩固! 1.Web标准:结构(Html)+表现(样式)+行为(js) 2.样式的选择器: (1)标签(元素选择器)p{ } ( ...
- html与CSS的学习笔记
千峰教育学习网站 https://www.bilibili.com/video/BV16f4y1k7gu 感兴趣,够努力(学好web前端) 1~15 html和css,两种编程语言,配合使用,作为网站 ...
- css 选择器 第一个class_【零基础上手JavaWeb】CSS小白学习笔记
这是为大家面试定制的<零基础上手JavaWeb>系列.涵盖了JavaWeb基础内容,结合展示的案例,带你由浅入深掌握JavaWeb核心内容.非常适合小白入手的哦,一起加油吧~~ 1.CSS ...
最新文章
- 超干货!一位博士生80篇机器学习相关论文及笔记下载
- 多多客DOODOOKE更新插件模块及下载附件教程
- 什么是Fabric网络
- 万物智联时代——2018年AIOT产业蓝皮书正式发布
- javascript模块化之CommonJS、AMD、CMD、UMD、ES6
- 重磅推荐:2020年人工智能最精彩的25篇论文(附下载)
- jsp页面整体无法居中问题的解决方案
- JavaWeb学习总结(一):JavaWeb开发入门
- 大数据平台构建_如何像产品一样构建数据平台
- python 数字转化excel行列_Python实现excel的列名称转数字、26进制(A-Z)与10进制互相转换...
- UI2CODE再进化!结合Redux的框架升级!
- 大气新闻出版社网站模板
- Bitcoin Cash和Bitcoin Core到底谁是分叉币
- 互联网+大赛作品_【快讯】智物联获第二届中国工业互联网大赛优秀作品奖
- git push的时候报Unable to find remote helper for 'https'的错误
- php ios表情包,php 处理APP emoji表情包 IOS表情包 Mysql保存手机表情
- PA 调试心得(一个电容引发的问题)
- 2023在家赚钱怎么做,有什么适合在家做的副业项目
- Web版2048游戏制作
- dubbo简单测试---折腾许久成功