/* 私人笔记 */
 
组合选择器：把基本选择器通过特殊符号串在一起，可以带来一些特殊的意义；

1.源码

<!DOCTYPE html>
<html lang="zh">
<head>
　　<meta charset="UTF-8">
　　<title>组合选择器</title>
　　<link rel="stylesheet" href="4.css">
</head>
<body>
　　<div> div1</div>
　　<p>p1</p>
　　<seda>
　　　　<p>p2</p>
　　　　<ul>
　　　　　　<li>
　　　　　　　　<p>p3</p>
　　　　　　</li>
　　　　</ul>
　　</seda>
</body>
</html>
 
1.分组用到了分号 ‘，’ 如：div,p,ul；
div,p{
　　background: green;/*背景颜色*/
　　color:red;/*字体颜色*/
}
P{
　　font-size: 40px;/*字体大小*/
　　width: 50px;
　　height: 50px;
} 
 
解释：div标签、p标签都会展示，div，p{} 意思是div标签、p标签展示的是{}里相同的，若要单独展示某特性可像p{}单独写入；
 
2.嵌套选择器，就是把多个标签用空格隔开，如 seda p 实际上是选择的是p标签（有空格），但不是所有的p标签，而是<seda></seda>中嵌套的所有p标签；
seda p{
　　background: hotpink;/*背景颜色*/
　　color:red;/*字体颜色*/
　　font-size: 40px;/*字体大小*/
　　width: 100px;
　　height: 50px;
} 
3.子选择器，seda > p 意思是p标签的父类是seda,p标签才会生效，当p标签的父类是其他则不会生效，如源码
<li>
　　<p>p3</p>
</li>
，<p>p3</p> 它的父类时<li>；
 
seda > p{
　　background: hotpink;/*背景颜色*/
　　color:red;/*字体颜色*/
}
4.相邻的同级别的选择器，div+p 意思是p标签与div标签同级别时，p标签才会生效*/
div+p{
　　background: burlywood;
　　color: green;
　　font-size: 60px;
}
 
待跟新...
 
/*属性选择器，使用[] 将属性放在里面,
基本属性，[属性=值]，[属性~=值]空格隔开，[属性^=值]开始
*/
源码：
<body>
　　<ul>
　　　　<li>
　　　　　　<p title="qiuqiu2 cc">p4</p>
　　　　</li>
　　</ul>
　　<ll title="qiuqiu cc">
　　　　ll-1
　　</ll>
</body>
css代码如下，<ll title="qiuqiu cc">ll-1</ll> 会展示，
<p title="qiuqiu2 cc">p4</p> 不会展示
ll[title~=qiuqiu]{
　　background: blueviolet;
　　color: red;
　　font-size:50px;
}
ll[title^=qiuqiu]{
　　background: blueviolet;
　　color: red;
　　font-size:50px;
}
[属性&=值]结束
ll[title&=cc]{
　　background: blueviolet;
　　color: red;
　　font-size:50px;
}
/*伪元素选择器:
- 伪类用于设置同一个元素在不同状态下的样式；
我们自己写的标签里的元素，会自动添加一个隐含元素，添加
开始：before
结束：after
如：
<body>
　　<p>
　　　　<!-- <before> -->
　　　　p1
　　　　<!-- <after> -->
　　</p>
</body>
*/
p::before{
　　content:"before";
}
p::before{
　　content:"after";
}
p{
　　backdrop-color:green;
　　font-size: 70px;
　　color:red;
}
/*针对块元素，第一个字母用 first-letter,
第一行 first-line
*/
p::first-letter{
　　color: rebeccapurple;
　　font-size: 120px;
}
 
/*伪类选择器：
- 常用伪类：
　　· link 向未被访问的超链接添加样式；
　　· visited 向已被访问的超链接添加样式；
　　· active 向被激活的元素添加样式；
　　· hover 当鼠标悬停至元素上方时，向该元素添加样式；
　　· focus 当元素获取焦点时，向该元素添加样式；
 
html参考码：
<body>
<P>
　　<a href="http://www.tmooc.cn">达内部</a>
　　<a href="http://www.baidu.com">文档</a>
</P>
<p>
　　<!--展示按钮-->
　　<input type="button" value="按钮" id="il">
</p>
<p>
　　<!--展示输入框-->
　　<input type="text" id="i2">
</p>
<p>
　　<img src="xiaoan.jpg" id="i3">
</p>
</body>
*/
 
/*伪类选择器：根据元素的状态选择元素，选择未访问过的超链接*/
a:link{ color: green; }
 
/*伪类选择器：根据元素的状态选择元素，选择访问过的超链接*/
a:visited{ color: red; }
 
/*选择激活态(正在点)的按钮*/
#il:active{/* :active向活动的链接添加特殊的样式; */
　　background-color: blue;/*点击时出现背景颜色*/
}
 
/*选择有焦点的文本框/密码框/文本域*/
#i2:focus{
　　background-color: green;/*点击后背景展示绿色*/
}
 
/*选择鼠标悬停态(触碰)的图片*/
img:hover{
　　width: 250px;
　　height: 250px;
}
 
 

[04-01]css组合选择器的更多相关文章

  1. CSS 组合选择器

    CSS 组合选择器 注:使用逗号分隔,同时应用. 多个id选择器拼接到一起 含有:i1 i2 i3的标签同时应用css样式. <html> <head> <!-- sty ...

  2. python 46 css组合选择器 及优先级 、属性选择器

    一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器:    d ...

  3. CSS【04】：CSS组合选择器

    组合选择器 群组(并集)选择器 作用:给所有选择器选中的标签设置属性,可以同时控制多个选择器 格式: 选择器1, 选择器2 { 属性: 值; } 注意点: 必须使用,来连接 选择器可以使用标签名称.i ...

  4. css组合选择器

    组合选择器:1,后代选择器 .main h2 {...}, 使用空格表示 IE6+2,子选择器 .main>h2 {...}, 使用 > 表示 IE7+3,兄弟选择器 h2+p {...} ...

  5. CSS_03_01_CSS组合选择器

    CSS组合选择器 第01步:创建css:with.css @charset "utf-8"; /* 组合选择器,用","隔开 */ .a,.b,div span ...

  6. CSS 简介、 选择器、组合选择器

    #CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  7. 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器

    今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...

  8. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

  9. 前端知识之CSS(1)-css语法、css选择器（属性、伪类、伪元素、分组与嵌套）、css组合器

    目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.c ...

随机推荐

  1. iOS--App功耗优化

    良好的用户体验需要如下要素: 电池寿命长.随着能效降低,电池寿命也会降低.但用户想让自己的移动设备全天候待命. 速度快.iOS系统处理复杂操作时仍能提供很好的性能. 响应快.同一时刻消耗太多资源会使U ...

  2. .NET 同步与异步 之 EventWaitHandle（Event通知） （十三）

    本随笔续接:.NET 同步与异步 之 Mutex (十二) 在前一篇我们已经提到过Mutex和本篇的主角们直接或间接继承自 WaitHandle: Mutex类,这个我们在上一篇已经讲过. Event ...

  3. Python的虚拟机安装已经如何配置Scrapy for Mac

    时间:2018年2月21日 因为时间问题,以下笔记就粗略记录.仅作为个人笔记为用 安装virtualenv和virtualenvwrapper 如何安装的细节下面这篇也有介绍,包括如何使用切换虚拟机也 ...

  4. 关于在最新的 Visual Studio 2017 版本中使用 Web Deploy 遇到的 SSL 连接错误

    错误信息: 无法完成向远程代理 URL 发送请求.请求被中止: 未能创建 SSL/TLS 安全通道. 原因分析: 最新版本的 Visual Studio 中,已经抛弃了 https 协议中旧版 SSL ...

  5. .NET Core+NLog+存储配置 日志存入到数据库

    nlog-config.xml 配置文件: <?xml version="1.0" encoding="utf-8" ?> <nlog xml ...

  6. 物联网系统与CoAP之Hello,World

    物联网系统与CoAP Hello,World 关于CoAP与物联网系统我们在上一篇中(ps:CoAP与物联网系统)中做一个简单的介绍,接着我们便開始试试CoAP协议的应用 CoAP应用 開始之前我们须 ...

  7. 大话前端解析Json对象

    一.对于标准的json对象如: var result=[{"flag":1,"macId":"2","mbId":0,& ...

  8. C语言 sscanf用法详解

    /* sscanf用法详解 */ #include <stdio.h> /* sscanf头文件 */ #include <stdlib.h> #include <str ...

  9. 【转】WPF自定义控件与样式(11)-等待/忙/正在加载状态-控件实现

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要有三种实现方式: 简单忙碌状态控件BusyBox: Win8/win10效果忙 ...

  10. UEditor在asp.netMVC4中的使用，包括上传功能，粘贴表格不显示边框问题

    网页编程中在线编辑器的使用还是很重要的,最近研究了一下百度出的UEditor编辑器,把它结合到刚学的asp.netMVC+EF中,同时实现上传资料(包括图片,视频等)功能,下面就以一个最简单的新闻管理 ...