前言 ：
CSS中的选择器有基础选择器、组合选择器、属性选择器、伪类选择器、伪元素选择器，在了解选择器之前，我们需要了解：
<style type="text/css"> /* CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中 CSS的语法： 选择器 声明块 选择器： - 通过选择器可以选中页面中指定的元素， 并且将声明块中的样式应用到选择器对应的元素上 声明块： - 声明块紧跟在选择器的后边，使用一对{}括起来， 声明块中实际上就是一组一组的名值对结构， 这一组一组的名值对我们称为声明， 在一个声明块中可以写多个声明，多个声明之间使用;隔开， 声明的样式名和样式值之间使用:来连接 */ p{ color:red; font-size:50px; } </style> </head> <body> <!-- 这是HTML的注释方式 --> <p style="color:red">今天天气真不错，PM2.5也就500</p> </body>
以下就是CSS中选择器的分类啦~
- 基础选择器
元素选择器： p{}、div{}等
类选择器: .类名{}
id选择器: #id值{}
通用选择器: *{}
<style type="text/css"> /* id选择器： 作用：根据HTML元素的id属性的值选中有特定元素。 语法：#id属性值 {} 示例：#demo {} 需求：将"乡音无改鬓毛衰"改成红色，字体大小改成40px，并为该页面设置一种背景色。 */ #demo { color: red; font-size: 40px; } /* 通配符（通用）选择器 作用： 选中当前页面的所有元素。 语法： * {} */ * { background-color: yellowgreen; } </style> </head> <body> <p>少小离家老大回，</p> <p id="demo">乡音无改鬓毛衰。</p> <p>儿童相见不相识，</p> <p>笑问客从何处来。</p> </body>
<style type="text/css"> /* 类选择器： 作用：根据类的值选中有特定class属性的元素。 语法：.class属性值 {} 示例：.demo {} 需求：将当前页面后两句的文本改成红色，字体大小改成40px，并给页面设置一种背景色。 */ .demo { color: red; font-size: 40px; } .abc { background-color: yellowgreen; } </style> </head> <body> <p>少小离家老大回，</p> <p>乡音无改鬓毛衰。</p> <p class="demo abc">儿童相见不相识，</p> <p class="demo">笑问客从何处来。</p> </body>
- 组合选择器
子元素选择器： 父元素 > 子元素 {}
后代选择器： 父元素 子元素 {}
兄弟选择器： 兄 + 弟 {}、兄 ~ 弟 {}
交集选择器：选择器1选择器2选择器3选择器n{}
并集选择器：选择器1,选择器2,选择器3,选择器n{}
<style type="text/css"> <!--兄弟元素选择器--> /* p~span{ color:red; } */ /* p~div>a{ background-color: #F0FFFF; } */ /* .demo ~ div > a{ background-color: #FF0000; } */ /* div.red{ color: #FF0000; font-size: 30px; } */ h1,span{ color: #00FFFF; } </style> </head> <body> <div> 我是一个div <h1>我是div中的元素 <span>我是div中的p元素中的span元素</span> </h1> <span>我是div中的span元素</span> </div> </body>
- 属性选择器
CSS表达式 attr() 用来获取选择到的元素的某一HTML属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。attr() 表达式可以用于任何CSS属性。
[attr]{}:
[attr=value]{}:
[attr~=value]{}:
[attr^=value]{}:
[attr|=value]{}:
[attr$=value]{}:
[attr*=value]{}:
<title>CSS属性选择器</title> <style type="text/css"> a[target][href] { color: #008000; } /*不带值的选择器 [attr]{} */ a[target="_blank"] { background: #00FFFF; } /*含有值的选择器 [attr=value]{} */ [title~=dark] { border: 0.125rem solid green; } [class~=dark]{ color: #7FFFD4; } /*部分值属性选择器 [attr~=]{} */ /* [class^=top]{ background: #FF0000; } 开头[arrt^=value]{} [arrt|=value]{} 结尾[arrt$=value]{} [arrt*=value]{} */ [class$="test"] { background: #F0FFFF; } [class |=top]{ background: #FF0000; } div[name*="xy"]{ background: blue; } /*子串匹配属性选择器 语法：[attr |=value] 值必须是完整的或者是单独的单词，比如class="top",这时"top"或者是"top-其他单词" */ </style> </head> <body> <h1> 示例1</h1> <h1 title="美丽中国">美丽中国</h1> <a target="流浪地球" href="聚居月球">流浪地球，聚居月球</a> <a href="你好" target="_blank">中国人，你好</a> <br/> <img src="" title="backgroud" width="400px" height="240px" /> <h1 class="bcg dark">这是一个h1标签</h1> <h2 class="abc">这是一个h2标签</h2> <p class="top">这是子串匹配属性选择器</p> <p class="top-text">这是子串匹配属性选择器2</p> <p class="topcontent">这个就不能被子串匹配属性选择器选择</p> <p class="mytest">这是一个段落</p> <div name="xy_dly" >好好学习</div> <span name="xy_zk">天天向上</span> <div name="xy_kkxx">开开心心</div> </body>
- 伪类选择器
1、伪类选择器，同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。
2、伪类选择器分为两种，静态伪类和动态伪类。
（1）静态伪类：只能用于超链接的样式。
:link 超链接点击之前
:visited 链接被访问过之后
注意：以上两种样式，只能用于超链接。
（2）动态伪类：针对所有标签都适用的样式。如下：
:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式
- 伪元素选择器
<style> .firstChild { color: lightcoral; } .lastChild { color: lightseagreen; } </style> </head> <body> <p> <span class="firstChild">CSS 人家的全名叫 Cascading Style Sheets的啦</span> <br/> <span class="lastChild">CSS 算是 HTML 的专业化妆师了。</span> </p> </body>
