基本选择器
- 标签选择器
HTML标签作为标签选择器的名称
语法
<style type="text/css">
p{
color:red;
}
</style>
<body>
<p>内容</p>
</body>
- 类选择器
<style type="text/css">
.name{
color:red;
}
</style>
<标签名 class= "类名称">标签内容</标签名>
<p class="name">内容</p>
- ID选择器
<style type="text/css">
#name{
color:red;
}
</style>
<标签名 id= "id名称">标签内容</标签名>
<p id="name">内容</p>
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
- 基本选择器的优先级
ID选择器>类选择器>标签选择器
高级选择器
- 关系选择器(层次选择器)
E , F:多元素选择器(并集选择器)
E F:后代选择器
E > F: 子元素选择器
E + F:相邻元素选择器(兄弟)匹配所有紧随E元素之后的同级元素F
E ~ F: 同级元素通用选择器 匹配任何在E元素之后的同级F元素
<style type="text/css">
li,p{color:red;}
ul li{color:red;}
ul>li{color:red;}
li+p{color:red;}
li~p{color:red;}
</style>
<body>
<ul>
<li>1</li>
<p>2</p>
<li>3</li>
</ul>
</body>
- 属性选择器
E[属性]: 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”,以下同。)
E[att=val]:选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写)
E[att~=val]:匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
E[att|=val]:匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val-”开头的E元素,主要用于lang属性,比如“en”、“en-us”、“en-gb”等
E[att^=”val”]:属性att的值以”val”开头的元素
E[attr$=val]:属性att的值以”val”结尾的元素
E[att*=”val”]:属性att的值包含”val”字符串的元素
<style type="text/css">
li[class]{color:red;}
li[class=name]{color:red;}
li[class~=name]{color:red;}
p[class="name-user"]{color:red;}
li[class^='n']{color:red;}
li[class$='e']{color:red;}
li[class*='m']{color:red;}
</style>
<body>
<ul>
<li class="name user">1</li>
<p class="name-user">2</p>
<li>3</li>
</ul>
</body>
- 伪类选择
伪类选择器是CSS中已经定义好的选择器,不能随便取名,常用的伪类选择器是使用在a元素上的几种,
a:link:未单击访问时超链接样式
a:visited:单击访问后超链接样式
a:hover:鼠标悬浮其上的超链接样式
a:active:鼠标单击未释放的超链接样式
//鼠标滑过li时显示p元素
<style type="text/css">
li:hover+p{display:block;}
p{display:none;}
</style>
<body>
<ul>
<li>1</li>
<p>2</p>
</ul>
</body>
display:属性规定元素应显示的类型。常用的有block(块级元素)inline(行内元素,不可以设置宽高)inline-block(行内块元素,可以设置宽高)none(此元素不会被显示)
- 伪元素选择器
伪元素选择器并不是针对真正的元素使用的选择器,而是针对CSS中已经定义好的伪元素使用的选择器,CSS中有如下四种伪元素选择器
first-line:用于选取指定选择器的首行
first-letter:用于选取指定选择器的首字母
before:在被选元素的内容的前面插入内容
after:在被选元素的内容的后面插入内容
p:first-line{ color:#ff0000;}
li:after{ content: url(dot.png);}
content:属性来指定要插入的内容(图片、图标路径)
- 结构性伪类选择器
E:root:将样式绑定到页面的根元素中。所谓根元素,是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含着整个页面的html部分
E:not:想对某个结构元素使用样式,但想排除这个结构元素下的子结构元素,就是用not样式 如:ul li:not(.two)
E:empty:指定当元素内容为空白时使用的样式
E:first-child:对一个父元素中的第一个子元素指定样式
E:last-child:对一个父元素中的最后一个子元素指定样式
E:nth-child():对指定序号的子元素设置样式(正数)
E:nth-child(odd):所有正数下来第奇数个子元素
E:nth-child(even):所有正数下来第偶数个子元素
E:nth-last-child(n):对指定序号的子元素设置样式(倒数)
E:nth-last-child(odd):所有倒数上去第奇数个子元素
E:nth-last-child(even):所有倒数上去第偶数个子元素
E:nth-of-type(n):与:nth-child()作用类似,但是仅匹配使用同种标签的元素
E:nth-last-of-type(n):与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
E:nth-child(an+b):a表示每次循环中共包括几张样式;b表示指定的样式在循环中所在的位置;循环使用样式(注意a后面必须加n)
E:only-child:匹配父元素下仅有的一个子元素等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type:匹配父元素下使用同种标签的唯一一个子元素等同于: first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:enabled:匹配表单中激活的元素
E:disabled:匹配表单中禁用的元素
E:checked:匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
E::selection:匹配用户当前选中的元素