CSS|02 基本选择器

选择器

什么是选择器

选择器是指通过一定的语法规则选取到对应的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>