CSS选择器,你真的都了解吗?

2020-04-1420:56:19网页制作Comments1,578 views字数 3948阅读模式

ID选择器

#id名来表示, id是唯一的,同一个页面里不允许多个ID相同的元素。一般只用来强调某个页面或者某个模块,多个功能相同的模块建议使用类选择器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18135.html

<div id="box"> 我是box </div>

<!--css-->
#box{
    color: #fff;
    background: #000;
}
复制代码

类选择器

.加上class名称来表示,下面以class 名称为 item 的元素为例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18135.html

<ul>
    <li class="item"> a </li>
    <li class="item"> b </li>
    <li class="item"> c </li>
    <li class="item"> d </li>
</ul>

<!--css-->
.item {
  margin: 0;
  padding: 0;
}
复制代码

标签选择器

直接标签名作为选择器的名称,如果使用标签选择器,那么该页面所有使用该标签的元素样式都会改变,一般不建议使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18135.html

<p> hello world </p>
<p> 你好呀~ </p>

<!--css-->
p {
    color: red;
}
复制代码

属性选择器

  • [attr]表示选择所有带有attr属性的标签
<p title="hello world"> hello world </p>
<p title="test"> 你好呀~ </p>

<!--css-->
p[title] {
  color: red;
}
复制代码
  • [attr=xxx]表示用来选择有attr属性且属性值等于xxx的元素,注意属性值必须完全相等
<input class="input text" type="text" value="hello world"/>

<!--css-->
input[type=text] {
  color: red;
}
// or
input[class="input text"]{
  color: red;
}
复制代码
  • [attr~=xxx] 表示包含某个类的元素,多个类中的其中一个类名必须和xxx相等
<input class="input text" type="text" value="hello world"/>

<!--css-->
input[class~=input] {
  color: red;
}
复制代码
  • [attr|=xxx] 表示选择属性值为xxx(这里必须是相等的)或者 以xxx-属性开头的元素
<div class="box"> box <div>
<div class="box-sm"> box <div>

<!--这里的div不会生效, 这里必须是 box- 开头-->
<div class="box_lg"> box <div>
<!--css-->
div[class|=box] {
  color: red;
}
复制代码
  • [attr^=xxx]表示选择以xxx属性开头的元素
<div class="box"> box <div>
<div class="box-sm"> box <div>
<div class="box_lg"> box <div>
<!--css-->
div[class^=box] {
  color: red;
}
复制代码
  • [attr$=xxx]表示选择以xxx属性结尾的元素
<div class="box"> box <div>
<div class="box red blue"> box <div>
<div class="box _red"> box <div>
<!--css -->
<!--这里以red结尾的样式类必须写在最后,否则有可能会被后面的样式覆盖-->
div[class$=red] {
  color: red;
}
复制代码
  • [attr*=xxx]表示选择属性值中包含xxx的所有元素
<div class="box-sm"> box <div>
<div class="box sm blue"> box <div>
<div class="box _sm"> box <div>
<!--css -->
div[class*=sm]{
  color: red;
}
复制代码

通配符选择器

通配符顾名思义,就是所有标签全部适用,把样式应用到所有元素上影响浏览器渲染效率,实际开发中不建议使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18135.html

 * {
   margin: 0;
   padding: 0;
 }
复制代码

后代选择器

又称派生选择器,派生选择器为css2的说法。 以seletorA空格selectorB形式,表示在selectorA内部向下查找所有所有符合selectorB的元素,无论层级有多深依然会被作用。举个栗子:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18135.html

<div class="box">
    <p> 段落 </p>
    <div class="outer">
        <div class="inner"> 这是一段内容呀~ </div>
    <div>
</div>

<!--css-->
.box .inner {
  color: red;
}

复制代码

当然, 后代选择器可以叠加使用,如:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18135.html

.box .outer .inner {
  color: red;
}
复制代码

不过值得注意的是:CSS选择器是从右到左进行匹配的,嵌套的层级越深,css选择器查找的效率就越低,以及权重就过低可能会被其他的样式所覆盖,建议酌情使用。附css权重表:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18135.html

选择器用法权重值
!important放在属性值后, 如color: red !important;10000
内联样式style="xxx"1000
ID选择器#box100
类、伪类、属性选择器.box、:hover、div[class=box]10
标签选择器和伪元素选择器p、:before1
通配符* 子选择器> 相邻选择器+ 同胞选择器~0

子元素选择器

selectorA>selectorB的形式,表示只查找指定元素的直接子元素,层级为一层。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18135.html

<div class="box">
    <p> 段落 </p>
    <div class="outer">
        <p> 这是一段内容呀~ </p>
    <div>
</div>
<!--css-->
.box > p {
  color: red; // 这里只会作用在段落上
}
复制代码

相邻兄弟选择器

selectorA+selectorB的形式,表示选择紧接在指定元素后的元素,且二者有相同父元素。 注意他只有一个兄弟呀~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18135.html

<div class="main">
  <h1>标题</h1>
  <p>段落</p>
</div>
<!--css-->
h1 + p {
  color: red; // 段落字体变红色
}
复制代码

同胞选择器

selectorA~selectorB形式,表示选择指定元素所有符合条件的所有兄弟元素, 他可能有多个兄弟文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18135.html

<div class="main">
  <h1>标题</h1>
  <p>段落1</p>
  <p>段落2</p>
</div>
<!--css-->
<!--符合两个条件:1:h1的兄弟元素; 2:凡是p标签包裹的-->
h1 ~ p {
  color: red;  // 段落1、2字体都变红
}
复制代码

交集选择器

selectorA.selectorB形式,表示既符合选择器A又符合选择器B的元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18135.html

<ul>
  <li class="item"> btn1 </li>
  <li class="item active"> btn2 </li>
</ul>
<!--css-->
.item.active {
  color: red;  // 表示有active类的,又有item类的。
}
复制代码

并集选择器

seltorA,selectorB逗号分隔的形式,表示不同的选择器A和选择器B的元素都应用同一种样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18135.html

<div class="box1"> 段落1 </div>
<div class="box2"> 段落2 </div>
<!--css-->
.box1, .box2 {
  color: red;
}
复制代码

伪类选择器

selector:的的形式,CSS 伪类用于向某些选择器添加特殊的效果,这里只列举常见的几种:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18135.html

  • 表示状态:
选择器作用栗子
x:link未访问的链接a:link
x:visited已访问的链接a:visited
x:hover鼠标移动到链接上a:hover
x:active选定的链接a:acitve
x:focus选定元素聚焦时的样式input:focus
  • 表示结构:
选择器作用栗子
x:first-child第一个子元素为xul li:first-child
x:last-child最后一个子元素为xul li:last-child
x:nth-child(n)第n个位置的子元素x,不分元素类型ul li:nth-child(even)
x:nth-last-child(n)同上,倒数第n个位置的子元素xul li:nth-last-child(2)
x:only-child唯一子元素为xa span:only-child
x:only-of-type唯一子元素为x, 且x没有其他同类型的兄弟元素a span:only-of-type
  • 表单相关:
选择器作用栗子
x:empty空标签(有空格也不行)span:empty
x:checked勾选input的状态(值为true或false)input:checked
x:disabled表单元素是否禁用(值为true或false)input:disabled
x:required表单元素是必填项时设置指定样式input:required

伪元素选择器

CSS 伪元素用于将特殊的效果添加到某些选择器文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18135.html

选择器作用栗子
x::after在元素x的内容前面插入新内容a:after
x::before在元素x的内容后面插入新内容a:before
x::first-line为某个元素的第一行文字使用样式p:first-line
x::first-letter为某个元素中的文字的首字母或第一个字使用样式p:first-letter
x::selection给光标选中的元素x添加样式input:selection

作者:unknow
链接:https://juejin.im/post/5e86f04c51882573b7536afa
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18135.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18135.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/18135.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定