css选择器总结

选择器的作用

选择器就是选择标签用的，把我们想要的标签选择出来，选对人，做对事。

h1 {
    color:pink
}

这段代码就是把所有的h1标签选出来，然后把它们变成粉色

css基础选择器

标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

标签选择器可以把某一类标签全部选择出来，比如所有的div标签和所有的span标签。

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名

.类名 {/*注意后面有空格*/   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}

<p class='类名'></p>

类选择器可以为元素对象定义单独或相同的样式,可以选择一个或者多个标签。

id选择器

id选择器使用#进行标识，后面紧跟id名

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<p id="id名"></p>

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class，就好比人的身份证号是唯一的，名字可以多次重复使用

通配符选择器

通配符选择器用号表示，\就是选择所有的标签，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

清除HTML默认边距

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

css复合选择器

后代选择器

作用：用来选择元素或元素组的子孙后代

写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。

父级 子级{属性:属性值;属性:属性值;}

子代选择器

作用：子元素选择器只能选择作为某元素子元素(亲儿子)的元素。

这里的子指的是亲儿子，不包含孙子重孙子之类

写法就是把父级标签写在前面，子级标签写在后面，中间跟一个>进行连接

父级>子级{属性:属性值;属性:属性值;}

兄弟选择器

相邻兄弟选择器

作用：相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素

写法：元素标签写前面，相邻兄弟标签写后面，中间用+进行连接

div+p {
  background-color:yellow;
}

<div>
<h2>DIV 内部标题</h2>
<p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。</p> 这个元素背景会变成黄色
<p>DIV 之后的第二个 P 元素。</p>

后续兄弟选择器

作用：后续兄弟选择器选取所有指定元素之后的相邻兄弟元素

写法：元素标签写前面，兄弟标签写后面，中间用~进行连接

div~p
{
    background-color:yellow;
}

<p>之前段落，不会添加背景颜色。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
段落3和段落4会背景会变成黄色
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

交集选择器

作用：交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点

写法：其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.specia

p.one {} 选择的是： 类名为 .one  的 段落标签。

并集选择器

作用：某些选择器定义的相同样式，就可以利用并集选择器

写法:并集选择器是各个选择器通过,连接而成的，通常用于集体声明

.one, p , #test {color: #F00;}  
表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。

伪类选择器

链接伪类选择器

作用：用于向某些选择器添加特殊的效果。比如给链接添加特殊效果

a:link / 未访问的链接 /
a:visited / 已访问的链接 /
a:hover / 鼠标移动到链接上 /
a:active / 选定的链接 /

写的时候，他们的顺序尽量不要颠倒按照lvha的顺序。否则可能引起错误。

a {
    font-size:25px;
    color:#ccc;
}
//鼠标悬停时候a标签颜色变为粉色
a：hover {
    color:pink
}

结构伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E，与E:nth-child(1)等同
E：last-child	匹配最后一个E元素
E：nth-child(n)	匹配第n个子元素E
E:first-type	指定类型E第一个
E:last-type	指定类型E最后一个
E:nth-of-type(n)	指定类型E第n个

nth-child(n)与nth-of-type(n)的区别

就理解一句话nth-of-type是取当前元素的兄弟元素的第n个，nth-child取的是当前元素的第n个节点的当前元素

<button>:nth-child(2)</button>
<button>:nth-last-child(2)</button>
<button>:nth-of-type(2)</button>
<button>:nth-last-of-type(2)</button>

<h1>body 中的标题</h1>
<p>body 中第一个段落。</p>
<p>body 中第二个段落。</p>

<div style="border:1px solid;">
    <span>div 中的 span 元素</span>
    <p>div 中的第一个段落。</p>
    <p>div 中的第二个段落。</p>
    <p>div 中的第三个段落。</p>
    <p>div 中的第四个段落。</p>
    <span>div 中的 span 元素</span>
</div><br>

<div style="border:1px solid;">
    <p>另一个 div 中的第一个段落。</p>
    <p>另一个 div 中的第二个段落。</p>
    <p>另一个 div 中的最后一个段落。</p>
</div>

<p>body 中最后一个段落。</p>

所以nth-child(2)是在选择第二个节点，而nth-of-type(2)是在选择第二个p元素

nth-child(n)的特殊用法

/* 选择列表中的偶数标签 */
:nth-child(2n)

/*选择列表中的奇数标签 */
:nth-child(2n-1)

/*选择前几个元素 */
/*【负方向范围】选择第1个到第6个 */
:nth-child(-n+6){}

/*从第几个开始选择*/
/*【正方向范围】选择从第6个开始的，直到最后  */
:nth-child(n+6){}

/*两者结合使用，可以限制选择某一个范围 */
/*【限制范围】选择第6个到第9个*/
:nth-child(n+6):nth-child(-n+9)

属性选择器

<button>按钮</button>
<button>按钮</button>
<button disabled='disabled'>按钮</button>
<button disabled='disabled'>按钮</button>

button {
    cursor: pointer;
}
/* 属性选择器 */
/* 选择的是：既是button，又是disable这个属性的元素 */
/* 属性选择器的权重高于标签选择器和类选择器，结构伪类选择权重都为10 */
button[disabled] {
    cursor: default;
}

这是一个简单的案例，本来按钮放上去都是有小手，而禁用的按钮放上去还是默认的箭头

<input type="text" value="文本框">
<input type="text" value="文本框">
<input type="text" value="文本框">
<input type="search" value="搜索框">
<input type="search" value="搜索框">
<input type="search" value="搜索框">

input[type = 'search'] {
    color: pink;

}

这样就可以把所有搜索框变成粉色

<div class="icon1">图标1</div>
<div class="icon2">图标2</div>
<div class="icon3">图标3</div>

div[class^='icon'] {
    color: red;
}

这样可以选择所有类名icon开头的图标

选择符	简介
E[att]	选择所有具有att属性的E元素
E[att = "val"]	选择具有att属性，且属性值为val的E元素
E[att ^= "val"]	选择具有att属性，且属性值以val开头的E元素
E[att $= "val"]	选择具有att属性，且属性值以val结尾的E元素
E[att *= "val"]	选择具有att属性，且属性值含有val的E元素

css选择器总结

css选择器总结

选择器的作用

css基础选择器

标签选择器

类选择器

id选择器

通配符选择器

css复合选择器

后代选择器

子代选择器

兄弟选择器

相邻兄弟选择器

后续兄弟选择器

交集选择器

并集选择器

伪类选择器

链接伪类选择器

结构伪类选择器

属性选择器

Markdown插入音频视频

电脑好用小工具及快捷键

Comments NOTHING

取消回复