CSS选择器 | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

选择器

标签选择器（元素选择器)

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:

标签名{
    属性1:属性值1;
    属性2:属性值2;
    属性3 :属性值3;
    ...
    }
    
    // 或者
    
元素名{
    属性1:属性值1;
    属性2:属性值2;
    属性3:属性值3;
    ...
    }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

类选择器

类选择器使用 .（英文点号）进行标识，后面紧跟类名，其基本语法格式如下:

.类名{
    属性1:属性值1;
    属性2:属性值2;
    属性3:属性值3;
    ...
}

标签调用的时候用class=“类名”即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

小技巧

长名称或词组可以使用中横线来为选择器命名。
不建议使用“_”下划线来命名CSS选择器。输入的时候少按一个shift键; 浏览器兼容问题(比如使用_tips的选择器命名，在lE6是无效的)能良好区分JavaScript变量命名(JS变量命名是用” _ ")
不要纯数字、中文等命名，尽量使用英文字母来表示。

多类名选择器

可以同时引用多个类，用空格将引用的多个类的类名隔开

<div class="cover 5_cover" >...</ div>
<div class="cup 3_cup">...</ div>
<div class="seat 5_seat">...</div>   /*两个甚至以上的类名比较常用*/
<div class="bottom j_Bottom" >...</ div>
<div class="hander 3_Hander " >...</div>

注意

样式显示效果跟HTAIL元素中的类名先后顺序没有关系,受css样式书写的上下顺序有关。
各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

ID选择器

id选择器使用 # 进行标识，后面紧跟id名，其基本语法格式如下。

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

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义d属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。用法基本和类选择器相同。

id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。类选择器(class）好比人的名字，是可以多次重复使用的，比如张伟王伟李伟李娜id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

类选择器和id选择器的的区别就是在使用次数上。

通配符选择器

通配符选择器用*号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下:

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

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

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

注意通配符选择器即定义整个系统的样式

伪类选择器

首先，这也是一个选择器，伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素

为了和我们刚才学的类选择器相区别，类选择器是一个点，比如.demo {} 而我们的伪类用2个点就是冒号比如: :link{}。

链接伪类选择器

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

注意：写的时候，他们的顺序尽量不要颠倒按照lvha的顺序。

结构(位置)伪类选择器(CSS3)

. :first-child	选取属于其父元素的首个子元素的指定选择器
. :last-child	选取属于其父元素的最后一个子元素的指定选择器
.:nth-child(n)	匹配属于其父元素的第N个子元素，不论元素的类型even偶数 odd奇数如果用公式n从0开始 2n就是0 2.4.6
.:nth-last-child(n)	选择器匹配属于其父元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键词或公式

注意：

（1）如下方的代码（用的是nth-child），相当于交集选择的效果既要是div内的span元素，又要是第一个元素

div span:nth-child(1) {
    background-color:pink;
}

（2）如下代码（nth-of-type）代表div内的低2个span元素

div span:nth-of-type(2){
    background-color: red;
}

（3）如下代表div内的第一个span元素（span类型元素可以不在第一的位置）

div span:first-of-type {
    background-color:purple;
}

如下为效果代码：

...
<head>
    ...
    <style>
      div span:nth-child(2) {
          background-color: pink;
      }
   </style>
</head>

<body>
    <div>
        <p>我是一个屁</p>
        <span>我是span</span>
        <span>我是span</span>
        <span>我是span</span>
    </div>
</body>

效果

总结

:nth-child(n) 选择父元素里面的第 n个孩子，它不管里面的孩子是否同一种类型
of-type选择指定类型的元素

链接伪类选择器

实际工作中，visited和active很少用到，我们简单写链接伪元素选择器就好了

a {   
        /*a是标签选择器所有的链接*/
      font-weight : 700;
      font-size: 16px;
      color: gray ;
       }
       
a:hover{ /* :hover是随接伪类选择器鼠标经过*/
          color: red; /*鼠标经过的时候,由原来的灰色变成了红色*/
       }

若规定自己的类中的hover则可以这样做：

.类名:hover {
    属性
}

结构伪类选择器

选择符	简介
E:first-child	匹配父元素中的第一个了元素E
E:last-child	匹配父元素中最后—个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
Enth-of-type(n)	指定类型E的第n个

注意

类选择器、属性选择器、伪类选择器，权重为10

目标伪类选择器

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

:target {
       color: red;
       font-size: 30px;
}

复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。目的是为了可以选择更准确更精细的目标元素标签。

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

记忆技巧

交集选择器是并且的意思。即...又...的意思

比如： p.one 选择的是: 类名为 .one 的段落标签。

用的相对来说比较少，不太建议使用。

并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器﹑class类选择器id选择器等)，都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

记忆技巧

并集选择器和的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式。

比如: .one，p , #test {color:#F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。通常用于集体声明。

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

注意

可以重复取子代如：.aa ul li a {} 即为选aa类里面的ul里面的a的后代

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个>进行连接，注意，符号左右两侧各保留一个空格。

白话:这里的子指的是亲儿子不包含孙子重孙子之类。

比如: .demo > h3{color: red;} 说明h3一定是demo亲儿子。 demo元素包含着h3。

注意

可以重复取子元素如：.aa > ul > li > a {} 即为选aa类里面的ul里面的a的子元素

属性选择器

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

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

/*获取到  拥有  该属性的元素*/
div[class^=font] { /*class^=font表示 font 开始位置就行了*/
            color: pink ;
                 }
div[class$=footer] { /*class$=footer表示 footer 结束位置就行了*/
            color: skyblue;
div[class*-tao] { /* class*-tao *-表示tao在任意位置都可以*/
color: green;
}

<div class="font12">属性选择器</div>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="24font">属性选择器123</div>
<div class="sub-footer">属性选择器footer</div>

伪元素选择器（CSS3）

1. E:.first-letter文本的第一个单词或字（如中文、日文、韩文等)

2. E:first-line文本第一行

3. E:-selection 可改变选中文本的样式

p::first-letter {
    font-size: 20px;
    color: hotpink;
}
/*首行特殊样式*/
p::first-line {
  color: skyblue;
}
p::selection {
/*font-size: 50px; */
 color: orange;
}

4. E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content尾性使用。

div::befor{
   content:"开始";
}
div::after{ 
   content:"结束":
}

E:after、E:before在旧版本里是伪元素，CSS3的规范里":"用来表示伪类，"::"用来表示伪元素，但是在高版本浏览器下E:after 、E:before会被自动识别为E::after、E::before。这样做的目的是用来做兼容处理。

CSS各种选择器 | 青训营笔记

CSS选择器 | 青训营笔记

选择器

标签选择器（元素选择器)

类选择器

多类名选择器

ID选择器

id选择器和类选择器区别

通配符选择器

伪类选择器

链接伪类选择器

结构(位置)伪类选择器(CSS3)

链接伪类选择器

结构伪类选择器

目标伪类选择器

复合选择器

交集选择器

并集选择器

后代选择器

子元素选择器

属性选择器

伪元素选择器（CSS3）