CSS3-选择器

CSS3选择器

属性选择器

CSS3-选择器_第1张图片

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


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			header,nav{
				height: 120px;
				background-color: pink;
				margin:10px;
			}
			/* 属性选择器使用方法 */
			button[disabled]{
				cursor: default;
			}
			input[type="search"]{
				color:red;
			}
			/* 选出类名以icon开头的div */
			div[class^="icon"]{
				color:blue;
			}
		style>
	head>
	<body>
		<header>header>
		<nav>nav>
		<form action="">
			邮箱:<input type="email">
			网址: <input type="url">
			<input type="text" required="required" placeholder="请输入用户名">
			<input type="submit" value="提交">
			
		form>
		<button>按钮button>
		<button disbaled="disabled">按钮sff button>
		<input type="text" id="" value="" />
		<input type="search" name="" required="" placeholder="Search" x-webkit-speech="" x-webkit-grammar="builtin:search" lang="zh-CN">
		<div class="icon1">test1div>
		<div class="icon2">test2div>
		<div class="icon3">test3div>
		<div class="iicon4">test4div>	
		div>
	body>
html>


CSS3-选择器_第2张图片

结构伪类选择器


CSS3-选择器_第3张图片

  • nth-child(n)
    • n可以是数字,关键字和公式
    • n如果是数字,就是选择第几个
    • even是偶数 odd是奇数
    • n是公式,则从0开始计算,但是 第0个元素或者超过元素的个数会被忽略。

CSS3-选择器_第4张图片


<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>title>
	<style>
		/* 第一个子元素 */
		ul li:first-child{
			background-color: red;
		}
		/* 第三个子元素 */
		ul li:nth-child(3){
			background-color: blue;
		}
		/* 是偶数的子元素 */
		ul li:nth-child(even){
			background-color: aqua;
		}
		/* n+5就是第5个开始选择 */
		ul li:nth-child(n+5){
			background-color: #0000FF;
		}
	style>
head>
<body>
	<ul>
		<li>1li>
		<li>2li>
		<li>3li>
		<li>4li>
		<li>5li>
		<li>6li>
		<li>7li>
		<li>8li>
	ul>
body>
html>

CSS3-选择器_第5张图片


<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>title>
	<style>
		/* of-type 选择指定类型的元素 */
		/* 倒数第一个span */
		div span:nth-last-of-type(1){
			background-color: red;
		}
		/* 正数第二个span */
		div span:nth-of-type(2){
			background-color: black;
		}
	style>
head>
<body>
	<div>
		<p>这是一个pp>
		<span>我是spanspan>
		<span>我是spanspan>
		<span>我是spanspan>
	div>
body>
html>

CSS3-选择器_第6张图片

伪元素选择器


CSS3-选择器_第7张图片

  • before和after必须有content属性
  • before在内容的前面,after在内容的后面
  • before和after创建一个元素,但是属于行内元素。
  • 因为在dom里面看不见刚才创建的元素,所以我们称为伪元素。
  • 伪元素和标签选择器一样,权重为1.

<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>title>
	<style>
		div{
			width:300px;
			height:300px;
			border:1px solid #000;
		}
		/* 在div前面追加内容 */
		div::before{
			content: "猪";
			display: block;
			width: 100px;
			height: 100px;
			background-color: red;
		}
		/* 在div后面追加内容 */
		div::after{
			content: "喵";
		}
	style>
head>
<body>
	<div>是这样的div>
body>
html>

CSS3-选择器_第8张图片

案例:伪元素字体图标


<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>title>
	<style>
		div{
			position: relative;
			width: 249px;
			height: 35px;
			border: 1px solid red;
		}
		div::after{
			content:"字体图标";
			position:absolute;
			top:0px;
			right: 5px;
			line-height: 35px;
			/* font-family: 'icomoon'; */
		}
	style>
head>
<body>
	<div>div>
body>
html>

在这里插入图片描述

你可能感兴趣的:(css3)