CSS第四篇(复合选择器)

1.后代选择器

概念:后代选择器又称为包含选择器
作用:用于选择元素或元素的子孙后代,一个标签之后的所有标签都会选择
写法:把外层标签写在前面,内层标签写在后面,中间用空格隔开

父级子级{属性:属性值; 属性:属性值}

语法

 <!-- css部分 --><style>/* 后代选择器 */.disorderly li{color: blue;}
</style>
</head>
<!-- html部分 -->
<body><div><ul class="disorderly"><li>元素</li><li>元素</li><li>元素</li></ul></div>
</body>
</html>

2.子元素选择器

选择一个元素的子元素,中间不能有任何的标签,使用>隔开.
写法:把父元素写在前面,子元素写在后面,中间用>隔开.
语法:

父元素>子元素{属性:属性值;属性:属性值;}

3.总结

后代选择器中必然会使用空格隔开,子选择器中使用>隔开

4.交集选择器

模式:其中第一个为标签选择器,第二个为class类选择器,但是两个选择器之间不能有空格,如p.one，用得相对较少
案例

    <!-- css部分 --><style>p.one{color: blue;}</style><!-- html部分 -->
<body><p class="one">谢天龙</p><div><p class="two">飞龙在天</p></div>
</body>
</html>

5.并集选择器

应用场景:当需要对不同标签设置相同样式的时候就可以采用并集选择器
注意:并集选择器中各选择器使用逗号隔开,意为和的意思
语法:

选择器,选择器{属性:属性值;属性:属性值}

案例

<!-- css部分 --><style>p,div{color: blue;}</style><!-- html部分 -->
<body><p>浪里小白龙</p><p>浪里小白龙</p><p>浪里小白龙</p><div>搞死老板</div><div>搞死老板</div><div>搞死老板</div>
</body>

链接伪类选择器

a:link{属性:属性值;} 未访问过的链接的样式
a:visted{属性:属性值;} 访问过的链接的样式
a:hover{属性:属性值;} 鼠标经过或是放在链接上时链接的样式
a:active{属性:属性值;} 点击链接是链接的样式

注意:以上四个链接伪类选择器的顺序不能颠倒或是随意切换,否则所设置的样式将无法作用于链接

CSS第四篇(复合选择器)相关推荐

CSS基本知识之复合选择器、元素显示模式、背景图片位置，精灵图
CSS基本知识之复合选择器.元素显示模式.背景图片位置,精灵图一.复合选择器在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进 ...
CSS（二）——复合选择器、元素显示模式、背景、三大特性
文章目录 *1.Emmet语法 *1.1 快速生成HTML结构语法 *1.2 快速生成CSS样式语法 1.CSS 的复合选择器 1.1 什么是复合选择器 1.2 后代选择器 (重要) 1.3子选择器( ...
使用css的类名交集复合选择器
首先先看一下基本定义: 复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括"交集"选择器."并集"选择器."后代"选 ...
CSS 2 emmet语法复合选择器元素显示模式
目录 Emmet语法 1.1快速生成HTML结构标签 1.2快速生成CSS样式语法 CSS的复合选择器 1.1什么是复合选择器 1.2后代选择器(重要) 1.3子选择器(重要) 1.4并集选择器(重要 ...
WEB前端学习（3）CSS复习二（复合选择器+元素显示模式+ 背景）
一 CSS 复合选择器总结:复合选择器 1. 后代选择器后代选择器又称为包含选择器,可以选择父元素里面子元素.其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔.当标签发生嵌套时,内 ...
CSS的四种基本选择器和四种高级选择器
CSS选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器.意为:选择哪个容器. CSS的选择器分为两大类:基本选择题和扩展选择器. 基本选择器: 标签选择器:针对一类标签 ID选择器:针对某 ...
css3 复合选择器,CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. 交集选择器交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器, ...
css层叠引入方式有,前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器...
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器一丶CSS简介叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTM ...
前端之CSS篇(二)——CSS复合选择器及元素的显示模式和背景属性
1.Emmet语法 Emmet语法是前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法. 1.1快速生成HTML结构语法 (1)生成标签直接输入 ...

CSS第四篇(复合选择器)

1.后代选择器

2.子元素选择器

3.总结

4.交集选择器

5.并集选择器

链接伪类选择器

CSS第四篇(复合选择器)相关推荐

最新文章

热门文章