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

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. Mysql中的定时任务

    一.说明 后台周期定时任务可以有多种解决方案,我所知道的大概有以下几种: 后台框架自带定时任务.比如php中的Laravel框架里有提供定时任务操作接口,其他的框架大家可以单独针对了解. 服务器操作系 ...

  2. 【C++】C++中的函数

    目录结构: contents structure [-] 简介 可变形参的函数 initializer_list形参 省略符形参 main函数处理命令行选项 函数指针与函数引用 inline内联函数 ...

  3. xcode10 改动

    xcode10 开发环境 比  之前有了稍微的变动 1. 代码块 界面控件   图片资源等 的查看位置发生了变化 之前的开发环境  代码块  统一放在 右侧栏的下方的几个选项中 现在 统一放到了上方 ...

  4. 【转载】springboot四 全局异常处理

    http://tengj.top/2018/05/16/springboot13/ https://www.jb51.net/article/110533.htm

  5. Linux下统计当前文件夹下的文件个数、目录个数

    统计当前文件夹下文件的个数,包括子文件夹里的 ls -lR|grep "^-"|wc -l 统计文件夹下目录的个数,包括子文件夹里的 ls -lR|grep "^d&qu ...

  6. python按行遍历一个大文件，最优的语法应该是什么？

    理论上来说,总体上file.readlines()可以(取决于实现)不慢于你自己手动的一次次调用file.readline(),因为前者的循环在C语言层面,而你的循环是在Python语言层面. 但是在 ...

  7. 04Hadoop中的setPartitionerClass/SortComparator/GroupingComparator问题

    map阶段 1. 使用job.setInputFormatClass(TextInputFormat)做为输入格式.注意输出应该符合自定义Map中定义的输出. 2. 进入Mapper的map()方法, ...

  8. JDK中Unsafe类详解

    Java中Unsafe类详解 在openjdk8下看Unsafe源码 浅析Java中的原子操作 Java并发编程之LockSupport http://hg.openjdk.java.net/jdk7 ...

  9. layui 笔记

    弹出层 点击事件 <!DOCTYPE html> <html> <head> <title></title> {load href=&quo ...

  10. java应用监控工具

    http://hao.jobbole.com/category/java/java-monitoring/