[04-01]css组合选择器

/* 私人笔记 */

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

1.源码

<!DOCTYPE html>

<head>

<title>组合选择器</title>

</head>

<body>

<seda>

<ul>

<li>

</li>

</ul>

</seda>

</body>

</html>

1.分组用到了分号 ‘，’ 如：div,p,ul；

div,p{

background: green;/*背景颜色*/

color:red;/*字体颜色*/

}

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>

</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>

</li>

</ul>

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>

</p>

</body>

p::before{

content:"before";

}

p::before{

content:"after";

}

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>

</P>

<p>

</p>

<p>

</p>

<p>

</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;

}

转载于:https://www.cnblogs.com/cainiaobufei/p/10646478.html

[04-01]css组合选择器相关推荐

CSS入门、基本选择器和组合选择器
CSS的基本使用定义注释样式行内样式内部样式外部样式优先级 <head><meta charset="utf-8"><title> ...
CSS选择器学习小结 (css基本选择器 + 组合选择器 + :nth-child()高级选择器)
目录 css基本选择器: 通用选择器: 格式: 元素选择器: 格式: 样例: id选择器: 格式: class类选择器: 格式: 分组选择器: 格式: 基本选择器的权重: css组合选择器: 后代选择 ...
前端：CSS/09/行内框架，CSS简介，CSS选择器，组合选择器，CSS注释，CSS尺寸属性，CSS字体属性，CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...
html选择器并列,CSS 中的选择器（二）- 组合选择器
CSS中组合选择器,算是基础选择器的升级版, 也就是组合去使用基础选择器的意思,因为配合一些 CSS 的专有语法,所以初学者比较难看懂, 下面枚举几个常用的选择器作为例子,略谈一下CSS的组合选择器的 ...
04 【CSS选择器】
5.CSS选择器 5.1CSS选择器的作用选择器就是根据不同的需求把不同的标签选出来,这就是选择器的作用,简单来说,就是:选择标签用的. h1 {color: red;font-size: 25px ...
CSS的选择器和常用样式（id，class,组合，字体，背景，宽度，高度，颜色等CSS样式）
<html><head><title>CSS的选择器和常用样式</title><meta charset="UTF-8"/&g ...
css3 复合选择器,CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. 交集选择器交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器, ...
标签名选择器、id选择器、class类型选择器、组合选择器
标签名选择器标签名选择器格式: 标签名{ 属性:值: } 标签名选择器,可以决定那些标签被动的使用这个样式需求: 在所有div标签上修改字体颜色为蓝色,字体大小为30个像素,边框为1个像素黄色实线 ...
前端基础之CSS复合选择器
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础 # CSS 第二天今天我们围绕一个导航栏案例进行 ...

[04-01]css组合选择器

[04-01]css组合选择器相关推荐

最新文章

热门文章