CSS选择器及其优先级

news/2023/12/1 11:56:30

基本选择器

标签选择器

标签选择器又叫元素选择器,换句话说,文档的元素就是最基本的选择器,使用元素名称直接选择元素即可(如body,p,ul,ol,dl)。

类选择器

类选择以点"."开头,后面紧跟一个类名。类名不允许有空格,与元素中class属性的值保持一致。一个元素可以有多个class的值,每个值通过空格分割开。类名相同的元素属于一类元素。

 <style>
       .first{font-size:14px;}
       .done{font-weight:bold;text-decoration:line-through;}
    </style>
    <ul>
       <li class="first done">Creat an HTML document</li>
       <li class="second done">Creat a CSS style sheet</li>
       <li class="third done">Link them all together</li>
    </ul>

ID选择器

ID选择器以"#"开头,后面紧跟一个ID名,在一个文档中,ID值不能重复,因此在选择文档中唯一元素的时候该选择器比较有用。

 <style>            
    #polite {font-family: cursive;}            
    #rude {
            font-family: monospace;      
            text-transform: uppercase;
           }
 </style>
 <p id="polite"> — "Good morning."</p>        
 <p id="rude"> — "Go away!"</p>

普遍选择器

使用"*"来表示普遍选择器,表示选择所有元素,通常用在组合选择器中。

 <style>            
    .left-nav > * { 
                    width:200px; 
                    background-color:#fafafa
                   }
</style>
<article class="left-nav">
    <dl>                
        <dt>推荐</dt>                
            <dd class="current"><i class="icon-music"></i>发现音乐</dd>        
    </dl>            
    <dl>                
        <dt>我的音乐</dt>                                
            <dd><i class="icon-cloud-download"></i>下载的音</dd>            
    </dl>
</article>

多选择器

多个选择器并列使用,使用“,”分割
例如:"div,.one,#tt" 表示选择div元素,class为one的元素以及id为tt的元素。

层次选择器

后代选择器

使用 “ ” 隔开两个选择器。例如 "ul li"表示选择ul的后代元素li,li可以为ul的直接子元素,也可以为ul的孙子元素。

子代选择器

使用 “>” 隔开两个选择器。例如 "ul>li"表示选择ul的直接子代元素li,ul的孙子元素li无法被选择到

相邻同胞元素

使用 “+” 隔开两个选择器。例如 ".one+*"表示选择class为"one"元素的下一个兄弟元素。

一般同胞选择器

使用 “~” 隔开两个选择器。例如 ".one~*"表示选择class为"one"元素的所有兄弟元素。

属性选择器(配合基本选择器进行筛选)

  1. [attr] 选择具有attr属性的元素、无论该属性的值为什么
  2. [attr=val] 选择具有attr属性的、并且attr的值为val元素
  3. [attr~=val] 选择具有attr属性的、并且attr的值之一为val的元素
  4. [attr^=val] 选择具有attr属性的、并且attr的值以val开头的元素
  5. [attr$=val] 选择具有attr属性的、并且attr的值以val结尾的元素
  6. [attr*=val] 选择具有attr属性的、并且attr的值包含val的元素

伪类选择器

伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中(配合基本选择器进行筛选)

子元素:

:only-child
:first-child
:last-child
:nth-child(n) 、: nth-last-child(n)
:first-of-type、:last-of-type
:nth-of-type(n)、:nth-last-of-type(n)
......
n可以为元素的序号,也可以为特殊的字符,比如“odd”,“even

元素状态相关

:hover
:active
:focus
......

伪元素选择器

伪元素以"::"开头,用在选择器后,用于选择指定的元素。
::after
::before
::first-letter
::first-line
::selection

......

选择器优先级

在所有的选择器中某个选择器定义的规则是否能够胜出(即优先级)取决于三个元素:Importance,特性值,代码顺序。

!important声明(Importance)

在css规则的值末尾添加"!important"能够保证该规则优先其他规则。但是一般建议不使用"!important",因为它会改变级联的工作方式,使得调试变得困难。

特性值

通过4个特性值来量化一个选择器

  • 声明在元素的style属性中。特性值记为1000
  • 包含在一个选择器中的所有ID选择器。特性值记为100
  • 包含在一个选择器中的所有类选择器,属性选择器,伪类选择器。属性值记为10
  • 包含在一个选择器中的所有元素选择器,伪元素选择器.属性值记为1

代码顺序

如果多个竞争选择器具有相同的重要性和特性值,代码顺序就发挥作用了,后来规则优先前面规则。


http://www.niftyadmin.cn/n/1935318.html

相关文章

从零单排学Redis【铂金一】

前言 只有光头才能变强 好的&#xff0c;今天我们要上铂金段位了&#xff0c;如果还没经历过青铜和白银和黄金阶段的&#xff0c;可以先去蹭蹭经验再回来&#xff1a; 从零单排学Redis【青铜】从零单排学Redis【白银】从零单排学Redis【黄金】这篇文章主要讲的是Redis主从复制。…

TurtleBot3-基础例程

使用Interactive Markers移动&#xff1a; 可以通过RViz上的Interactive Markers移动TurtleBot3。 您可以使用Interactive Markers将TurtleBot3旋转或者线性移动。[Remote PC]打开一个新终端并启动远程文件。  提示&#xff1a;在执行此命令之前&#xff0c;您必须指定Turtle…

excel-LOOKUP函数多条件查找

zstarling语法&#xff1a; LOOKUP&#xff08;查找值&#xff0c;查找区域&#xff0c;结果区域&#xff09;举例&#xff1a; LOOKUP(1,0/((\$A$2:\$A\$9E2)*(\$B\$2:\$B\$9F2)),\$C\$2:\$C$9)语法&#xff1a; VLOOKUP&#xff08;查找值&#xff0c;查找区域&#xff0c;结…

JZOJ5771 遨游

Description MWH寒假外出旅游&#xff0c;来到了S国。S国划分为N个省&#xff0c;第i个省有Ti座城市&#xff0c;编号分别为Ci1&#xff0c;Ci2&#xff0c;……CiTi&#xff08;各省城市编号不会重复&#xff09;。所有城市间有M条双向的道路连接&#xff0c;从任意一个城市出…

机器学习日记

转载于:https://www.cnblogs.com/smallpigger/p/8646738.html

通用mapper接口已经写好的 根据 list 集合查询 相应数据

package tk.mybatis.mapper.additional.idlist;import org.apache.ibatis.annotations.Param; import org.apache.ibatis.annotations.SelectProvider;import java.util.List;/*** 通用Mapper接口,根据ids查询** param <T> 不能为空* author liuzh*/ tk.mybatis.mapper.a…

SPSS-线性回归

线性回归的因变量是连续数值型变量。 回归的分类见113985634 R方—变量之间是否有相关性 【模型汇总表】中R表示拟合优度&#xff0c;值越接近1表示模型越好&#xff08;但不能说他们之间不相关&#xff0c;可能是非线性相关&#xff09;&#xff0c;一元线性回归里&#xff0c…

c#form界面情况下显示console窗体

使用console.write()前后加上AllocConsole()和FreeConsole()方法。 注意&#xff1a;如果在使用之前有console输出&#xff08;不带有这两个方法&#xff09;&#xff0c;则会无效。 这两个方法&#xff1a; [DllImport("kernel32.dll")] public static extern Boole…

day26 Pyhton 面向对象复习

一 class 类名(): pass 对象 object 对象 类名() class Person:pass print(Person)#<class __main__.Person> alex Person() yuan Person() print(alex)#<__main__.Person object at 0x00000000029757B8> print(yuan)#<__main__.Person object at 0x00000000…

SPSS缺失值处理

均值替换法&#xff1a; 适用于连续数据&#xff08;定量数据&#xff09;&#xff0c;缺失数据占比不超过10%。 可直接生成新的数据列 中位数替换 适用于等级变量 例如满意度。&#xff08;定性变量先要在变量试图中数值代替&#xff09; 需要手动输入&#xff08;根据…

前端兼容疑难杂症

为什么80%的码农都做不了架构师&#xff1f;>>> http://www.w3school.com.cn/cssref/pr_word-wrap.asp word-wrap:break-word; ---------------------------------------- 对于div 1、&#xff08;IE浏览器&#xff09; white-space:normal; word-break:break-all;…

获取所有子控件

这里父控件是QGroupBox,子控件是QLineEdit QList<QLineEdit*> list ui.groupBox_11->findChildren<QLineEdit*>(); for (int i 0; i < list.size(); i) { QLineEdit* le list.at(i); le->setText(QString::number(i)); } 转载于:https://www.cnblogs.c…

图片转换

有一些三方多图 返回的图片 格式 NSArray<UIImage *> *photos 而我们自己图片上传服务器是要转换一下 转成 NSArray< NSData *> *photos NSMutableArray *dataArry [NSMutableArray array]; for (int i 0; i < imgArray.count; i) { UIImage * image imgArr…

SPSS -正态检验

1. 检验方法1&#xff1a;KS检验&#xff08;数值检验&#xff09; 原假设是服从指定分布。 如果P值>0.05&#xff0c;说明结果更倾向于接受原假&#xff0c;即服从指定分布。具体参见https://editor.csdn.net/md/?articleId109822028 根据P值判断是否服从正态分布&…

setTimeoutPromiseAsync之间的爱恨情仇

setTimeout 一、setTimeout 初现 定义&#xff1a;setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 复制代码 语法&#xff1a; setTimeout(code, milliseconds, param1, param2, ...)setTimeout(function, milliseconds, param1, param2, ...) 复制代码参数描述…

机器学习索引贴(未分类)

1.Tensorflow一些常用基本概念与函数&#xff08;1&#xff09;转载于:https://www.cnblogs.com/chihaoyuIsnotHere/p/9481237.html
最新文章