CSS选择器

最新推荐文章于 2024-11-10 11:49:10 发布

蛋炒饭加俩蛋

最新推荐文章于 2024-11-10 11:49:10 发布

阅读量105

点赞数

分类专栏：前端基础知识文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_52701795/article/details/132484526

版权

前端基础知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

元素选择器

通配选择器 (*)

**语法： * { 属性:属性值; } **
说明：选定所有对象

通配选择符(Universal Selector)
通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用
一般用于清除默认样式

* {
  margin: 0;
  padding: 0;
}

元素选择器(元素名称)

语法：**元素{属性:属性值;}**
**说明：**元素选择器是用来选中html中不同的标签的
如：我想选择标签修改成红色

<a href="#">a标签</a>
<style>
  a {
    color: red;
  }
</style>

修改后就会这样：如果有多个a标签的时候也会被批量选中

元素选择器可以选中所有元素 html中的声明元素也是可以被选中的

id选择器(#)

给元素添加id名然后使用#id名去选中
语法：**#id名{属性:属性值;}**

<style>
  #id {
    color: deepskyblue;
  }
</style>
<p id="id"></p>
<div id="id_1"></div>

一个id只能属于一个元素
id和类的关系可以理解为一个是身份证上的身份证号(id)，一个是身份证上的姓名(类)

类选择器(.)

语法： .类名{ 属性:属性值;}
**说明：**给元素添加类属性然后使用.类名去选中

类选择符(Class Selector)
不同于ID选择符的唯一性，类选择符可以同时定义多个，如：

<style>
  .a {
    color: #f00;
  }
  .b {
    font-weight: 700;
  }
</style>
<div class="a b">给某个div元素定义.a和.b两个类</div>
<!-- 注意，id选择符不能在同个元素上定义多个，比如id="a b"就是错误的写法类选择符高级用法：多类选择符.a.b {color: #f00;} -->
<!-- 此例命中同时拥有.a和.b两个类的元素。需要注意的是IE6并不支持多类选择符，如：.a.b{}将会被视为：.b{} -->

<!-- 同一个元素可以有多个类名   多个元素的类名也可以是一样的 -->
<style>
  .class{
    color: coral;
  }
</style>
<p class="class">他是class</p>
<div class="class"> 他也是class</div>

关系选择器

后代(包含)选择器(空格)

语法：父元素子元素{属性:属性值;}
说明：选择所有被父元素包含的子元素。

与子选择符(E>F) 不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子…
可以选中任何包含在内的元素(子孙后代都可以被选中)

<style>
	/* 包含选择符(E F) */
/*   父元素  也可以使用类名 */
	.demo div { border:1px solid #f00; }
	/* 子选择符(E>F) */
	.demo > div { border:1px solid #f00; }
</style>
<div class="demo">
	<div>0
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
</div>
<!-- 此例，如果是包含选择符，那么 0, 1, 2, 3 都有边框；如果是子选择符，那么只有 0 有边框，即只有子元素会被命中； -->

子元素选择器(>)

语法：父元素 > 子元素{属性:属性值;}
说明：只能选中父元素下面的直接的元素，可以理解只能选中"亲儿子"，孙子啥的不能直接选中，如果选中需要通过他的"爸爸"去选中

<style>
  div>ol>li>ul{
    color: blue;
  }
</style>
<div>
  <ol>
    <li>公司介绍</li>
    <li>公司地址
      <ul>
        <li>北京</li>
        <li>上海</li>
        <li>杭州</li>
      </ul>
    </li>
    <li>产品介绍</li>
    <li>问题反馈</li>
  </ol>
</div>

相邻选择器(+)

语法： 相邻元素 + 相邻元素 { 属性:属性值; }

<style>
	/* 相邻选择符(E+F) */
	h3 + p { color: #f00; }
	/* 兄弟选择符(E~F) */
	h3 ~ p { color: #f00; }
</style>
<h3>这是一个标题</h3>
<p>p1</p>
<p>p2</p>

兄弟选择器(~)

语法： 相邻元素A ~ 相邻元素B { 属性:属性值; }
说明：
选择相邻元素A(后面简称A)后面的所有相邻元素B(后面简称B)，A与B必须同属一个父级。

需要注意的是，选择的只是同级的元素，后代中的元素F不会被选择。
只选择A之后的B，出现在A之前的B，不会被选择到。
与相邻选择符(A+B) 不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素

<style>
  h3 ~ p { color: #f00; }
</style>
<h3>这是一个标题</h3>
<p>p1</p>
<div>
  <p>p2</p>
  <p>p3</p>
</div>
<!-- 这个例子中，只有 p1 会被选中；p2/p3 由于与 h3 并不是同级，所以不会被选中； -->

属性选择器(元素[属性=“属性值”])

利用元素中带有的属性来进行选择

		<style>
			a[title]{
				color: wheat;
			}
		</style>
		<a href="#" title="这是百度的链接">百度</a>
		<a href="#" title="这是新浪的链接">新浪</a>
		<a href="#">搜狐</a>
		<a href="#">网易</a>
		<a href="#">土豆</a>
		<input type="text">

选取标签带有某些特殊属性的选择器我们成为属性选择器

选择器	含义
E[attr]****	存在attr属性即可
E[attr=van]****	属性值完全等于val
E[attr=val]***	属性值里包含val字符并且在“任意”位置
E[attr^=val]****	属性值里包含val字符并且在“开始”位置
E[attr$=val]****	属性值里包含val字符并且在“结束”位置 att

<style>
  /* div[class=font12]{
  color: forestgreen;
  } */
  div[class*=font]{
    color: forestgreen;
  }
  div[class^=font]{
    color: powderblue;
  }
  div[class$=header]{
    color: chocolate;
  }
</style>
<div class="font12">属性选择器</div>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="24font">属性选择器</div>
<div class="sub-footer">属性选择器</div>
<div class="jd-footer">属性选择器</div>
<div class="news-tao-nav">属性选择器</div>
<div class="news-tao-header">属性选择器</div>
<div class="-tao-header">属性选择器</div>

伪类选择器(:元素伪元素)

伪类选择器这个的伪更多的时候指的是一种状态
之所以被称为伪元素，是因为他们不是真正的页面元南，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的CSS样式，表面上看上去貌似是页面的某些元素来展现，实际上是CSS样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查

链接(a)伪类选择器(a:状态)

语法：元素:状态{属性:属性值;}

如：a标签会有多中状态

选择器	含义
link	默认状态，未被点击过
visited	被访问过状态
hover	鼠标悬停的状态
active	鼠标长按状态

注意写的时候，他们的顺序尽量不要颠倒按照 vha 的顺序。 love hate 爱上了厌记忆法或者 l v 包包非常 hao
具体可以看下这个文档：a标签的伪类选择器 - 灰信网（软件开发博客聚合）

<style>
  /* link 默认 */
  a:link{
    color: red;
  }
  /* valid点击过 */
  a:valid{
    color: green;
  }
  /* hover  鼠标悬停*/
  a:hover{
    color: gray;
  }
  /* active  鼠标长按状态*/
  a:active{
    color: yellow;
  }
</style>
<a href="#">a标签</a>

结构(位置)伪类选择器(元素:位置)

n 可以是数字、关键词或公式
:first-of-type：https://blog.csdn.net/m0_53016870/article/details/123736754

选择器	含义
:first-child	选择某个元素的第一个子元素
:last-child	选择某个元素的最后一个子元素;
:nth-child(n)	选择某个元素的一个或多个特定的子元素
;:nth-last-child(n)	选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算;
:nth-of-type(n)	选择指定的元素;
:nth-last-of-type(n)	选择指定的元素，从元素的最后一个开始计算;
:first-of-type	选择一个上级元素下的第一个同类子元素;
:last-of-type	选择一个上级元素的最后一个同类子元素
:only-child	选择的元素是它的父元素的唯一一个子元素;
:only-of-type	选择一个元素是它的上级元素的唯一一个相同类型的子元素;
:empty	选择的元素里面没有任何内容

<style>
  li{
    font-size: 32px;
    color: darkgray;
  }
  li:last-child{
    /* nth-last-child 从最后一个孩子开始数倒数 */
    color: coral;
  }
  li:nth-last-child(3){
    /*          */
    color: cadetblue;
  }
  li:nth-child(even){
    /* nth-child(even)  可以选择所有的偶数;*/
    color: pink;
  }
  li:nth-child(odd){
    /* nth-child(odd) 可以选择所有的奇数 */
    color: blueviolet;
  }
  /* 因为我们css 是从上至下运行的  所以如果样式有冲突的时候会执行下面的*/
  li:nth-child(3n){
    /* nth-child(3n) 公式n从0 开始 0 1 2 3 4 5   2n就是0 2 4 6  3n就是  3 6 9 */
    color: chocolate;
  }
</style>
<ul>
  <li>这是第一个</li>
  <li>这是第二个</li>
  <li>这是第三个</li>
  <li>这是第四个</li>
  <li>这是第五个</li>
  <li>这是第六个</li>
  <li>这是第七个</li>
</ul>

目标伪类选择器(:taret)

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

这个平时用的应该不多
参考文章：伪元素:target - 狗尾草的博客 - 博客园

#demo:target{color:#f00;}

<div id="demo">
	<p>E:target伪类使用方法</p>
</div>

元素状态选择器

<style>
			input:enabled{
				background-color: aqua;
			}
			input:disabled{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<input type="text"><br>
		<input type="text" disabled>
		<!-- disabled 不可填 --><br>
	</body>

伪对象选择器

插入伪元素

选择器	含义
:before	在某元素之前插入某些内容
;after	在某元素之后插入某些内容

注意

伪元素:before和;after深加的内容默认是lnline元素**;这个两个元素的content 属性，表示元素的内容,设置:before和;after时必须设置其 content 属性，否则伪元素就不起作用。
伪元素是不占位置的,所以通常我们可以这个来清除浮动
伪元素选择器本质上是插入一个元素(标签盒子) 只不过是行内元素 span a
这个元素我们是看不到的（可以暂时的理解拥有盒子的属性但是不是应该元素）

div::after {
  /*  before 和 after 在盒子div 的内部前面插入或者是内部后面插入 */
  content: "我";
}

div::before {
  content: "18";
}

伪元素选择器(元素::状态)

选择元素的某种状态
语法元素::状态{属性:属性值;}

选择器	选择器
E::first-letter	文本的第一个单词或字(如中文、日文、韩文等)
E::first-line;	文本第一行
E::selettion	可改变选中文本的样式;

p::first-letter {
/*   选择第一个字 */
  font-size: 20px;
  color: hotpink;
}

/*首行特殊样式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px;*/
  color: orange;
}

复合选择器

交集选择器

语法：选择器1选择器2{css样式}
作用：选中页面中同时满足过个选择器的标签紧挨着的
结果：找到标签中既能被选择器1又能被选择器2选中的标签，设置样式
注意：之间没有任何东西隔开，紧挨着的
交集选择器中如果有标签选择器，标签选择器必须放在前面

<style>
    p.one{
        color: red;
    }
</style>
<body>
    <p class="one">
        这个元素会被应用样式
    </p>
    <div>
        这个元素不会被应用样式
    </div>
</body>

交集选择器

不同元素的类名一样的时候，想要区别不同元素下面的类
语法：元素.类名{属性:属性值;}

<style>
  p.text{
    color: aqua;
  }
</style>
<p class="text">123</p>
<p>123</p>
<p>123</p>
<div class="text">789</div>
<div>789</div>
<div>789</div>

运行结果：只有p标签下面的.text 这个类会被选中

并集选择器

语法：选择器1,选择器2{css样式}
并集选择器：同时选择多组标签，设置相同的样式
结果：找到选择器1和选择器2选中的标签，设置样式
注意：选择器与选择器之间用,隔开
可以是基础选择器或者复合选择器
每组选择器通常一行写一个，提高代码的可读性

<style>
    p,div{
        color: red;
    }
</style>
<body>
    <p>
        这个元素会被应用样式
    </p>
    <div>
        这个元素也会被应用样式
    </div>
</body>

并集选择器(元素,元素)

可以理解为将多个相同熟悉连接在一起
语法：元素,元素,.类名,#id{属性:属性值;} （格式就是用逗号隔开就好了）

		<style>
			.text,span,div{
				color: aqua;
			}
		</style>
		<p class="text">123</p>
		<span>456</span>
		<div>789</div>

运行结果：他们三个都会被选中

选择器的权重

基础选择器:
通配符选择器(*)
标签选择器
class选择器
id选择器
选择器优先级:

选择器的优先级与权值有关
权值
- 基础选择器的权值: 通配符选择器 () 、标签选择器(1)、class选择器(10)、id选择器 (100)
- 选择器权值越大优先级别越高
选择器权值相同，后写的会覆盖先写的内容

蛋炒饭加俩蛋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS选择器

元素选择器

通配选择器 (*)

元素选择器(元素名称)

id选择器(#)

类选择器(.)

关系选择器

后代(包含)选择器(空格)

子元素选择器(>)

相邻选择器(+)

兄弟选择器(~)

属性选择器(元素[属性=“属性值”])

伪类选择器(:元素伪元素)

链接(a)伪类选择器(a:状态)

结构(位置)伪类选择器(元素:位置)

目标伪类选择器(:taret)

元素状态选择器

伪对象选择器

插入伪元素

伪元素选择器(元素::状态)

复合选择器

交集选择器

交集选择器

并集选择器

并集选择器(元素,元素)

选择器的 权重

选择器的权重