选择器:选择器是一种模式,用于选择需要添加样式的元素。
首先简述六大选择器
基本选择器
标签选择器
类选择器
ID选择器
高级选择器
层次选择器
结构伪类选择器
属性选择器
其中基本选择器与层次选择器较为常用。
一.基本选择器
1.标签选择器
使用HTML标签来设置标签内的图文样式。
2.类选择器
使用class属性定义标签类值,指定某一类属性值来定义其样式。
<h1 class=”classname”></h1>
.classname{font-size:18px;}
3.ID选择器
给特定标签赋一个独有的id值,一个html文档里不能够有重复的id值。可以准确定位到标签。
<header id=”idname”></header>
#idname{font-size:18px;}
基本选择器代码介绍:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<link rel="stylesheet" type="text/css" href="../css/demo03.css"/>
</head>
<body>
<h1>信息表格填写</h1>
<hr/>
<form>
<h3>账户信息</h3>
<p id="id1">姓 名:<input type="text" name="uname"/></p>
<p class="intro">Email:<input type="email" name="myemail"/></p>
<h3>隐私信息</h3>
<p id="id2">手机号:<input type="number" name="phone"></p>
<p class="intro">密 码:<input type="password" name="pass"></p>
<p><input type="submit" value="提交"></p>
</form>
</body>
</html>
demo03.css代码:
h1{color:red;}/*这是标签选择器*/
.intro{color:green;} /*这是类选择器*/
#id1{color: #E864D1;}
#id2{color: #A03200;}/*这是ID选择器*/
运行效果图:
二.高级选择器
1.层次选择器
选择器 | 类型 | 功能描述 |
E F | 后代选了器 | 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 |
E>F | 子选择器 | 选择匹配的F元素,且匹配的F元素是匹配的F元素的子元素 |
E+F | 相邻兄弟选择器 | 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素的后面 |
E~F | 通用兄弟选择器 | 选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素 |
2.结构伪类选择器
选择器 | 功能描述 |
E:first-child | 作为父元素的第一个子元素的元素E |
E:last-child | 作为父元素的最后一个子元素的元素E |
E F:nth-child(n) | 选择父级元素E的第n个子元素F,(n可以是1,2,3)关键字为even,odd |
E:first-of-type | 选择父元素内具有指定类型的第一个E元素 |
E:last-of-type | 选择父元素内具有指定类型的最后一个E元素 |
E F:nth-of-type(n) | 选择父元素内具有指定类型的第n个F元素 |
使用E F:nth-child(n)和E F:nth-of-type(n)的关键点:
E F:nth-child(n)在父级里从第一个元素开始查找不分类型。
E F:nth-of-type(n)在父级里先看类型,再看位置。
3.属性选择器
属性选择器 | 功能描述 |
E[attr] | 选择匹配具有属性attr的E元素 |
E[attr=val] | 选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写) |
E[attr^=val] | 选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串 |
E[attr$=val] | 选择匹配元素E,且E元素定义了属attr,其属性值是以val结尾的任意字符串 |
E[attr*=val] | 选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”,换句话说,字符串val与属性值中的任意位置相匹配 |