CSS相邻选择器(>)选择子元素而不包含该子元素的子元素，及如何让DIV中的内容垂直居中...

最新推荐文章于 2023-04-03 19:13:55 发布
最新推荐文章于 2023-04-03 19:13:55 发布
阅读量2k 收藏
点赞数

1、CSS 相邻选择器“>”，其作用是选择某元素子元素，而不包含该子元素的子元素

<!DOCTYPE HTML> <html> <head> <style type="text/css"> #stuList>div { background: #EBFFEB; cursor: pointer; float: left; width: 100px; height: 100px; margin: 10px 10px; margin-left:0px; border: 1px solid #316ac5; text-align: center; line-height: 100px; } </style> </head> <body> <div id="stuList""> <div> 张 三 <div style="vertical-align:top"> Zhang San</div> </div> <div> 李 四 <div style="vertical-align:top"> Li si</div> </div> </div> </body> </html>

#stuList的子元素div背景变色了，但子元素的子元素并未变色，只运行结果如下：

如果把CSS中的大于号去掉，#stuList>div改为#stuList div，#stuList的子元素div背景变色，子元素的子元素也变色，如下：


2、如何让DIV的内容垂直居中呢，在样式中加如下内容就可以：

height: 100px; line-height: 100px;

3、如果仅想让上面的汉字垂直居中，而让下面的英文姓名垂直靠上。可以为此DIV增加一个class样式让line-height: 0px;就可以了




iteye_10993
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3-:empty、:not()选择器的用法
weixin_44486539的博客
01-25 1198
`:empty` 用于选择指定的没有子元素（包括文本节点）的元素。 `:not(selector)` 选择每个元素不是指定的元素或选择器部分；就是取非。
CSS选择器篇
weixin_44908855的博客
06-21 268
1. 选择器概述 要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。 如上图所以，要把里面的小黄人分为2组，最快的方法怎办？ 很多， 比如 一只眼睛的一组，剩下的一组 选择器干啥的？ 选择标签用的 这就用到基础选择器组： 2 标签选择器 标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下： 1 | <!-- 标签选择器 可以把某一类标签全部选择出来 div
今天用到css3选择器，不包含某个类名的选择器
gztrljh
11-02 2128
.zan-submenu li:not(.haschildren):hover{ background-color: #f6f6f6; }
选择器无法选择HTML,css选择器如何不选择某个元素
weixin_32572673的博客
06-03 888
css选择器如何不选择某个元素1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的标签中，输入css代码：li:not(.test) {color: blue}。(相关课程推荐：css视频教程)3、浏览器运行index.html页面，此时包含test类元素的li标签不会触发设置蓝色字体样式的css代码。css扩展知识CSS 否定CSS 伪类 :...
CSS(不包含css3)
m0_73369512的博客
04-03 139
简单css
css 可以使用 :empty 选择器来设置完全没有子元素或文本的元素的样式：
jieweiwujie的博客
07-12 1053
:empty 选择器来设置完全没有子元素或文本的元素的样式：
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
（1）后代选择器（包含选择器 重要） 语法： 元素1 元素2 {样式声明} 选择器1 选择器2{ 属性：属性值 } 元素1和元素2用空格隔开 元素1父亲 元素2后代 最终改变的是后代（元素2）的样式 选择器可以是...
css选择器的一些基本使用和用法
12-30
子代选择器使用大于号（>）来选取父元素的直接子元素。例如： ```css ul > li { list-style: none; } ``` 这将清除所有`ul`元素下直接的`li`子元素的默认列表样式。 六、相邻兄弟选择器 相邻兄弟选择器使用加号（+...
Selector-practice:练习CSS选择器
04-15
5. **子元素选择器**：使用`>`分隔，仅选择直接子元素。例如，`ul > li {list-style: none;}`将取消所有直接在`ul`下的`li`元素的列表样式。 6. **相邻兄弟选择器**：使用`+`分隔，选择紧跟在另一元素之后的同级...
M2-D7-HW：M2 Day7作业-CSS选择器练习
02-24
7. **通用选择器与通配符选择器**：`*`可以匹配任何元素，而`* + *`则匹配任意两个相邻的元素。 8. **属性选择器**：根据HTML元素的属性来选择，如`[target="_blank"]`会选择所有`target`属性值为`_blank`的元素。 ...
前端面试题vue，css.,javascript
最新发布
02-02
- **元素选择器、伪元素选择器:** 如 `div`, `::before`。 - **通配符 (*):** 最低优先级。 **4. H5 新特性：** - **拖拽释放 (Drag and drop) API:** 支持拖放文件到网页。 - **语义化标签:** 如 `<header>`, ...
css样式-选择父元素下的非一个子元素
heyw的博客
11-15 3334
在调整样式中我们经常会遇到这样的情况，相邻且相同元素之间间隔20px时并且第一个元素没有变化。 &lt;div&gt; &lt;span&gt;这是第1个元素&lt;/span&gt; &lt;span&gt;这是第2个元素&lt;/span&gt; &lt;span&gt;这是第3个元素&lt;/span&gt; &lt;span&gt;这是第
CSS 不包括等冷门却有用的属性
weixin_55182699的博客
11-25 1100
1.css3选择器，不包含某个类名 比如给没有“single”类名的span加上北景颜色-:not(类名) <style scoped> span:not(.single) { background: #ff1464; } </style> 2.当兄弟元素中只有自己一个p时（包括本身）的样式 p:only-of-type{ background:yellow; } 3.当元素为空时的样式 p:empty{ background:
css 利用 :not(:empty) 找出有子元素
chelen_jak的专栏
08-30 6631
参考：CSS 为没有内容的元素设置样式 :not(:empty) 我们有时会想将有子元素和无子元素的不同样式显示，所以就有了这篇资料 Html <div class='box'></div> <div class='box'>纯文本</div> <div class='box'><button>内置button&lt...
css-选择器使用详解
自我研究室
11-04 206
文章目录选择器通配符id选择器class选择器type选择器上下文选择器例子某类型的所有子元素某类型的子元素(只有子,不包含子之后的)某类型的孙元素(不包含子,孙以后的(包括孙))伪类选择器ui选择器 选择器 通配符 *选择所有元素 id选择器 //例子 &lt;h1 id="xx"&gt;h1标题&lt;/h1&gt; //用法 #id{color = red;} id因为是唯一的所有直接用#...
《第3章 使用CSS3选择器》
TrashMaker的博客
03-26 1045
3.5伪类选择器 1.伪选择器包括伪类选择器和伪对象选择器 2.伪选择器以冒号（：）作为前缀标识符 3.冒号前是选择符，限定伪类应用范围，冒号后是伪类和伪对象名，冒号前后没有空格 4.css3的伪类选择器包括4种：动态伪类、结构伪类、否定伪类、状态伪类 一、动态伪类 1.动态伪类只有当用户与页面交互时才能体现出来 2.常见5种动态伪类： ①：link 链接没有被访问时 ②：hover 鼠标悬浮在连接上时 ③：active 鼠标左键集中激活时 ④：visited 链接被访问过后 ⑤：focus 元素称为焦点时
css3选择器，不包含某个类名
热门推荐
yun的博客
11-11 1万+
比如给没有active类名的span加上hover效果 span:not(.active):hover { color: #ff1464; }
CSS常用属性
qq_52843224的博客
10-31 611
css的一些简单属性
css选择符
ImTuTouGe的博客
03-08 220
CSS选择符有：属性选择器、伪类选择器和层级选择器。 1、属性选择器： （1）E[attr]：只使用属性名，但没有确定任何属性值 （2）E[attr=“value”]：指定属性名，并指定了该属性的属性值 （3）E[attr~=“value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”必须的 （4）E[attr^=“v...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值