Articles19
Tags0
Categories0

Css3选择器

css3选择器

1.基本选择器

1)类选择器

<p class="cl1">类选择器</p>
//css
.cl1{
color:red
}

2) id选择器

<p id="id1">id选择器</p>
//css
#id1{
color:red
}

3)标签选择器

<p>id选择器</p>
//css
p{
color:red
}

4)后代选择器

<div id="sider">  
     <h3>内部</h3>
     <ul> 
         <li>列表1</li>
         <li>列表2</li>
         <li>列表3</li>
     </ul>
 </div>
 //css
 #sider h3{color:red;}
 #sider li {color:palegreen;}

5) 子元素选择器

<div id="sider">  
     <h3>内部</h3>
     <ul> 
         <li>列表1</li>
         <li>列表2</li>
         <li>列表3</li>
     </ul>
 </div>
 //css
 #sider > ul{
 color:red;
 }

6) 相邻兄弟选择器

<div id="sider">  
     <h3>内部</h3>
     <p>段落1</p>
     <ul> 
         <li>列表1</li>
         <li>列表2</li>
         <li>列表3</li>
     </ul>
     <p>段落2</p>
 </div>
 //css
 #sider > ul > li + li{color:palegreen;}
 //只有列表2、列表3变色
 #sider h3 ~ p{
color:blueviolet
}
//段落1和段落2都变色

2.属性选择器

1).E[attr] 属性名

为带有 title 属性的所有元素设置样式:

[title]
{
color:red;
}

2).E[attr=”value”] 属性名和值

E[attr^="value"]  ^开头 $结尾 *只要包含就行 ~ 空格分开 |开头,包括以-开头的

3.伪类选择器

1)未访问:

a:link{color:red}

2).鼠标悬停

a:hover{color:pink;}

3)鼠标点击时

a:active{color:green;}

4).点击后

a:visited{color:五颜六色;}

注:hover是可以用于多个元素身上的,但其他三个只能用于具有点击功能的元素上

5).聚焦

a:focus{color:五光十色;} 
//多用于输入框或链接

注:IE7以前不支持:focus,IE6以前不支持:hover :active

6)结构伪类选择器:第一个元素的小标为1不是为0

section:nth-child(2){color:deeppink;}
//表示选中html里的第二个section元素,文字设置为deeppink
p:first-child{color:red;}
//选中第一个
p:last-child{color:red;}
//选中最后一个
section:nth-child(odd){color:deeppink;}
section:nth-child(2n+1){color:deeppink;}
//选中奇数项
section:nth-child(even){color:deeppink;}
section:nth-child(2n){color:deeppink;}
//选中偶数项
section:nth-last-child(2){color:deeppink;}
//倒数第二个
li:first-of-type{
color:red
}
li:last-of-type{
color:red
}
//查找的时候限制类型,相对于父元素,在查找的时候只会查找满足条件的元素,过滤掉其他类型的元素
li:only-child{
color:red
}
//选择父元素唯一孩子的li
dd:nth-of-type(2){
color:red
}
//选择父元素第二个dd子元素
dd:nth-last-of-type(2){
color:red
}
//选择父元素倒数第二个dd子元素
h2:only-of-type{
color:red
}
//选择父元素下唯一的h2元素
p:empty{

}
//选择没有任何内容的p元素

7) UI元素状态伪类

//按钮可用
button:enable{
color:red;
}
//按钮不可用
button:disable{
color:red;
}
//复选按钮被选中
input[type=checkbox]:check{
color:red
}

8)伪元素选择器

p::firdt-line{
color:red
}
//选择某个p元素的首行
p::firt-letter{
color:red
}
//选择每个p元素的首字母
li::before{
content:'before:'
}
//li元素内容的前面插入内容
li::after{
content:'baybay'
} //li元素内容的后面插入内容

4.分组

1)选择器分组

h1{
color:red;
}
h2{
color:red;
}
h3{
color:red;
}
======等价与======
h1,h2,h3{
color:red;
}

2)优先级:内联样式>id选择器>类选择器>类型选择器(伪元素)

clipboard.png

3)提高优先级的方法:!important

Author:shuo
Link:http://yoursite.com/2019/10/26/20191026-css3选择器/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可