CSS学习笔记 2.选择器.常用.复合.关系选择器

一、常用选择器
1.元素选择器（标签选择器）
使用HTML标签作为选择器的名称

p{color:green;font-size:20px;/* 1元素选择器 根据标签名来选中元素 */}/*  此为css内注释 */

2.id选择器
使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配

 #LOL{color:tomato;   /*  2id选择器  用法 #id(属性值){}    */}

<h2 id="LOL">英雄联盟</h2>

id命名不能重复只能选中单个元素一对一
3.类选择器
根据元素的class属性值选中一种元素
使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器

.yx{color:purple;/*   3 类选择器  用法.class(属性值){}   选中一组数据 可以重复能选中多个  开发常用
还可以给同一个元素 使用多个不同的class名 如 class="yx cx zx"之间用空格隔开*/}

<li class="yx"> 千场老剑魔教你如何玩 TheShy一打四天神下凡 </li>

class是一个标签的属性，和id类似但他可以重复使用还可以给同一个元素使用不同的class名
4.通配选择器
选中页面中的所有元素

*{color:red;/*  页面中所有元素都被选中且赋给红色  */
}

二、复和选择器
标签选择器和类选择器、标签选择器和ID选择器，一起使用
必须同时满足两个条件才能应用样式
1.交集选择器
选中同时符合多个条件的元素
用法选择器1选择器2选择器3选择器n{}

div.music  {color:salmon;  /* 交集选择器 例子为既符合元素选择器div又符合class="music" 用法 选择器1选择器2选择器3选择器n{} 选中同时符合多个条件的元素  唯一对应的元素*/
}

  <div class="music">  周杰伦 晴天

2.并集选择器
用法选择器1，选择器2，选择器3，选择器n{}
例如div，.music{} 表示有div标签和class=“music” 的元素都被选中
三、关系选择器
父元素
-直接包含子元素的元素叫做父元素子元素
-直接被父元素包含的元素是子元素
祖先元素
-直接或间接包含后代元素的元素叫做祖先元素-一个元素的父元素也是它的祖先元素
后代元素
-直接或间接被祖先元素包含的元素叫做后代元素-子元素也是后代元素
兄弟元素
-拥有相同父元素的元素是兄弟元素

<div class="box">//是p的父亲元素
我是一个div
<p>//
我是div中的p元素
<span>我是p元素中的span</span>//div是它的祖先元素  p是它的父亲元素
</p>
<span>我是div中的span元素</span>//是p的兄弟元素
</div>

1.子元素选择器
选中指定父元素的指定子元素
语法父元素 >子元素

div>span{color：red；
}

2.后代元素选择器
选中指定元素的指定后代元素
语法祖先后代

div span{color：red；
}

3.兄弟元素选择器
选中指定元素的指定兄弟元素
语法前一个+ 后一个

p+span{color：red；
}

CSS学习笔记 2.选择器.常用.复合.关系选择器相关推荐

HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记（详细）- 基础
CSS学习笔记从零开始代码风格样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器基础选择器标签选择器类选择器 - 开发最常用多类名 i ...
Web前端 html css学习笔记（更新）
HTML CSS学习笔记 2021/9/29 网页简介 HTML简介第一个网页自结束标签和注释文档声明进制字符编码完整的文档结构 2021/9/30 VScode安装及使用实体 meta ...
《Go语言圣经》学习笔记第四章复合数据类型
<Go语言圣经>学习笔记第四章复合数据类型目录数组 Slice Map 结构体 JSON 文本和HTML模板注:学习<Go语言圣经>笔记,PDF点击下载,建议看书. ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
2019-4-26 css学习笔记
CSS简介:Cascading Style Sheets(层叠样式表)的缩写,它是一种用来表现HTML或XML等文件样式的计算机语言. CSS的作用: 是定义网页外观(例如,字体.背景.文本.位置.布 ...

CSS学习笔记 2.选择器.常用.复合.关系选择器

CSS学习笔记 2.选择器.常用.复合.关系选择器相关推荐

最新文章

热门文章