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

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. string与stringBuffer区别

    string 的 “+” 操作就是根据 StringBuilder (或 StringBuffer )类及其 append 方法实现的. String 不可变其实就是说一个 String 对象创建之后 ...

  2. iOS ReplayKit实时录制屏幕实现方案的细节记录

    项目有个需求,需要把ios设备上的操作画面实时传输出去,也就是类似推流手机直播画面的方案. 一番调研后发现在ios中,我们可以通过ios自带ReplayKit框架实现. 关于ReplayKit的讲解, ...

  3. SpringBoot中自定义properties文件配置参数并带有输入提示

    1. 创建配置类 在项目中创建一个参数映射类如下 @ConfigurationProperties(prefix = "user.info") public class MyPro ...

  4. CentOS 7.x 用shell增加、删除端口

    一.在/usr/local/sbin/下创建port文件,不要扩展名,并给权限  chom 777 port #!/bin/bash num=$# ok=0 if [ ${num} == 1 ]; t ...

  5. 关于go语言的测试相关内容笔记

    其实之前对于测试自己一直比较弱,不管是python的还是go的,关于测试这块并没有非常注重,这次就好好整理一下关于go的测试 单元测试 Go程序主要包含三类测试: 功能测试(test).基准测试(be ...

  6. 解决IE8下opacity属性失效问题，无法隐藏元素

    解决IE8下opacity属性失效问题   由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题.在IE8及其更早的浏览器下,我们可 ...

  7. 设计模式——proxy代理模式

    目录 概述 定义 角色 为什么会有代理模式? 应用场景 示例 静态代理 例子 动态代理 JDK中生成代理对象的API 代码示例: 代码示例2 Cglib代理 代码示例 AOP(AspectOrient ...

  8. 使用Apache下poi创建和读取excel文件

    一:使用apache下poi创建excel文档 @Test /* * 使用Apache poi创建excel文件 */ public void testCreateExcel() { // 1:创建一 ...

  9. git log --pretty=format:" "

    控制显示的记录格式,常用的格式占位符写法及其代表的意义如下: 选项 说明%H   提交对象(commit)的完整哈希字串%h    提交对象的简短哈希字串%T    树对象(tree)的完整哈希字串% ...

  10. centos 7 rpm方式安装mysql

    一.下载rpm 二.安装 1.用rz上传到centos上,目录为/home/upload 2.解压 tar -xvf mysql-5.7.25-1.el7.x86_64.rpm-bundle.tar ...