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

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. Python 进制转换 二进制 八进制 十进制 十六进制

    Python 进制转换 二进制 八进制 十进制 十六进制 作者:方倍工作室 地址:http://www.cnblogs.com/txw1958/p/python3-scale.html 全局定义一定不 ...

  2. Install Redis 3.2 on Ubuntu

    Install Redis 3.2 on Ubuntu It’s very easy to install Redis 3 on Ubuntu 16, just need to add PPA rep ...

  3. Vue $emit()不触发方法的原因

    vue使用$emit时,父组件无法触发监听事件的原因是: $emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名

  4. myBase7 激活方法

    一.引言: 之前使用过一段时间的myBase,那时候发现还不太美观,所以弃用了一段时间,最近看到有myBase7出来,使用了一下感觉还可以,但是只能试用一个月,不过还好找到了破解的方法. 二.破解步骤 ...

  5. Unity应用架构设计(1)—— MVVM 模式的设计和实施(Part 2)

    MVVM回顾 经过上一篇文章的介绍,相信你对MVVM的设计思想有所了解.MVVM的核心思想就是解耦,View与ViewModel应该感受不到彼此的存在. View只关心怎样渲染,而ViewModel只 ...

  6. Netty学习(八)-Netty的心跳机制

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/a953713428/article/details/69378412我们知道在TCP长连接或者Web ...

  7. EPOLL AND Nonblocking I/O

    https://medium.com/@copyconstruct/nonblocking-i-o-99948ad7c957 https://idndx.com/2014/09/02/the-impl ...

  8. underscore.js学习笔记

    一.理清概念 1.Underscore封装了常用的JavaScript对象操作方法,用于提高开发效率,Underscore还可以被使用在Node.js运行环境.从API中,你已经可以看出,Unders ...

  9. JSON API免费接口(转)

    电商接口 京东获取单个商品价格接口: http://p.3.cn/prices/mgets?skuIds=J_商品ID&type=1 用例 ps:商品ID这么获取:http://item.jd ...

  10. 使用SecureCRT / win7远程桌面连接ubuntu配置记录（有更新）

    2017-03-03 更新于末尾 1.Windows7 — Ubuntu 远程桌面连接中 Tab 键不能补全的解决办法 2.xrdp远程连接ubuntu无法使用原机的中文输入法 2017-02-22 ...