css学习笔记：css选择器基础和选择器权重

最新推荐文章于 2024-07-02 10:52:52 发布
最新推荐文章于 2024-07-02 10:52:52 发布
阅读量230 收藏
点赞数
分类专栏： 基础学习 文章标签： css CSS选择器 CSS选择器权重
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43750236/article/details/84555125
版权

CSS学习笔记1
一、CSS层叠样式表的引入方式：行内样式：直接写在标签内部如<h1 style=”color:red;border:1px solid red” >
内嵌样式:写在下面，上面<br/> 外链式 link：创建一个.css文件，再用link引入，如 当引入的是一个网页标签上的图标时，rel的属性值为shortcut icon,href属性值为相应的.ico文件（图标文件格式）或者图片文件格式（.jpg等）还能引入其他链接。<br/> 导入式import：需要创建的文件和link一样，但是不能创建网页标签图标，相应的格式改为：@import url(“./index.css”)（只能引入.css文件）link相比import有很多的优点，具体地址：<a href="https://www.aulence.com/#css-welcome">https://www.aulence.com/#css-welcome</a><br/> CSS选择器<br/> 对HTML页面中的元素实现一对一，一对多或者多对一的控制，从而实现布局调整，元素类型重定义，元素美化，文本、图像美化，完善交互，播放动画等一系列的功能。简单的来说就是控制那些想要控制的网页标签，然后给他们设置样式，比如颜色，边框，字体等。<br/> css常用选择器<br/> ：基础选择器<br/> 后代选择器<br/> 子选择器<br/> 伪类选择器<br/> 群组选择器<br/> 同级（兄弟）选择器<br/> 属性选择器：[属性名=””]{样式}属性名选择：只要是该属性名就全选<br/> [属性名=”属性值”]：在该属性名值下被选择<br/> [属性名^=”a”]：在该属性名下的属性值以a开头的被选择<br/> [属性名$=”a”]：在该属性名下的属性值以a结尾的被选择[属性名*=”a”]：在该属性名下的属性值含有a的被选择<br/> [属性名~=”a”]：在该属性名下的属性值含有单词a（单词a的意思是：a的前后都有空格）的被选择<br/> [属性名|=”a”]：1.在该属性名下的属性值等于a。2.以a开头并且以中杠线与其他隔开的属性值，如“a-1”。两种情况都被选择<br/> 。CSS选择器的权重<br/> 行内样式：1000<br/> id选择器：100<br/> Class选择器：1<br/> 标签选择器：0（大于默认样式和继承样式，继承样式<0）<br/> !important着重符号，权重最大（一般情况不要使用）<br/> 本节很重要的是CSS选择器的权重，需要着重复习s

weixin_43750236
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
我的CSS学习笔记1
08-04
在HTML元素中，可以通过`id`和`class`属性来引用CSS选择器： - **id选择器**：使用`#`前缀，如`#para1`，用于选择具有特定id的唯一元素。id在文档中应是唯一的，不能以数字开头。 - **class选择器**：使用`.`前缀，...
前端学习之路-css笔记.docx
07-17
为了提升用户体验，开发者应尽量减少HTTP请求，压缩CSS代码，使用合适的图片格式，并优化CSS选择器的效率。 最后，照顾到不同用户的需求也是前端开发的重要方面，这包括但不限于考虑用户的语言偏好、文化习俗和货币...
css引入、css基础选择器、选择器权重
weixin_43706224的博客
05-24 147
1.复选框及复选框的提交2.选项卡的名和值3.选择器的排序方式
CSS基础选择器权重
mike_95的博客
08-16 156
CSS 基础选择器权重排名 ！important 行间样式 Id class|属性|伪类 标签|伪元素 通配符
css 基础选择器选择器权重
sunny1660的博客
09-19 461
1、主流浏览器及内核 主流浏览器 内核 IE trident FireFox Gecko Google  Chrome webkit / blink Safari  (mac自带的浏览器) webkit Opera preste               css   --&gt;   Cascading ...
css基础引入、选择器、选择器权重
sout
06-20 280
CSS引入方式CSS一共有四种引入方式（1）最简单的两种方式是直接在html标签里面引入，或者在html文件前面声明，以下是简单的代码示例&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title
html 学习记录 css基础选择器和权重
weixin_43157199的博客
11-28 269
1、radio 和 checkbox 设置默认选中的属性名为checked 值为checked &amp;amp;amp;lt;input type=&amp;amp;quot;radio&amp;amp;quot; name=&amp;amp;quot;sex&amp;amp;quot; value=&amp;amp;quot;man&amp;amp;quot; checked=&amp;amp;quot;checked&amp;a
css学习笔记
08-09
《Css 学习笔记》是一份...以上只是CSS学习笔记中的一部分内容，实际上CSS还涉及到布局（如Flexbox和Grid）、响应式设计、动画、过渡等方面。通过不断实践和探索，可以掌握更多高级技巧，创建出美观且功能丰富的网页。
CSS学习笔记 培训时候老师讲的我做的笔记
04-23
【CSS学习笔记】是我在参加专业培训时记录的详尽资料，这些笔记涵盖了从基础到进阶的各种CSS知识点，对于想要深入理解或学习CSS的人来说，具有很高的参考价值。以下是笔记中涉及的一些关键概念和技巧： 1. **CSS...
html+css笔记总结
11-06
3. **层叠原则**: 当多个样式冲突时，CSS根据优先级（权重）决定应用哪个样式，权重包括元素选择器、类选择器、ID选择器等。 4. **盒模型**: CSS的盒模型包括内容(content)、内边距(padding)、边框(border)和外边距...
几种基础的css选择器，以及他们之间的权重（优先级）
weixin_30249203的博客
12-06 222
-------------id选择器（1对1的关系，一个元素只能对应一个ID，同样的一个ID也只能对应一个元素）--------------- html： <div id="only"></div> css: #only{ 　　width:100px; 　　height:100px; 　　background-color:red; } ----------...
css的优先级权重
DreamCloud714的博客
03-03 360
css的种类 style="color:red"行内样式 #div1{color:red}id选择器 .div1{color:red}类选择器 div{color:red}标签选择器 *{color:red}通用选择器 css的优先级 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通用选择器 遇到复杂的css又该如何判断优先级 a{color: yellow...
css高级特性
kkalllove的博客
12-15 498
1.继承性 所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本的颜色和字号。例如定义主体元素body的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为其他的标记都嵌套在<body>标记的子标记。 继承性非常有用，它使设计师不必在元素的每个后代上添加相同的样式。如果设置的属性是一个可继承的属性，只需将它应用于父元素即可，如下面的代码： p,div,h1...
css
h1641797392的博客
12-15 271
1.CSS优先级 定义CSS样式时，经常出现两个或更多规则应用在同一个元素上，这时就会出现优先级的问题。 使用不同的选择器对用一个元素设置文本颜色，这时浏览器会根据选择器的优先级规则解析CSS样式。其实CSS为每一种基础选择器都分配了一个权重，其中，标记选择器具有权重1，类选择器具有权重10，id选择器具有权重100。这样id选择器就具有最大的优先级。 对于由多个基础选择器构成的复合选择器（并集选...
css中的选择器及其权重
TKOP_的博客
12-18 9901
总结复习css中的选择器部分的知识，巩固元素选择器、id选择器、类选择器、通配选择器、后代选择器、子代选择器、并集选择器、伪类选择器、结构伪类选择器和伪元素选择器的内容。并进一步明确他们的权重。.........
CSS高级特性
无区新手的博客
05-08 2249
1.继承性     所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本的颜色和字号。例如定义主体元素body的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为其他的标记都嵌套在&lt;body&gt;标记的子标记。     继承性非常有用，它使设计师不必在元素的每个后代上添加相同的样式。如果设置的属性是一个可继承的属性，只需将它应用于父元素即可，如下面的代码： ...
CSS基础之CSS选择器及CSS权重
Song_dui_dui的博客
12-13 768
CSS的权重分配： /*取值： 2556进制*/ !important: Infinity; 行间样式： 1000; id选择器： 100; class选择器|属性选择器|伪类: 10; 标签选择器|伪元素: 1; 通配符： 0 ...
css选择器权重排序_几种基础的css选择器，以及他们之间的权重（优先级）
weixin_39866646的博客
12-22 417
-------------id选择器(1对1的关系，一个元素只能对应一个ID，同样的一个ID也只能对应一个元素)---------------html：css:#only{width:100px;height:100px;background-color:red;}-------------class选择器(多对多的关系，一个元素可以有多个class，同样一个class能够让多个元素使用)----...
使用css做一个旋转的八卦图
最新发布
weixin_40923558的博客
07-02 348
【代码】使用css做一个旋转的八卦图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值