CSS选择器分类(有例子非常全)
1.基础选择器
单个选择器组成
1)标签选择器
指用HTML标签名称作为选择器,为页面中某一类标签指定统一的CSS样式。
p {color: green;
}
div {color: pink;
}
缺点:不能设计差异化样式
2)类选择器(开发最常用)
差异化选择不同的标签,单独选择一个或者某几个标签
口诀:样式点定义,结构类调用
注意
- 不能用标签当类名
- 可以使用中横线
- 不要使用纯数字,中文定义类名
- 命名要有意义
.red {color: red;
}
.green {color: green;
}
.blue {color: blue;
}
.yellow {color: yellow;
}
<ul><li class="red">格兰芬多</li><li class="green">斯莱特林</li><li class="blue">拉文克劳</li><li class="yellow">赫奇帕奇</li>
</ul>
多类名:给一个标签指定多个类名,从而达到更多的选择目的
使用方式:用空格隔开
.red {color: red; } .font35 {font-size: 35px; }
<div class="red font35">格兰芬多</div>
使用场景:可以抽取公用的样式,标签同时调用公有和私有样式
3)id选择器
- 口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用
#pink {color: pink;
}
<div id="pink">迈克尔杰克逊</div>
类选择器 | id选择器 |
---|---|
人的名字,同一个名字可以被多人使用 | 身份证号,唯一的,不能重复 |
可使用多次 | 只能使用一次 |
在修改样式中使用最多 | 一般用于页面唯一性的元素上,经常和JavaScript搭配使用 |
4)属性选择器
根据标签的属性进行筛选的选择器
<body><main><article><h1 title="yooo .com">Yooo*</h1><h1 title="yooo" id="">yooo</h1><h1 title="mjjj.com">Mjjj*</h1><h1 title="yooo-com">mjjj</h1><h2>alison</h2><aside><h2>andy</h2></aside><h2>ruby</h2></article></main>
</body>
body {background-color: black;color: white;}/* 有title、id属性 */h1[title][id] {color: orange;}/* 有title属性 */h1[title] {font-size: 50px;}/* title属性值是yooo */h1[title="yooo"] {font-style: italic;}/* title属性值以yooo开头 */h1[title^="yooo"] {font-weight: 400;}/* title属性值以com结尾 */h1[title$="com"] {color: olivedrab;}/* title属性值包含yooo */h1[title*="yooo"] {font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}/* title属性值包含独立的词yooo */h1[title~="yooo"] {text-decoration: line-through;}/* title属性值以yooo开始或者yooo紧接着-连接 */h1[title|="yooo"] {text-align: center;}
5)通配符选择器
使用*定义,表示选取页面中所有元素
不需要调用,特殊情况才使用
* {color: red;
}
<div>我的</div>
<span>我的</span>
<ul><li>我的</li>
</ul>
2.复合选择器
建立在基础选择器之上,对基本选择器进行组合形成的,更准确更高效。
1)后代选择器(重要)
包含选择器,可选择父元素里的子元素。
父子元素一定使用空格隔开,修改的是子元素的样式。
ol li {color: pink;
}ol li a {color: red;
}.nav li a {color: yellow;
}
<ol><li>我是ol的孩子</li><li>我是ol的孩子</li><li>我是ol的孩子</li><li><a href="#">我是li的孩子</a></li>
</ol>
<ul><li>我是ul的孩子</li><li>我是ul的孩子</li><li>我是ul的孩子</li>
</ul>
<ul class="nav"><li>我是ul的孩子</li><li>我是ul的孩子</li><li>我是ul的孩子</li><li><a href="#">我是li的孩子</a></li>
</ul>
2)子选择器(重要)
只能选择某元素的最近一级子元素,选亲儿子。
.nav>a {color: red;
}
<div class="nav"><a href="#">我是儿子</a><p><a href="#">我是孙子</a></p>
</div>
- 使用>隔开
- 只选亲儿子,孙子重孙子都不管
3)并集选择器(重要)
可以选择多组标签,同时为他们定义相同的样式
div,
p,
.pig li {color: pink;
}
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig"><li>小猪佩奇</li><li>猪爸爸</li><li>猪妈妈</li>
</ul>
- 用逗号隔开
- 任何形式的选择器都可以成为并集选择器的一部分
4)兄弟选择器
<body><main><article><h1>Yooo*</h1><h2>alison</h2><aside><h2>andy</h2></aside><h2>ruby</h2></article></main>
</body>
- ~选择同级标签,如下选择article的后代h1的所有h2兄弟
body {background-color: black;color: white;
}article h1~h2 {color: orange;
}
- +选择同级标签,如下选择article的后代h1紧贴的h2兄弟
body {background-color: black;color: white;
}article h1+h2 {color: orange;
}
5)伪类选择器
为元素的不同状态或不确定存在的元素设置样式规则,如链接伪类、结构伪类等。使用冒号:隔开
no1.链接伪类选择器
写法 | 功能 |
---|---|
a:link | 选择所有未被访问的链接 |
a:visited | 选择所有已被访问的链接 |
a:hover | 选择鼠标经过的链接 |
a:active | 选择鼠标正在按下还未弹起的链接 |
- 顺序不能颠倒 LVHA
- 因为a链接在浏览器中具有默认样式,所以需要给a单独指定样式
a {color: #333;text-decoration: none;
}a:hover {color: #369;text-decoration: underline;
}
<a href="#">小猪佩奇</a>
<a href="aaa">光头强</a>
不只是链接可以使用伪类,其他元素也可以使用。
no2.:focus焦点伪类
用于选取获得焦点(光标)的表单元素,一般input表单元素才能获取
input:focus {background-color: pink;color: red;
}
<input type="text">
<input type="text">
<input type="text">
no3.:target目标伪类
用于控制锚点目标元素的样式。在点击后效果出现。
div {height: 900px;border: solid 1px #ddd;
}div:target {color: orange;
}
<body><a href="#yooo">Yooo*</a><div></div><div id="yooo">yooo.com</div>
</body>
点击链接后,跳转到锚点目标,同时更改样式。
no4.:root根伪类
相当于html标签选择器,选择页面内所有元素。
:root {color: orange;
}
<body><a href="#yooo">Yooo*</a><div></div><div id="yooo">yooo.com</div><ul><li>alison</li><li>ruby</li><li>andy</li></ul>
</body>
no5.:empty空元素伪类
当标签没有内容为空时被选中。注意内容为空格时不起作用,因为有内容。
li {margin-bottom: 20px;border: solid 2px #ddd;
}li:empty {display: none;
}
<body><ul><li>alison</li><li>ruby</li><li>andy</li><li></li><li> </li></ul>
</body>
no6.结构伪类选择器
- 首尾元素伪类选择(first/last同理)
<body><main><article><h1>Yooo*</h1><h2>alison</h2><aside><h2>andy</h2><h2>andy*</h2></aside><h2>ruby</h2></article></main>
</body>
/* 表示选中article所有后代的第一个子元素 */
article :first-child {color: orange;
}
/* 表示选中article所有儿子元素中的第一个 */
article>:first-child {color: olivedrab;
}
/* 表示选中article后代的第一个子元素并且该子元素为h2 */
article h2:first-child {color: palevioletred;
}
/* 表示选中article后代的类型为h2的第一个子元素 */
article h2:first-of-type {color: purple;
}
- 唯一伪类选择
<body><main><article><h1>Yooo*</h1><h2>alison</h2><aside><h2>andy</h2></aside><h2>ruby</h2></article></main>
</body>
/* 表示选择article有唯一子元素的后代 */
article :only-child {color: orange;
}
/* 表示选择article儿子类型为h2且唯一的元素 */
article>h2:only-of-type {color: palevioletred;
}
- 根据元素正数编号
<body><main><ul><li>yooo</li><li>alison</li><li>ruby</li><li>andy</li></ul><article><h1>Yooo*</h1><h2>alison</h2><aside><h2>andy</h2></aside><h2>ruby</h2><h1>mjjj</h1></article></main>
</body>
/* 表示选中article后代的第一个子元素 */
article :nth-child(1) {color: orange;
}
/* 表示选中article后代的第一个子元素且该元素类型为h2 */
article h2:nth-child(1) {color: palevioletred;
}
/* 表示选中article后代的所有子元素 */
article :nth-child(n) {color: seagreen;
}
/* 表示选中ul中的偶数li,奇数用odd */
main ul li:nth-child(even) {color: orange;
}
/* 表示选中article第二个类型为h1的后代 */
article h1:nth-of-type(2) {color: skyblue;
}
- 根据元素倒数编号
<body><main><ul><li>yooo</li><li>alison</li><li>ruby</li><li>andy</li></ul><article><h1>Yooo*</h1><h2>alison</h2><aside><h2>andy</h2></aside><h2>ruby</h2><h1>mjjj</h1></article></main>
</body>
/* 表示选中后两个li */
main>ul li:nth-last-child(-n+2) {color: orange;
}
/* 表示选中从倒数第二个开始到正数第一个结束的li */
main>ul li:nth-last-child(n+2) {color: palevioletred;
}
/* 表示选中article中倒数第二个h2 */
article h2:nth-last-of-type(2) {color: greenyellow;
}
no7.:not()排除选择器
<body><main><ul><li>yooo</li><li>alison</li><li>ruby</li><li>andy</li></ul><article><h1>Yooo*</h1><h2>alison</h2><aside><h2>andy</h2></aside><h2>ruby</h2><h1>mjjj</h1></article></main>
</body>
/* 表示选中前三个li,不包括第二个,不包括第一个 */
main>ul li:nth-child(-n+3):not(:nth-child(2)):not(:first-child) {color: orange;
}
no8.表单伪类选择器
<body><form action=""><input type="text" disabled><input type="text"><hr><input type="radio" name="sex" id="boy"><label for="boy">男</label><input type="radio" name="sex" id="girl" checked><label for="girl">女</label><hr><input type="text" required><hr><input type="email"><hr><button>保存</button></form>
</body>
/* 表示选中禁用input */
input:disabled {background: peachpuff;
}/* 表示选中非禁用input */
input:enabled {background: paleturquoise;
}/* 表示选中被选中元素所对应的的label */
input:checked+label {color: peachpuff;
}/* 表示选中必填项input */
input:required {border: solid 2px #1C8FFF;
}/* 表示选中验证有效的input */
input:valid {background: olivedrab;
}
no9.文本伪类选择器
<body><span>Yooo</span><p>霍格沃茨成立于10世纪左右,被认为是魔法世界中最好的魔法机构之一,尽管还有其他著名的魔法学校,包括布斯巴顿魔法学校和德姆斯特朗魔法学校。霍格沃茨学院共分为四个学院,分别是格兰芬多(Gryffindor)、赫奇帕奇(Hufflepuff)、拉文克劳(Ravenclaw)和斯莱特林(Slytherin),四个学院皆有其代表颜色与动物。在每学年的开学宴会之前,一年级新生都会轮流上台戴上分院帽进行分院,分院帽会根据你的性格和品质来判断你该属于哪一个学院。</p><p>具有魔法能力的孩子在出生时就被录取,并在十一岁时通过猫头鹰收到由霍格沃兹寄来的录取通知书。然而,如果这个孩子是麻瓜出身或像哈利波特这样对魔法世界一无所知的混血儿,学校的工作人员会拜访孩子和家人,告诉他们魔法世界的遗产和存在。学校的确切位置永远无法被发现,因为它被渲染为不可标绘。在麻瓜们看来,这所学校就像是一座废弃的古老城堡。同样,大多数魔法学校的地点都被保护起来,以防止他们的教学方式被泄露,同时也保护学生和学校本身不受任何伤害。</p>
</body>
/* 每段的首字母 */
p::first-letter {font-size: 20px;font-weight: 700;
}/* 每段的首行 */
p::first-line {color: yellowgreen;
}/* 在span标签后面添加内容和样式,如果是前面使用before */
span::after {content: ".com";color: orange;
}
CSS选择器分类(有例子非常全)相关推荐
- html中css选择器的分类,CSS选择器分类
CSS选择器分类 标签(空格分隔): CSS 选择器 标签选择器 标签选择器:html代码中的标签.例如:html.form.span 为p标签设置12px字号,行间距设置1.6em的样式: p{ f ...
- CSS选择器分类大全
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用. 简单来说,就是选择标签用的. 分类:基础选择器.复合选择器 目录 一.基础选择器 二.复合选择器 三.CSS3选择器补充: (一 ...
- 常见CSS选择器分类
CSS选择器 基本/基础选择器 通配符选择器 例:*{color:red;} 引入后会把html里所有内容变成红色 元素选择器 例:h1{color:red;} 并集/组合选择器 例:h1,h2,p{ ...
- CSS选择器分类与优先级
详见附件 转载于:https://blog.51cto.com/xiaoxiaojinya/1948308
- CSS选择器及其优先级排序
一. CSS选择器分类 CSS选择器如下: CSS的选择器其实大类的话可以分为三类,即id选择器.class选择器.标签选择器. 用法如下: id选择器: #id名 { 属性名:属性值; } clas ...
- CSS选择器有哪些?选择器的优先级如何排序?
本文章转载于:https://www.cnblogs.com/AIonTheRoad/p/11283100.html CSS选择器分类: CSS的选择器分类可以分为三大类:id选择器,类选择器,标签选 ...
- CSS基本知识之常用的选择器分类
一.CSS基本知识: 1.CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.有时我们也会称之为 CSS 样式表或级联样式表. 2.CSS 是也是一种标记语言 3.CS ...
- Web全栈~06.CSS选择器
Web基本笔记~06.CSS选择器 上一期 关系选择器 后代选择器 定义 选择所有被 E 元素包含的 F 元素,中间用空格隔开 语法 E F{ } 例子 <html><head> ...
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
最新文章
- Mrtg搭建流量监控服务器
- IOS的UI基础02
- 在WINDOWS下 三步快速配置 eclipse c++ 环境
- Battery historian安装及使用
- python两个二维数组加法_对二维数组的多个列进行Numpy平均
- 芋道 Spring Boot 自动配置原理
- leetcode 153. 寻找旋转排序数组中的最小值(二分查找)
- 2020年美妆行业内容营销报告
- Pocket Gems面经prepare: Diamond and Ruby
- 1月4日 每次安装都有新问题
- VC++如何获取目标程序的句柄hProcess
- Xencrypt:反病毒绕过工具
- Android Gradle配置资源前缀
- AI革命,通往超级人工智能之路
- URI和URL的概念和区别
- 用PPT就可以做印章?是的,超简单超逼真,教你一分钟搞定
- DDoS的攻击方式和防御方法
- Android,java敏感词,QQ,微信自动过滤组件
- 袁腾飞讲述西方古代哲学思想
- CentOS7下collectd简单安装使用