注意:使用时必须得引入CSS的格式才能在html文件中进行编写(此处采用内嵌的形式引入)
即在head标签的style属性中输入: type="text/css"
且所有操作均在style标签中进行
基本选择器
包括以下几种(以div标签为例):
<body>
<div id="one" class="two">
这是第一个div
</div>
</body>
-
标签选择器(获取标签的名称):标签名{}
-
<style type="text/css"> /* div标签选择器 */ div { 属性: 值; }
-
ID选择器(获取ID属性):#id名{}
-
<style type="text/css"> /* ID选择器 */ #one { 属性: 值; }
-
类选择器(获取class属性): .class名{}
-
<style type="text/css"> /* class类选择器 */ .two { 属性: 值; }
-
通配符选择器(获取全部标签属性):* {}
-
<style type="text/css"> /* 通配符选择器 */ * { 属性: 值; }
PS:以上选择器的优先级为:ID选择器>类选择器>标签选择器>通配符选择器
包含选择器
主要包括以下几种:
<body>
<div class="one">这是第一个div</div>
<div class="two">这是第二个div</div>
<p id="first">这是一个段落标签</p>
<div class="list">
<ul>
<li>我是列表1</li>
<li>我是列表2</li>
</ul>
</div>
</body>
-
子代选择器(获取的是某个标签的第一级子标签)
-
<style type="text/css"> /*子代选择器*/ div.list>ul { 属性: 属性值; }
格式:标签名.class名>子标签 {}
-
后代选择器(获取的某个标签里面所有的子标签)
-
<style type="text/css"> /*后代选择器*/ .list li { 属性: 属性值; }
格式:.class名 子标签{}
-
分组选择器(也叫逗号选择器,可以同时设置多个标签,使用逗号进行分割)
-
<style type="text/css"> /*分组(逗号)选择器*/ .one, .two, #first { 属性: 属性值; }
格式(可选择任意标签,无固定格式):.class名1,.class名2,#id名{}
属性选择器
用于设置带有特定属性或属性值的 HTML 元素的样式
主要包含以下几种:
<body>
<div class="container">
这是一个div容器
</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" name="" id="" value="张三">
<input type="email" name="" id="" value="李四">
<input type="url" name="" id="" value="二狗">
<hr>
<div class="msg">我喜欢打游戏</div>
<p id="msg1" ">这是一个段落</p>
</body>
-
属性确切等于某个值
-
格式: 标签名[属性="属性名"]{}<style type="text/css"> /*确切的等于某个值*/ input[type="text"] { background: red; }
-
属性包含某个值
-
<style type="text/css"> /*属性包含某个值*/ input[type *="e"] { background: blue; }
格式: 标签名[属性 *="属性名中某个字符"]{}
-
属性值以某个字符开头
-
<style type="text/css"> /*属性值以某个值开头*/ input[type ^="e"] { background: green; }
格式:标签名[属性 ^="属性名开头的字符"]{}
-
属性值以某个字符结尾
-
<style type="text/css"> /*属性值以某个值结尾*/ input[type $="rl"] { background: red; }
格式:标签名[属性 $="属性名结尾的字符"]{}
-
属性名等于某个属性值
-
<style type="text/css"> /*属性等于某个属性值*/ [title="这是一个标题"] { color: red; }
格式:标签名[属性名 ="属性值"]{}
-
表示下一个标签
-
<style type="text/css"> /*+表示下一个标签*/ .msg+p { border: 1px solid green; }
格式:id名 + 标签名{}
伪类选择器
用于定义元素的特殊状态
例如,它可以用于:
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
主要包含以下几种:
<body>
<a href="http://www.baidu.com/">点击有惊喜</a>
</body>
-
链接点击前的颜色
-
<style type="text/css"> /*点击之前的颜色*/ a:link { color: red; }
格式:标签名:link { }
-
链接点击后的颜色
-
<style type="text/css"> /*点击之后的颜色*/ a:visited { color: green; }
格式:标签名:visited { }
-
鼠标悬停在链接的颜色
-
<style type="text/css"> /*鼠标悬停的颜色*/ a:hover { color: blue; }
格式:标签名:hover { }
-
鼠标按住链接的颜色
-
<style type="text/css"> /*鼠标按住的颜色*/ a:active { color: pink; }
格式:标签名:active { }
注意:a:hover
必须在 CSS 定义中的 a:link
和 a:visited
之后才能生效!
a:active
必须在 CSS 定义中的 a:hover
之后才能生效!
所以四种状态的顺序应固定为::link :visited :hover :active
伪元素选择器
用于设置元素指定部分的样式。
例如,它可以用于:
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
注意:要使用伪元素选择器一定要加上content属性,并且使用两个冒号 ::
主要包含以下几种:
<body>
<p>这是一个段落演示</p>
</body>
-
段落之前
-
<style type="text/css"> p::before { content: "段落之前"; color: red; }
格式:标签名::before { content:" "; }
-
段落之后
<style type="text/css">
p::after {
content: "段落之后";
color: blue;
}
格式:标签名::after { content:" "; }