选择器selector

chonger_feifei

已于 2022-03-09 15:43:44 修改

阅读量582

点赞数

分类专栏： CSS 文章标签： css

于 2022-03-08 22:33:08 首次发布

本文链接：https://blog.csdn.net/chonger_feifei/article/details/123364741

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS2.1选择器

标签选择器

也称元素选择器、类型选择器
直接使用元素的标签名当做选择器，选择页面上所有该标签

/* 选择所有span */
span{
color:red; 
}
/* 选择所有b */
b{
color:green;
}

无论所处元素的深浅，都能选到

<!-- p里面的span也会被选择 -->
   <p>我们一定<span>不负韶华，只争朝夕</span></p>
   <ul>
       <1i>小明</1i>
       <1i>小红</1i>
       <!-- li里面的span也会被选择 -->
       <1i><span>小强</span></1i>
       </u1>

“覆盖面”大，故通常用于标签的初始化

ul{
/*去掉无序列表的小圆点*/
list-style:none;
}
a{
/*去掉超级链接的下划线*/
text-decoration:none;
}

id选择器

#前缀
/选择id为para1的标签/

#para1{
    color:red;
}

class选择器

点前缀

/*选择class为warning的标签*/
.warning{
     color:red;   
}

多个标签可以相同类名
一个标签可以多个类名，类名用空格隔开

原子类
在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类

.fs12{
font-size:12px;
}
.fs14{
font-size:14px;
}
.fs16{
font-size:16px;
}
.color-red{
color:red;
}
.color-blue{
color:blue;
}
.color-green{
color:green;
}

“则需选择”类名，快速添加样式

<p class="fs18 color-green">我是一个文字</p>

复合选择器

选择器名称	示例	意义
后代选择器	.box .spec	选择类名为box的标签内部的类名为spec的标签
交集选择器	li.spec	选择既是li标签，也属于spec类的标签
并集选择器	ul,ol	选择所有ul和ol标签

后代选择器

“后代”不一定是“儿子"

/*选择类名为box标签后代的p标签*/
 .box p {
            color: red；
        }
 <div class="box">
     <u1>
         <li>
/*将被选择*/
             <p>我是盒子中的段落</p>
         </li>
    </u1>
 </div>

很多空格，隔开好几代

.box ul li .spec em {
    color: red;
}
<div class="box">
    <ul>
        <1i>
            <p class="spec">我是段落<em>强调文字</em></p>
        </1i>
    </ul>
</div>

交集选择器

例如：选择有.spec类的h3标签

 h3.spec {
     font-style: italic;
 }

并集选择器

也叫分组选择器
逗号表示分组

/*同时选择ul标签和ol标签*/
 ul,
 ol {
     list-style: none;
 }

综合使用

选择器可以任何搭配、结合，从而形成复合选择器，我们必须要能一目了然的看出选择器代表的含义

div.box li p.spec em {
     color: red;
}
<div class="box">
    <ul>
        <li>
            <p>我是段落</p>
        </li>
        <li>
            <p class="spec">我是段落<em>强调文字</em></p>
        </li>
    </ul>
</div>

伪类

添加到选择器的描述性词语
指定要选择的元素的特殊状态，超级链接有4个特殊状态
4个特殊状态

伪类	意义
a:link	没有被访问的超级链接
a:visited	已经被访问过的超级链接
a:hover	正被鼠标悬停的超级链接
a:active	正被激活的超级链接（按下按键但是还没有松开按键）

有顺序-爱恨准则LOVE HATE
：link→：visited→：hover→：active

CSS3新增选择器

关系选择器

名称	举例	意义
子选择器	div>p	div的子标签p
相邻兄弟选择器	img+p	图片后面紧跟着的段落
通用兄弟选择器	p~span	p之后的所有同层级span

子选择器>

儿子

.box>p {
            color: #000;
        }

后代选择器，包括儿子孙子等多代

.box p {
    color: #000;
}

相邻兄弟选择器+

当第二个元素紧跟在第一个元素之后
且两个元素都是属于同一个父元素的子元素
则第二个元素将被选中

 img+span {
     color: #000;
 }
 <p>
      <img src="images/0.jpg" alt="">
/*将被选择*/
      <span>这是北京故宫</span>
      <span>这是北京故宫</span>
 </p>

通用兄弟选择器~

a~b
选择a元素之后所有同层级b元素；
从IE7开始兼容

h3~span {
    color: #000;
}
<span>我是后面的span</span>
<h3>我是一个三级标题</h3>
<span>我是后面的span</span>/*将被选择*/
<span>我是后面的span</span>/*将被选择*/
<p>我是一个段落</p>
<span>我是后面的span</span>/*将被选择*/
<div>
    <span>多了一个级别span</span>
    <span>多了一个级别span</span>
</div>

序号选择器

举例	意义	兼容性
:first-child	第一个子元素	IE7
:last-child	最后一个子元素	IE9
:nth-child(3)	第3个子元素	IE9
:nth-of-type(3)	第3个某类型子元素	IE9
:nth-last-child(3)	倒数第3个子元素	IE9
:nth-last-of-type(3)	倒数第3个某类型子元素	IE9

nth-child（）
可写成an+b的形式，不能写b+an

 .box p:nth-child(3n+2) {
            color: green;
        }
    <div class="box2">
        <p>1</p>
        <p>2</p>/*将被选择*/
        <p>3</p>
        <p>4</p>
        <p>5</p>/*将被选择*/
        <p>6</p>
        <p>7</p>
        <p>8</p>/*将被选择*/
    </div>

2n+1等价于odd，表示奇数
2n等价于even，表示偶数

nth-child()和nth-of-type()

情况一：第三个子元素是h3不是p，选择器失效，无法选择

.box p:nth-child(3) {
            color: green;
        }
 <div class="box4">
     <p>我是1号p</p>
     <p>我是2号p</p>
     <h3>我是1号h3</h3>
     <h3>我是2号h3</h3>
     <p>我是3号p</p>/*不会被选择*/
     <p>我是4号p</p>
     <h3>我是3号h3</h3>
     <h3>我是4号h3</h3>
 </div>

情况二：nth-of-type（）选择同种标签指定序号的子元素

.box p: nth-of-type (3) {
            color: green;
        }
 <div class="box4">
     <p>我是1号p</p>
     <p>我是2号p</p>
     <h3>我是1号h3</h3>
     <h3>我是2号h3</h3>
     <p>我是3号p</p>/*将被选择*/
     <p>我是4号p</p>
     <h3>我是3号h3</h3>
     <h3>我是4号h3</h3>
 </div>

属性选择器

举例	意义
[alt]	有这个属性匹配
[alt=“北京故宫"]	精确匹配
[alt ^=“abc”]	开头匹配
[alt $=“abc"]	结尾匹配
[alt*=“abc"]	任意位置匹配
[alt	=“abc”]
[alt～=“abc”]	有abc为空格分开的独立部分匹配

伪类

伪类	意义
:empty	选择空标签(注：空格、换行都不属于空标签)
:focus	选择当前获得焦点的表单元素
:enabled	选择当前有效的表单元素
:disabled	选择当前无效的表单元素（无法选中的）
:checked	选择当前已经勾选的单选按钮或者复选框
:root	选择根元素，即`<html>`标签

伪元素

表示虚拟动态创建的元素
IE8可以兼容单冒号

伪类	单冒号	用于需要兼容 IE 浏览器
伪元素	双冒号	用于不需要兼容 IE 浏览器

对于CSS2已有的伪类，单冒号
对CSS3新增伪类，建议双冒号
在这里插入图片描述

::before、::after

::before匹配选中的元素的第一个子元素
必须设置content属性表示其中的内容

 a::before {
     content: '*';
 }

在这里插入图片描述

::after匹配选中的元素的最后一个子元素
必须设置content属性表示其中的内容

a::after {
    content: '&';
}

在这里插入图片描述

清除浮动

.clearfix:after {
	content:"."; 
	display:block; 
	height:0; 
	visibility:hidden; 
	clear:both; 
}
.clearfix { *zoom:1; }

雪碧图sprites

雪碧图通过将多个图片 icon 合为一张图，减少 http 请求
但是在制作雪碧图的过程中，或者现在很多的打包工具自动生成的雪碧图，都存在着需要为每个 icon 需要预留多少边距的问题。看看下图：

譬如上面这种情况（假设按钮中的图标是采用了雪碧图），产品某天突然要求按钮从状态左变为状态右，那么雪碧图原先预留的位置边距肯定就不够了，导致其他图形出现在按钮中。
而我们通常不会为了一个小 icon 多添加一个标签（不符合语义化）。
所以通常这种情况需要用到雪碧图的话，都是在按钮中设置一个伪元素，将伪元素的高宽设置为原本 icon 的大小，再利用绝对定位定位到需要的地方，这样无论雪碧图每个 icon 的边距是多少，都能够完美适应。

作为列表序号

问题：
1,2,3的序号
用span/图片，需要定位
用伪元素，删减后其他的列表序号会自动改变

ul{
       width:1000px;
       margin: 0 auto;
       counter-reset:li;
   }
   li{
       list-style: none;
   }

   ul>li{
       margin-top: 10px;
   }
ul>li:before{        
content: counter(li);
       counter-increment:li;
       padding: 0 5px;
       color: #fff;
       margin-right: 10px;
}

超链接特效

举例：配合 CSS定位实现一个鼠标移上去，超链接出现方括号的效果

<style>
	a {
	    position: relative;
	    display: inline-block;
	    outline: none;
	    color: #fff;
	    text-decoration: none;
	    font-size: 32px;
	padding: 5px 20px;
	}
	a:hover::before, a:hover::after { position: absolute; }
	a:hover::before { content: "\5B"; left: -10px; }
	a:hover::after { content: "\5D"; right:  -10px; }
</style>
<a>鼠标移上去出现方括号</a>

制作图案

例：搜索的放大镜，叉叉，箭头等
请欣赏：http://chokcoco.github.io/magicCss/html/index.html

扩大可点区域

当主元素无法扩大自身的时

&:before {
    content: "";
    display: block;
    position: absolute;
    width: 40px；
    left: 50%;
    margin-left: -20px;
    top: 0;
    height: 50px;    //任意值
}

替代`<br>`实现换行

行级元素则不会自动换行,但项目有需求
<br>实现换行，不仅在可维护性方面是一种糟糕的实践，而且污染了结构层的代码————《CSS SECRET》

.inline-element::after{
    content: "A";
    white-space: pre;
}

Unicode 中，0x000A 是门代表换行符
CSS 中，简化为 “A”。
content: “A”;在元素末尾添加了一个换行符
white-space: pre; 保留元素后面的空白符和换行符

::selection

应用于文档中被用户高亮的部分（使用鼠标圈选的部分）

::first-letter 和::first-line

::first-letter会选中某元素中（必须是块级元素）第一行的第一个字母
::first-line会选中某元素中（必须是块级元素）第一行全部文字

层叠性和选择器权重

层叠性

多个选择器同时作用于一个标签，效果叠加

<p id="para" class="spec">我是段落</p>
p {
    color: red;
}
.spec {
    font-style: italic;
}
#para {
    text-decoration: underline;
}

层叠性冲突处理规则

id权重>class权重>标签权重

选择器权重计算

通过（id的个数，class的个数，标签的个数）的形式

/* 对应id,class,标签的个数（2，0，1） */
  #box1 #box2 p {
      color: red;
  }
  /* （2，1，2） */
  #box1 div.box2 #box3 p {
      color: green;
  }
  /* （0，3，1） */
  .box1 .box2 .box3 p {
      color: blue;
  }

解析：
1）id权重最大，先分析id的个数，复杂选择器1=复杂选择器2>复杂选择器3，复杂选择器3权重最小；
2）分析class的个数，复杂选择器1<复杂选择器2，故复杂选择器2权重最大，color以green为准

！important提升权重

.spec {
    color: blue！important；
}

一般不允许使用，会带来不经意的样式冲突