选择器
什么是选择器
选择器是指通过一定的语法规则选取到对应的HTML标记,然后给这个对应的HTML标记设置样式。
选择器分为四大类:基本选择器、复合选择器、 伪类选择器、属性选择器
基本选择器
通用选择器:将匹配HTML所有标签。不建议使用。
比如:*{margin:0px}
标签选择器:匹配对应的HTML标签。
比如:p{font-size:14px}
类选择器:给定指定的CLASS属性值的元素设置样式。
比如:.box{width:800px;}
id选择器:可以为标有特殊id的HTML元素指定特定的样式,只能使用一次。id选择器以"#"来定义。
比如:#title{font-size:14px;}
复合选择器
选择器1,选择器2{属性:值;}
多元素选择器,同时匹配选择器1和选择器2,多个选择器之间用逗号分隔
举例: p,h1,h2{margin:0px;}
E F{属性:值;}
后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
举例: #slidebar p {font-color: #990000;}
E > F{属性:值;}
子元素选择器,匹配所有E元素的子元素F
举例: div > p{color:#990000;}
E + F{属性:值;}
相邻元素选择器,匹配所有紧随E元素之后的同级元素F
举例: div + div{color:#990000;}
伪类选择器
伪类选择器是用来给超级链接的不同状态来设置样式。
:link 向未被访问的链接添加样式
:visitied 向已被访问的链接添加样式
:hover 当鼠标悬浮在元素上方时,向元素添加样式
:active 鼠标放在元素上面时,点击的一瞬间
注意:超级链接的不同状态它其实是有顺序。也就是说伪类选择器设置其实是有顺序。
如果不按照伪类选择器的顺序,那么样式就会失效。
顺序:要遵守"爱恨准则"要先有爱,才有恨。"Love Hate" LVHA
属性选择器
什么是属性选择器?
属性选择器它是与标签的属性名和属性值有关。
属性选择器是通过标签的属性名和属性值来匹配元素。
选择器 含义 举例
[attr] 匹配指定的属性名的所有元素 h1[align]{}
[attr="val"] 匹配属性等于指定值的所有元素 h1[align="center"]{}
[attr*="val"] 匹配属性中包含指定值的所有元素 Font[color*="00"]
[attr$="val"] 匹配属性的值以指定值结束的所有元素 Font[color$="00"]
[attr^="val"] 匹配属性以指定值开头的所有元素 Font[color^="00"]
基本选择器
通用选择器
通用选择器_行内式:
对于body中所有 的元素设置属性color="#f00"
,通用选择器,通用,就是对所有的。
*{}
在中括号中写样式代码,*星号来匹配所有的。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<font color="#f00">
<h2>请回答出中国的四大名著</h2>
<ul>
<li>西游记</li>
<li>红楼梦</li>
<li>水浒传</li>
<li>三国演义</li>
</ul>
<p>《红楼梦》,中国古代章回体长篇小说,中国古典四大名著之首。其通行本共120回,一般认为前80回是清代作家曹雪芹所著,后40回作者为无名氏,由高鹗、程伟元整理。小说以贾、史、王、薛四大家族的兴衰为背景,以大荒山青埂峰下顽石幻化的通灵宝玉为视角,以贾宝玉与林黛玉、薛宝钗的爱情婚姻悲剧为主线,描绘了一些闺阁佳人的人生百态,展现了真正的人性美和悲剧美,是一部从各个角度展现中国清代社会百态的史诗性著作。</p>
</font>
</body>
</html>
通用选择器_嵌入式:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*使用嵌入式*/
/*使用通用选择器来设置样式*/
/*给HTML中的所有的标签设置样式*/
*{
color: #00f; /* 蓝色 */
}
</style>
</head>
<body>
<h2>请回答出中国的四大名著</h2>
<ul>
<li>西游记</li>
<li>红楼梦</li>
<li>水浒传</li>
<li>三国演义</li>
</ul>
<h4>看我是否能变蓝色</h4>
<p>《红楼梦》,中国古代章回体长篇小说,中国古典四大名著之首。其通行本共120回,一般认为前80回是清代作家曹雪芹所著,后40回作者为无名氏,由高鹗、程伟元整理。小说以贾、史、王、薛四大家族的兴衰为背景,以大荒山青埂峰下顽石幻化的通灵宝玉为视角,以贾宝玉与林黛玉、薛宝钗的爱情婚姻悲剧为主线,描绘了一些闺阁佳人的人生百态,展现了真正的人性美和悲剧美,是一部从各个角度展现中国清代社会百态的史诗性著作。</p>
</body>
</html>
标签选择器
就是根据不同的标签设置不同的样式。
这里的标签就是HTML中元素的标签,比如要给p标签设置样式,可以写p{}
,中括号中写样式代码。这样就能匹配HTML中所有的p标签,从而设置样式。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器</title>
<style type="text/css">
/*使用嵌入式*/
/*使用标签选择器来设置样式*/
h2{
color: #f00;
}
p{
color: #00f;
}
</style>
</head>
<body>
<h2>请回答出中国的四大名著</h2>
<ul>
<li>西游记</li>
<li>红楼梦</li>
<li>水浒传</li>
<li>三国演义</li>
</ul>
<p>《红楼梦》,中国古代章回体长篇小说,中国古典四大名著之首。其通行本共120回,一般认为前80回是清代作家曹雪芹所著,后40回作者为无名氏,由高鹗、程伟元整理。小说以贾、史、王、薛四大家族的兴衰为背景,以大荒山青埂峰下顽石幻化的通灵宝玉为视角,以贾宝玉与林黛玉、薛宝钗的爱情婚姻悲剧为主线,描绘了一些闺阁佳人的人生百态,展现了真正的人性美和悲剧美,是一部从各个角度展现中国清代社会百态的史诗性著作。</p>
</body>
</html>
类选择器
对应HTML中元素的class属性,对不同的class设置不同的样式。
给类为class1的元素可以设置.class1{}
也就是.类名
,在中括号中写样式代码,class1必须在HTML中是存在的。
比如想要获取div标签下的类为class1的元素设置样式,可以写div.class1
也就是标签名.类名{}
。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style type="text/css">
/*使用嵌入式*/
/*使用类选择器来设置样式*/
.h{
color: #f00;
}
/*先找到p标签,然后再去找p标签里面有没有class为profile,有的话就设置这个样式*/
p.profile{
color: #00f;
}
</style>
</head>
<body>
<h2 class="h">请回答出中国的四大名著</h2>
<ul class="h">
<li>西游记</li>
<li>红楼梦</li>
<li>水浒传</li>
<li>三国演义</li>
</ul>
<p class="profile">《红楼梦》,中国古代章回体长篇小说,中国古典四大名著之首。其通行本共120回,一般认为前80回是清代作家曹雪芹所著,后40回作者为无名氏,由高鹗、程伟元整理。小说以贾、史、王、薛四大家族的兴衰为背景,以大荒山青埂峰下顽石幻化的通灵宝玉为视角,以贾宝玉与林黛玉、薛宝钗的爱情婚姻悲剧为主线,描绘了一些闺阁佳人的人生百态,展现了真正的人性美和悲剧美,是一部从各个角度展现中国清代社会百态的史诗性著作。</p>
</body>
</html>
id选择器
对应HTML中元素的id属性,对不同的id设置不同的样式。
给id为id1的元素可以设置#id1{}
也就是#id名{}
,在中括号中写样式代码,id1必须在HTML中是存在的。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style type="text/css">
/*使用嵌入式*/
/*使用id选择器来设置样式*/
#h{
color: #f00;
}
</style>
</head>
<body>
<h2 id="h">请回答出中国的四大名著</h2>
<ul id="h">
<li>西游记</li>
<li>红楼梦</li>
<li>水浒传</li>
<li>三国演义</li>
</ul>
<p>《红楼梦》,中国古代章回体长篇小说,中国古典四大名著之首。其通行本共120回,一般认为前80回是清代作家曹雪芹所著,后40回作者为无名氏,由高鹗、程伟元整理。小说以贾、史、王、薛四大家族的兴衰为背景,以大荒山青埂峰下顽石幻化的通灵宝玉为视角,以贾宝玉与林黛玉、薛宝钗的爱情婚姻悲剧为主线,描绘了一些闺阁佳人的人生百态,展现了真正的人性美和悲剧美,是一部从各个角度展现中国清代社会百态的史诗性著作。</p>
</body>
</html>