css选择器，什么是css选择器
CSS选择器
1、什么是选择器
-
CSS选择器是CSS规则的第一部分，每个CSS规则都以一个选择器或一组选择器为开始
-
CSS选择器即用于“查找”（或选取）要设置样式的 HTML 元素的模式
-
选择器可以分为基础选择器、复合选择器
2、基本选择器
2.1 通配（通用）选择器
-
语法
*{ 样式声明; }
-
作用：匹配任意类型的HTML元素
-
实例演示:
<style> /* 页面上所有元素都被选择 */ * { background-color:green; } </style><body> <p>p</p> <div>div1</div> <div>div2 <div>div3</div> </div></body>
2.2 元素名称选择器
-
语法：
元素名称 { 样式声明;}
-
作用：选择所有同一元素名称的所有元素
-
实例演示:
/* 选择body */body{ background-color:green;}/* 选择页面上所有的div */div{ width:100px; height:100px; background-color:red;}/* 选择页面上所有的p */p{ background-color: pink;}
2.3 类选择器
-
语法
-
HTML中通过class属性定义
如：
<div class="box"></div>
-
css中以点进行标识:
.类名 { 样式声明;}
-
作用:选择所有带有指定类名的元素
-
多类名的使用
语法：空格隔开
实例演示:
<style>.box{ background-color:red;}.size{ width:100px; height:100px;}</style><body> <p class="box size">p</p> <div class="box">div1</div> <div>div2 <div class="box">div3</div> </div></body>
id选择器
-
语法
-
HTML中通过id属性定义
如：
<div class="box"></div>
-
css中以点进行标识:#
#id名称 { 样式声明;}
-
作用:选择所有带有指定类名的元素
-
实例演示:
#box{ background-color:red;}<div id="box">div1</div>
注意：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。
类与id的命名规则
-
见词知义，尽量用英文
-
始终建议以字母开头，可以包含数字、字母、下划线等
-
不要以数字开头
-
多个单词可以以驼峰式（newsCont）、中划线连接（news_cont）、下划线连接（news-cont）等
总结
-
总结使用频率
-
基础选择器中最常用是类选择器
-
id用于页面中唯一模块
-
元素名称选择器定义的全局样式，单独使用要慎重
-
*号通常用于重置样式【最不常用】
-
总结id与类的区别
-
基础选择器的优先级
-
对比
-
渗透调试工具的使用
F12/右键-检查左边是 HTML 元素结构，右边是 CSS 样式Ctrl 滚轮 可以放大、缩小开发者工具代码大小Ctrl 0 复原浏览器大小右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误如果有样式，但是样式被中划线贯穿，说明可能存在书写顺序 或优先级问题
-
结论
最终排序：id（身份证号是XX的学生）> 类（名叫王小帅的学生） >元素名称（所有男生） > *(所有学生)
选择范围越精确，优先级越高
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhgeibci
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01
