html选择器 并列,CSS 中的选择器 (二)- 组合选择器
CSS中组合选择器,算是基础选择器的升级版,
也就是组合去使用基础选择器的意思,因为配合一些 CSS 的专有语法,所以初学者比较难看懂,
下面枚举几个常用的选择器作为例子,略谈一下CSS的组合选择器的使用。
最近要整理一下之前打算写的系列文章,所以这篇算是书接上文了,
没有 CSS 基础选择器也就不会有组合选择器,
首先这个概念要明白,没人能够一步登天,要想飞你就得好好学走,
所以推荐大家基础一定要扎实的去学。
这里有张表格,算是以下例子的索引:
组合选择器列表
选择器
含义
示例
多个元素选择,同时匹配所有A元素和B元素,A和B之间用逗号分隔
div,p { color:red; }
后代元素选择器,匹配所有属于A元素后代的B元素,A和B之间用空格分隔
#nav li { display:inline; }
li a { font-weight:bold; }
子元素选择器,匹配所有A元素的子元素B
div > strong { color:#f00; }
毗邻元素选择器,匹配所有紧随A元素之后的同级元素B
p + p { color:#f00; }
多元素并列选择器
并列是我取的名字,意思就是用逗号分开的选择器都有效。
//css 代码:
div.mydivred,p.mypred{
padding:10px;
background-color:#ffffff;
border:1px #000000 solid;
color:red;
}
//html 代码
p.mypred
//css 代码:
div.mydivred,p.mypred{
padding:10px;
background-color:#ffffff;
border:1px #000000 solid;
color:red;
}
//html 代码
p.mypred
效果:
div.mydivred
p.mypred
后代选择器
#fuji .ziji{
padding:10px;
background-color:#ffffff;
border:1px #000000 solid;
color:red;
}
#fuji .ziji{
padding:10px;
background-color:#ffffff;
border:1px #000000 solid;
color:red;
}
效果:
div.ziji
子元素选择器
#zys>span {
padding:10px;
background-color:#ffffff;
border:1px #000000 solid;
color:red;
}
#zys>span {
padding:10px;
background-color:#ffffff;
border:1px #000000 solid;
color:red;
}
效果:
因为span不是块级元素,所以比较窄。
#zys>span
毗邻元素选择器
//因为怕影响页面其他位置的样式
//所以在前面加了一个#pl限定选择,不明白的童鞋可以看本页例一
#pl p+p{
padding:10px;
background-color:#ffffff;
border:1px #000000 solid;
color:red;
}
p1
p2
//因为怕影响页面其他位置的样式
//所以在前面加了一个#pl限定选择,不明白的童鞋可以看本页例一
#pl p+p{
padding:10px;
background-color:#ffffff;
border:1px #000000 solid;
color:red;
}
p1
p2
p1
p2
总结
才疏学浅,尤其是在文笔方面,
本人已经尽力使用最简单的例子,
使用尽量详细的言语去解释了,
如果还是看不懂,那只好自求多福了。
本文算是续写 CSS 中的选择器 (一),
如果你在基本选择器上有何疑问可以参考此文。
html选择器 并列,CSS 中的选择器 (二)- 组合选择器相关推荐
- 妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
- css中什么是伪类选择器?伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...
- CSS中的nth-child和nth-of-type选择器
CSS中的nth-child和nth-type-of选择器 先写一个例子 <head><style>*{margin: 0px;padding: 0px;}.item{vert ...
- CSS中常用的几种选择器是哪几种呢?
CSS中常用的选择器: (一)基本选择器(二)层次选择器(三)动态伪类选择器(四)目标伪类选择器 (五)ui状态伪类选择器(六)结构伪类选择器(七)属性选择器(八)伪元素 (一)基本选择器 ...
- css中什么是伪类选择器?伪类选择器的简介
一.伪类选择器介绍 伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...
- CSS中常用的伪类选择器
一 .伪类(不存在的类,特殊的类) -伪类用来描述一个元素的特殊状态 比如:第一个元素,被点击的元素,鼠标移入的元素··· -特点:一般请情况下,使用:开头 1. :first-child 第一个子元 ...
- css基础选择器教程,CSS核心基础 一些常见的选择器的使用 小白教程
要想将CSS样式应用于特定的HTML元素,首先要找到该目标元素.在CSS中,执行这一任务的样式规则部分被称为选择器.在CSS中有很多的选择器,包含标记(标签)选择器.类别选择器.id选择器.通配符选择 ...
- CSS中的十二种结构伪类选择器
Hello 大家好,我是一碗周,不是你想的那个"一碗粥",是一个不想被喝掉的前端
- 在CSS中使用not:first-child选择器
Introduction: 介绍: Well, selectors are a very common term to deal with while we are developing a webs ...
最新文章
- 题解——HDU 1848 Fibonacci again and again
- 【题解】P4124 [CQOI2016]手机号码
- 阿里云联合中国信通院发布《云计算开放应用架构》标准,加速云原生应用规模化落地进程
- mybatis源码刨析总结
- 浏览器插件-- Browser Helper Object(BHO) 一
- eclipse(或者myeclipse)常用配置方法
- codeforces 339A-C语言解题报告
- php 查看扩展 代码,[扩展推荐] 使用 PHP Insights 在终端查看 PHP 项目代码质量
- 95-240-054-原理-State-FsStateBackend
- 报告PPT|Python网络程序设计教学要点与案例分享(含音频)
- 国内首款 5G 机型开售;Google Chrome 大部分插件无人用;Firefox 69 Beta 9 发布 | 极客头条...
- VB API 之 第七课 字体应用四
- Oracle归档模式与非归档模式设置
- windows上pip安装及使用详解
- unknownhostexception错误解决方案
- ocr识别身份证护照阅读器
- 43.248.189.18 Steam游戏服务器搭建教程
- 微软 bing 壁纸 每日一图 bing api
- 【arcgis 批量将属性表批量导出成excel】
- C++/JAVA 计算两篇文章的相似度
热门文章
- ELK的端口以及加入x-pack的密码问题
- Cannot connect to the database. –Error connecting to database.
- Ubuntu中zabbix 4.2.6监控postgresql数据库
- eureka依赖导入失败以及eureka中没有@EnableEurekaServer异常
- Android全局异常捕获
- coc部落冲突关联错误101解决方案
- 关于angular开发中报错Cannot find module ‘webpack/lib/node/NodeTemplatePlugin‘问题的解决办法若干
- Command ‘ifconfig‘ not found, but can be installed with: sudo apt install net-tools VM Ubuntu 解决方案
- SSH连接时出现Host key verification failed的原因及解决方法
- 检测React组件外部的点击