CSS选择器常见用法
css控制器
- 选择器
- 1.选择器的功能：选定页面中指定元素，进而修改元素的属性
- 2.选择器的种类
- .基础选择器: 单个选择器构成的
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
- 复合选择器: 把多种基础选择器综合运用起来.
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
选择器
1.选择器的功能：选定页面中指定元素，进而修改元素的属性
2.选择器的种类
可以参考
.基础选择器: 单个选择器构成的
标签选择器
特点:1.能快速为同一类型的标签都选择出来.
2.但是不能差异化选择
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标签选择器</title><style>p{font-size: large;color: coral;}div{color: crimson;}</style>
</head>
<body><p>p1p1p1p1p1p1</p><p>p2p2p2p2p2p2</p><div>d1d1d1d1d1d1</div><div>d2d2d2d2d2d2</div>
</body>
</html>
类选择器
特点: 1.差异化表示不同的标签.
2.可以让多个标签的都使用同一个标签
在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}
注意：：
- 不要使用纯数字, 或者中文, 以及标签名来命名类名类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
- 下方的标签使用 class 属性来调用.
- 一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)
- 如果是长的类名, 可以使用 - 分割.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类选择器</title><style>.blue{color: blue;}.red{color: red;}.p{font-size: 60px;}</style>
</head>
<body><p class="p blue ">pblue</p><p class="p red">pred</p>
</body>
</html>
id 选择器
和类选择器比较类似
注意：：
- CSS 中使用 # 开头表示 id 选择器
- id 选择器的值和 html 中某个元素的 id 值相同
- html 的元素id不必带 #
- id 是唯一的, 不能被多个标签使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>id选择器</title><style>#div1{color: red;}#div2{color: rgb(56, 212, 166);}#div3{color: rgb(109, 186, 250);}</style>
</head>
<body><div id="div1">喷火龙</div><div id="div2">妙蛙种子</div><div id="div3">杰尼龟</div>
</body>
</html>
通配符选择器
使用 * 的定义, 选取所有的标签.
* {color: red;
}
代码举例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通配符选择器</title><style>*{color: red;}</style>
</head>
<body><!-- 页面所有内容都会被改成红色 --><div>1111</div><div>1111</div><div>1111</div><div>1111</div><div>1111</div><div>1111</div>
</body>
</html>
复合选择器: 把多种基础选择器综合运用起来.
后代选择器
又叫包含选择器. 选择某个父元素中的某个子元素。
元素1 元素2 {样式声明}
注意：
- 元素 1 和 元素 2 要使用空格分割
- 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
代码举例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title><style>div p{color: rosybrown;}div p a{color: rgb(209, 45, 224);}ul li{color: royalblue;}ol li{color:seagreen;}</style>
</head>
<body><div><p>p1p1p1p1p1p1</p><p><a href="#">p2p2p2p2p2p2</a><br>p2p2p2p2p2p2</p></div><ul><li>无序排序1</li><li>无序排序2</li><li>无序排序3</li><li>无序排序4</li></ul><ol><li>有序排序1</li><li>有序排序2</li><li>有序排序3</li><li>有序排序4</li></ol>
</body>
</html>
代码示例: 可以是任意基础选择器的组合. (包括类选择器, id 选择器)
.one li a {color: green;
}<ol class="one"><li>ddd</li><li>eee</li><li><a href="#">fff</a></li><li><a href="#">fff</a></li><li><a href="#">fff</a></li>
</ol>子选择器
和后代选择器类似, 但是只能选择子标签.
元素1>元素2 { 样式声明 }
注意：
- 使用大于号分割
- 只选亲儿子, 不选孙子元素
<div class="two">
<a href="#">链接1</a>
<p><a href="#">链接2</a></p>
</div>
<!-- 后代选择器的写法, 会把链接1 和链接2 都选中 --!>
.two a {color: red;
}
<!-- 子选择器的写法, 只选链接1 --!>
.two>a {color: red;
}
并集选择器
用于选择多组标签. (集体声明)
元素1, 元素2 { 样式声明 }
注意：
- 通过”，“分割等多个元素.
- 表示同时选中元素1 和元素2
- 任何基础选择器都可以使用并集选择器.
- 并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)
代码举例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>并集选择器</title><style>/* 并集选择器建议竖着写. 每个元素占一行. (最后一个不能加逗号) */div,ul {color: red;}</style>
</head><body><div>苹果</div><h3>香蕉</h3><ul><li>鸭梨</li><li>橙子</li></ul>
</body></html>
伪类选择器
- 链接伪类选择器
a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)
- force伪类选择器：选取获取焦点的 input 表单元素
<div class="zms"><input type="text"><input type="text"><input type="text"><input type="text">
</div>
<!-- 此时被选中的表单的字体就会变成红色 --!>
.zms>input:focus {color: red;
}
CSS选择器常见用法相关推荐
- CSS选择器常见用法总结
文章目录 一.选择器的基本概念 二.基础选择器 1.标签选择器 2. 类选择器 3. id选择器 4. 通配符选择器 基础选择器总结 三.复合选择器 1. 后代选择器 2. 子代选择器 3. 并集选择 ...
- 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的常见属性(颜色.背景.字体.边框) 七.内间距和外间距 ...
最新文章
- Java 回调函数的理解
- Html5相关文章链接
- mysql期末考试选择题
- Variable Assembly Language可变汇编语言
- 状压动规_(POJ2817)
- tomcat监控脚本
- oracle语言的分类及其常见的系统函数
- Ural 1780 Gray Code 乱搞暴力
- hdu-5754 Life Winner Bo(博弈)
- 绑定事件和解绑事件的方法
- Android即时通讯实现原理
- python 负数索引
- 微信小程序请求函数的封装
- iOS-Mac下安装CocoaPods
- pdf压缩的网站？pdf文件在线压缩？在线压缩pdf文件大小？pdf文档压缩，在线压缩pdf文件大小，压缩pdf大小的方法？
- 土地利用规划之平时作业三
- 【工业机器人】两分钟读懂工业机器人的设计过程
- c语言实现简单计算器（两个数字的加减乘除）
- 沉浸式夜游的发展应充分挖掘文化内涵
- 考研英语阅读理解做题技巧（2）：主旨题