选择器
什么是选择器
选择器是指通过一定的语法规则选取到对应的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",通用选择器，通用，就是对所有的。*{}在中括号中写样式代码，*星号来匹配所有的。
<!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>
通用选择器_嵌入式：
<!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标签，从而设置样式。
<!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也就是标签名.类名{}。
<!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中是存在的。
<!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>
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » CSS|02 基本选择器
发表评论 取消回复