文章目录

一、选择器的基本概念
二、基础选择器
- 1.标签选择器
- 2. 类选择器
- 3. id选择器
- 4. 通配符选择器
- 基础选择器总结
三、复合选择器
- 1. 后代选择器
- 2. 子代选择器
- 3. 并集选择器
- 4. 伪类选择器
- - 4.1 链接伪类选择器
  - 4.2 force 伪类选择器
- 复合选择器总结

一、选择器的基本概念

功能：为选中的元素，设置属性。
分类

基础选择器
复合选择器

二、基础选择器

优先级：ID选择器 > 类选择器 > 标签选择器

1.标签选择器

特点

针对一类标签，描述的是共性。为这一类标签设置属性，没有办法描述个性。
选择器的名字就是html标签

代码如下

<style>p{font-size: 16px;color: blueviolet;font-weight: bold;}
</style>
<body><p>今天是周一</p><p>今天是周二</p><p>今天是周三</p><div>今天是周四</div><div>今天是周五</div>
</body>

效果如下

可以看到，只为p标签设置了属性，所以div标签是没有任何变化的。
在这里插入图片描述

2. 类选择器

基本语法

用 .类名 的形式开头的
如果是长的类名, 可以使用 - 分割
不要使用纯数字, 或者中文, 以及标签名来命名类名.

特点

能差异化表示同一个标签，只需要定义两个不同的选择器就好了

举个例子~

<style>.one{color: blue;font-size: 20px;}.two{color: blueviolet;font-size: 16px;}
</style>
<body><p class="one">这是一个段落</p><p class="two">今天天气晴朗</p><p>今天适合出游</p>
</body>

效果图如下
在这里插入图片描述

多个标签可以使用同一个类选择器

举个例子~

<style>.one{color: blue;font-size: 20px;}
</style>
<body><p class="one">这是一个段落</p><p class="one">今天要多喝水</p><div>这是一个div</div>
</body>

效果图如下
在这里插入图片描述

一个标签可以使用多个类选择器

举个例子~

<style>.size{width: 200px;height: 200px;background-color: aquamarine;}.style{font-size: 20px;color:brown;}.style1{font-size: 10px;font-weight: bold;color: cornflowerblue;}
</style>
<body><div class="size style">这是一个div</div><div class="size style1">这是一个新的div</div>
</body>

效果图如下

两个div都有size选择器，所以长宽、背景色都是一样的
区别就是style和style1中的属性不同，因为是不同的选择器
在这里插入图片描述

3. id选择器

和类选择器类似，

使用#开头， #id 的形式
id 选择器的值和 html 中某个元素的 id 值相同
id是唯一的，不能被多个标签使用

举个例子~

<style>#one{background-color: cadetblue;font-size: 17px;color: darkmagenta;width: 200px;height: 100px;}
</style>
<body><div id="one">这是一个div</div><div>这是一个新的div</div>
</body>

效果图

id是one的标签有了背景色、字体大小、字体颜色、长宽
在这里插入图片描述

4. 通配符选择器

使用 * 的定义, 选取所有的标签

举个例子~

<style>*{color: blueviolet;width: 200px;height: 100px;background-color: bisque;}
</style>
<body><div>这是一个div</div><div>这是一个新的div</div>
</body>

效果图如下

页面所有背景颜色都会变成橘黄色，字体颜色为紫色，页面长宽为200px 100px
在这里插入图片描述

基础选择器总结

选择器	作用
标签选择器	选出所有相同的标签，描述共性，不能差异化选择
类选择器	选出一个或者多个标签，描述一个或者多个标签的个性
id选择器	选出一个标签，同一个id是唯一的，和身份证号一样
通配符	选出所有标签，为HTML所有标签设置属性，特殊情况下使用

三、复合选择器

1. 后代选择器

又叫包含选择器，选择某个父元素中的某个子元素

元素1 元素2 {样式声明}

元素 1 和元素 2 要使用空格分割
元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

代码示例1

<style>ul li{color: brown;font-size: 20px;}
</style>
<body><ul><li>one</li><li>two</li><li>three</li></ul><ol><li>111</li><li>222</li><li>333</li></ol>
</body>

效果图

修改ul中li的颜色、字体，不影响ol中的
在这里插入图片描述
代码示例2：元素2除了是儿子，还可以是孙子

<style>ul li a{color: brown;font-size: 20px;}/*或者这样写:ul a{color: brown;font-size: 20px;}*/
</style><body><ul><li>one</li><li>two</li><li><a href="#">three</a></li></ul><ol><li>111</li><li>222</li><li>333</li></ol>
</body>

效果图

只给父元素中的孙子元素a设置属性
在这里插入图片描述
代码示例3：可以是任意基础选择器的组合(包括类选择器, id 选择器)

<style>.one li a{color: chartreuse;font-size: 20px;}
</style>
<body><ul class="one"><li>one</li><li>two</li><li><a href="#">three</a></li></ul><ol><li>111</li><li>222</li></ol></body>

效果图
在这里插入图片描述

2. 子代选择器

和后代选择器类似，但是只能选择子标签

元素1>元素2 { 样式声明 }

使用大于号分割
只选亲儿子，不选孙子元素

代码示例1(后代选择器)

<style>.one a{color:crimson;font-size: 20px;}
</style>
<body><ul class="one"><a href="#">这是一个链接</a><li>one</li><li>two</li><li><a href="#">three</a></li></ul><ol><li>111</li><li>222</li></ol></body>

效果图

后代会选中所有的a标签
在这里插入图片描述
代码示例2(子代选择器)

<style>.one > a{color:crimson;font-size: 20px;}
</style>
<body><ul class="one"><a href="#">这是一个链接</a><li>one</li><li>two</li><li><a href="#">three</a></li></ul><ol><li>111</li><li>222</li></ol></body>

效果图

子代选择器只会选择自己的儿子标签
在这里插入图片描述

3. 并集选择器

用于选择多组标签 (集体声明)

元素1, 元素2 { 样式声明 }

通过逗号分割等多个元素
表示同时选中元素1 和元 2
任何基础选择器都可以使用并集选择器.
并集选择器建议竖着写，每个选择器占一行 (最后一个选择器不能加逗号)

代码示例1

<style>div,p{color:rgb(220, 20, 30);font-size: 20px;}
</style>
<body><div>水果</div><p>蔬菜</p><ul class="one"><li>one</li><li>two</li><li><a href="#">three</a></li></ul></body>

效果图

只有选中的div和p标签有属性，其他没有
在这里插入图片描述

代码示例2

<style>div,p, ul>li{color:rgb(220, 20, 200);font-size: 20px;}
</style>
<body><h1>牛奶</h1><div>水果</div><p>蔬菜</p><ul class="one"><li>萝卜</li><li>青菜</li><li><a href="#">苹果</a></li></ul></body>

效果图

把萝卜和青菜也设置成红色属性
在这里插入图片描述

4. 伪类选择器

4.1 链接伪类选择器

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)

注意

按照LVHA的顺序去写
a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
a:active 必须被置于 a:hover 之后，才是有效的

<style>a:link {color: black;text-decoration: none; }a:visited {color: green; }a:hover {color: red; }a:active {color: blue; }
</style>
<body><a href="#">苹果</a>
</body>

4.2 force 伪类选择器

选取获取焦点的 input 表单元素

<style>.three>input:focus {color: red; }
</style>
<body><div class="three"><input type="text"><input type="text"><input type="text"><input type="text"></div>
</body>

复合选择器总结

选择器	作用
后代选择器	选择后代元素
子选择器	选择子代元素
并集选择器	选择多组标签，设置相同的样式
链接伪类选择器	选择不同状态的链接
:focuse 伪类选择器	选择被选中的元素