CSS选择器

时间 2019-12-11

标签 css 选择器栏目 CSS 繁體版

原文原文链接

回忆一下CSS2中得选择器样式：css

行内样式>ID选择器>类选择器>标签名选择器css3

1、第一种分类方式：按照功能上优化

一、ID选择器 <div id="div1">类选择的优先级最高</div> #div1{color:black;}

二、类选择器 <div class="div2">类选择最常常用</div> .div2{text-align:center;}

三、标签名选择器 <div>标签名选择器是最广泛的在全部的样式元素都有里通常采用标签名选择器</div> 单独一个div就ok div{background:yellow;}

四、群组选择器(就是把有着相一样式的元素合在一块儿来写)

每一个元素都有相同的属性，

例如：h1{color:red;}

p{color:red;}

span{color:red;}

上边那种方式就至关繁琐如今就能够写成这种样式：h1,p,span{color:red;}

五、后代选择器

例如：<div class="div4"><p>后代元素选择器是用处不少，而且也有不少其余的用法，css3中会有不少体现</p></div>

.div4 p{color:black;}

接下来就是CSS3的选择器

CSS 3中的结构性伪类

六、根元素选择器

:root 选择器匹配文档根元素。(选择器匹配到的元素，也就是文档树中最顶层结构的元素。在不一样的场景下具体的根元素不一样。)

:root{background: pink;border: 1px solid black;}

七、同级选择器(兄弟选择器)

element1~element2 element1 以后出现的全部 element2。 spa

两种元素必须拥有相同的父元素,可是 element2 没必要直接紧随 element1。 blog

例子： p~ul{font-size: 50px;} (ul在p的下方)element

其中有有一个特殊的：相邻的兄弟选择器（紧随到其元素才会有影响）；p+ul{font-size:50px;}文档

八、子选择器字符串

子选择器使用了大于号.表示父级元素的子元素将有所改变get

h1>strong{color:red;} 子元素的样式有所变化input

<h1>我是<strong>子选择器<strong>我是子元素样式</strong><h1>

九、属性选择器

(1) [attribute] 匹配带有指定属性的元素

例子：[title]{color:green}

<div><a href="#" title="我是特殊的title">属性选择器</a></div>

输出

(2)[attribute=value] 匹配带有指定属性与值得元素；

[title="title"]{color: #00CCFF;margin-left: 30px;}

<div>
       <a href="#" title="titlehh">属性选择器</a>
       <a href="#" title="title">带title的值得选择器</a>
   </div>

显示的结果为：

（3）[attribute~=value]匹配属性值包含指定的词汇的元素，value必须是独立的字符串

[title~="title"]{color:red;margin-left: 30px;}

<div>
       <a href="#" title="title name">属性选择器</a>
       <a href="#" title="title">带title的值得选择器</a>
   </div>

显示的结果是两个a标签内的颜色都有所变化

（4）[attribute|=value] 匹配全部带有指定值开头的属性值得元素，该值必须是整个单词

[title|="title"]{color:red;margin-left: 100px;display: inline-block;}

<div>
       <a href="#" title="title">咱们都带有title这个单词</a>
       <a href="#" title="title">咱们都带有title这个单词</a>
       <a href="#" title="title">咱们都带有title这个单词</a>

   </div>

显示出来的结果是

（5）[attribute^=valiue] 匹配属性值以指定值开头的每一个元素.

指定值能够是单独一个字母或者一个单词或者是数字。最好是单词（便于代码的编辑）

[title^="title"]{color: green;margin-left: 50px;}

<div>
       <a href="#" title="titleFirst">咱们都带有title这个单词</a>
       <a href="#" title="titleSecond">咱们都带有title这个单词</a>
       <a href="#" title="title">咱们都带有title这个单词</a>
   </div>

（6）[attribute$=value] 匹配属性值以指定值结尾的每一个元素

[title$="title"]{color: #003399;margin-left: 100px;}

    <div>
       <a href="#" title="Firsttitle">咱们都带有title这个单词</a>
       <a href="#" title="Secondtitle">咱们都带有title这个单词</a>
       <a href="#" title="1title">咱们都带有title这个单词</a>
   </div>

（7）[atrribute*=value]匹配属性值包含指定值的每一个元素（这个是最经常使用的属性选择器）

[title*="ti"]{color: red;margin-left: 100px;}

<div>
       <a href="#" title="Firstitle">咱们都带有ti这个单词</a>
       <a href="#" title="Secondtitle">咱们都带有ti这个单词</a>
       <a href="#" title="title">咱们都带有ti这个单词</a>
       <a href="#" title="ti">咱们都带有ti这个单词</a>
   </div>

显示的结果为：

十、子元素选择器（伪类选择器）

(1):nth-child(n)匹配属于其父级元素的第N个子元素，不管元素的类型

(2):nth-last-child(n)匹配属于其元素的第N个子元素，不管元素类型，从最后一个元素开始算起

(3):first-child 匹配属于其父元素的首个子元素的子元素

(4):last-child 匹配属于其父元素的最后一个子元素的每一个元素。

(5):first-of-type 匹配属于其父元素的特定类型的首个子元素的的每一个元素

(6):last-of-type 匹配属于其父元素的特定类型的最后一个子元素的每一个元素

(7):nth-of-type(n)匹配属于父元素的特定类型的第N个元素子元素的每一个元素

N能够是数字，关键字和公式

(8):nth-last-of-type(n)匹配属于父元素的特定类型的第N个子元素的每一个元素，以最后一个子元素开始计数

(9):only-child匹配属于其父元素的惟一子元素的每一个元素

(10):only-of-type 匹配属于其父元素的特定类型的惟一子元素的每一个元素

十一、表单元素选择器

(1):endabled 匹配每一个已启用的元素（大多用在表单元素上）

(2):disabled 匹配每一个被禁用的元素（大多用字表单元素上）

(3):checkek 匹配每一个已被选中得input元素（只用在单选按钮上和复选框上）

十二、其余选择器

(1):empty 匹配没有子元素（包括文本节点）的每一个元素

(2):target URL带有后面跟有瞄名称#，指向文档内某个具体的元素，这个被链接元素

就是目标元素(target element)。 :target 选择器可用于选取当前活动的目标元素。

点击就会有样式的改变

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

<div>
       <a href="#news" title="Firstitle">而且href有值跳转到new1</a>
       <a href="#" title="Secondtitle">带有href属性</a>
       <p id="news">我有专有的href值,内容1</p>
   </div>

点击第一个a标签，会跳转到对应id的p标签，而且p标签的样式会有改变

(3)::selection 匹配每一个已被选中的 input 元素(只用于单选按钮和复选框)

(4):not(selector)(反伪类)

综上就是我对CSS选择器的总结，你们有什么问题能够提出来。后期我还会对对它优化更新。

多多指点意见