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

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. linux内核剖析（八）进程间通信之-管道

    管道 管道是一种两个进程间进行单向通信的机制. 因为管道传递数据的单向性,管道又称为半双工管道. 管道的这一特点决定了器使用的局限性.管道是Linux支持的最初Unix IPC形式之一,具有以下特点: ...

  2. Python实现im2col和col2im函数

    今天来说说im2col和col2im函数,这是MATLAB中两个内置函数,经常用于数字图像处理中.其中im2col函数在<MATLAB中的im2col函数>一文中已经进行了简单的介绍. 一 ...

  3. Asp.Net WebApi上传图片

    webapi using System; using System.Collections; using System.Collections.Generic; using System.Diagno ...

  4. C++ 函数模板默认的模板参数

    函数的默认模板参数 你可以为模板参数定义默认值,它们被称作 default template arguments(默认模板参数). 它们甚至可以指向前一个模板参数. 1. 可以直接使用 operato ...

  5. 最简单的设计模式——单例模式的演进和推荐写法（Java 版）

    前言 如下是之前总结的 C++ 版的:软件开发常用设计模式—单例模式总结(c++版),对比发现 Java 实现的单例模式和 C++ 的在线程安全上还是有些区别的. 概念不多说,没意思,我自己总结就是: ...

  6. linux下python3调用c代码或者python3调用c++代码

    前几篇的blog都是为了这个实验做基础,先说 原因是python调用数据库150w条数据22s,然后处理数据,其实就2个简单的for循环,65s 需求: 1. python调用c++函数 2. c++ ...

  7. 【分享】Web前端开发第三方插件大全

    收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...

  8. SpringBoot系统列 5 - 接口版本控制、SpringBoot FreeMarker模板引擎

    接着上篇博客的代码继续写 1.接口版本控制 一个系统上线后会不断迭代更新,需求也会不断变化,有可能接口的参数也会发生变化,如果在原有的参数上直接修改,可能会影响线上系统的正常运行,这时我们就需要设置不 ...

  9. etl数据同步工具 kettle

    kellet使用 https://www.cnblogs.com/gala1021/p/7814712.html

  10. 在windows上搭建SSH服务踩过的坑

    前两天安装了windows操作系统,想在windows上做内网穿透,所以就想在windows下启用ssh服务,今天就来讲一下我在搭建ssh服务中遇到的坑. 我显示在Mac下搭建了ssh服务,并且测试通 ...