文章目录

一、选择器的基本概念
二、基础选择器
- 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 伪类选择器	选择被选中的元素

CSS选择器常见用法总结相关推荐

xpath选择器和css选择器的用法
目标:xpath选择器和css选择器的用法前文使用scrapy爬虫框架用到selector选择器了,本文补充两种选择器的使用细节 xpath选择器语法 css选择器语法掌握常用的xpath选择器和 ...
html类选择器使用在什么场景,CSS选择器
**关键字: ** ** 1.css选择器使用场景; ** ** 2.css选择器优先级; ** 3. first-child和:first-of-type 1.class 和 id 的使用场景? c ...
零基础学Python-爬虫-3、利用CSS选择器爬取整篇网络小说
本套课程正式进入Python爬虫阶段,具体章节根据实际发布决定,可点击[python爬虫]分类专栏进行倒序观看: [重点提示:请勿爬取有害他人或国家利益的内容,此课程虽可爬取互联网任意内容,但无任何收 ...
网络爬虫CSS选择器详细讲解
网络爬虫CSS选择器详细讲解前言使用步骤 1.解析的HTML代码 2.逐层选择节点 3.获取文本(string和get_text()) 4.获取节点的属性值 5.选择单个和多个节点 6.通过cla ...
【CSS】常见选择器用法
文章目录一.引入方式 1. 行内样式/内联样式 2. 内部样式 3. 外部样式二.选择器 1. 基础选择器 1.1 标签选择器 1.2 类选择器 1.2.1 基本语法: 1.3 id选择器 1.4 ...
css常用选择器：相邻兄弟选择器（+）、子选择器（＞）、兄弟选择器（~）、属性选择器等用法
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+).子选择器(& ...
地图选择器怎么用_简易数据分析 15 | Web Scraper 高级用法——CSS 选择器的使用....
[ 这是简易数据分析系列的第 15 篇文章 ] 年末事情比较忙,很久不更新了,后台一直有读者催更,我看了一些读者给我的私信,发现一些通用的问题,所以单独写篇文章,介绍一些 Web Scraper 的进 ...
html5类选择器用什么表示,HTML_揭秘常用的五类CSS选择器用法，有许多新手朋友不知道在什么 - phpStudy...
揭秘常用的五类CSS选择器用法有许多新手朋友不知道在什么情况下运用什么样的CSS选择器,针对新手朋友,对CSS选择器作一些简单的说明,这里重点介绍一下最常用的五类CSS选择器的使用. 本文向大家描述 ...
web前端(2)：了解CSS和常见的属性(常用选择器+盒子模型+浮动和定位)
文章目录一.什么是CSS 二.CSS的三种样式及其优先级三.CSS基本选择器及其优先级四.其他常见的选择器五.选择器优先进阶六.css的常见属性(颜色.背景.字体.边框) 七.内间距和外间距 ...

CSS选择器常见用法总结

文章目录

一、选择器的基本概念

二、基础选择器

1.标签选择器

2. 类选择器

3. id选择器

4. 通配符选择器

基础选择器总结

三、复合选择器

1. 后代选择器

2. 子代选择器

3. 并集选择器

4. 伪类选择器

4.1 链接伪类选择器

4.2 force 伪类选择器

复合选择器总结

CSS选择器常见用法总结相关推荐

最新文章

热门文章