css3选择器

最新推荐文章于 2024-07-22 20:38:06 发布
原创 最新推荐文章于 2024-07-22 20:38:06 发布 · 808 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3

本文详细介绍了CSS3中新增的基础选择器、属性选择器、伪类选择器等，并通过实例展示了如何使用这些选择器来精确地定位和修饰网页元素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

CSS3 是 CSS 的 技术升级版本！

【回顾：css中选择器】

目录

*** CSS3 基础选择器（新增） ***

 

  •  子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style type="text/css">
section > div {
	color: #f00;
}
</style>
</head>
<body>
<section>
	<article>
		<div>article里面的文字</div>
	</article>
	<div>article外面的文字</div>
</section>
</body>
</html>

  • 相邻兄弟元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟元素选择器</title>
<style type="text/css">
section > div + article {      
 /*控制的是与section下第一个div挨着的后边的第一个article*/
	color: #f00;
}
</style>
</head>
<body>
<section>
	<div>article外面的文字</div>
	<article>
		<div>article里面的文字</div>
	</article>
	<article>
		<div>article里面的文字</div>
	</article>
</section>
</body>
</html>

  • 通用兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用兄弟选择器</title>
<style type="text/css">
section > div ~ article {
	color: #f00;
/*section下第一个div后边的所有 article子元素都修改颜色*/
}
</style>
</head>
<body>
<section>
	<article>
		<div>article里面的文字</div>
	</article>
	<div>article外面的文字</div>
	<article>
		<div>article里面的文字</div>
	</article>
	<article>
		<div>article里面的文字</div>
	</article>
	<article>
		<div>article里面的文字</div>
	</article>
</section>
</body>
</html>

  • 群组选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style type="text/css">
section > article,
section > aside,
section > div {
	color: #f00;
	margin-top: 10px;
	background: #abcdef;
}
</style>
</head>
<body>
<section>
	<article>article</article>
	<aside>aside</aside>
	<div>div</div>
</section>
</body>
</html>

 

*** CSS3 属性选择器（新增） ***

  • Element[attribute]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute</title>
<style type="text/css">
a[href] {
	text-decoration: none;
}
</style>
</head>
<body>
<a href="attribute.html">attribute</a>
</body>
</html>

  • Element[attribute="value"]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute</title>
<style type="text/css">
a[href] {
	text-decoration: none;   /*所有拥有属性为href的a标签元素内 会改变样式*/
}
a[href="#"] {
	color: #f00;  /*只有属性href值为#的a标签元素才会改变样式*/
}
</style>
</head>
<body>
<a href="attribute.html">attribute</a>
<a href="#">attribute</a>
</body>
</html>

  • Element[attribute ~= "value"]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute</title>
<style type="text/css">
a[class~="two"] {    /*class属性值中包含“two”的所有a标签元素会改变样式*/
	color: #ff0;
}
</style>
</head>
<body>
<a class="one two" href="#">attribute</a>
<a class="two three" href="#">attribute</a>
</body>
</html>

  • Element[attribute ^= "value"]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute</title>
<style type="text/css">
a[href^="#"] {
	color: #0f0;   /*href属性值 以#开头的（包含只有#的标签元素）*/
}
</style>
</head>
<body>
<a href="attribute.html">attribute</a>
<a href="#">attribute</a>
<a href="#1">attribute</a>
<a href="#2">attribute</a>
<a href="#3">attribute</a>
<a href="#4">attribute</a>
<a href="1#">attribute</a>
<a href="2#">attribute</a>
<a href="3#">attribute</a>
<a href="4#">attribute</a>
</body>
</html>

  • Element[attribute $= "value"]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute</title>
<style type="text/css">
a[href$="#"] {
	color: #00f;   /* href属性值 以“#”结尾的标签元素*/
}
</style>
</head>
<body>
<a href="#">attribute</a>
<a href="#1">attribute</a>
<a href="#2">attribute</a>
<a href="#3">attribute</a>
<a href="#4">attribute</a>
<a href="1#">attribute</a>
<a href="2#">attribute</a>
<a href="3#">attribute</a>
<a href="4#">attribute</a>
</body>
</html>

  • Element[attribute *= "value"]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute</title>
<style type="text/css">
a[href*="#"] {
	color: #0ff;
}
</style>
</head>
<body>
<a href="attribute.html">attribute</a>
<a href="#">attribute</a>
<a class="one two" href="#">attribute</a>
<a class="two three" href="#">attribute</a>
<a href="#1">attribute</a>
<a href="#2">attribute</a>
<a href="#3">attribute</a>
<a href="#4">attribute</a>
<a href="1#">attribute</a>
<a href="2#">attribute</a>
<a href="3#">attribute</a>
<a href="4#">attribute</a>
<a href="1#1">attribute</a>
<a href="2#2">attribute</a>
<a href="3#3">attribute</a>
<a href="4#4">attribute</a>
<a href="#-1">attribute</a>
<a href="#-2">attribute</a>
<a href="#-3">attribute</a>
<a href="#-4">attribute</a>
</body>
</html>

  • Element[attribute |= "value"]

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute</title>
<style type="text/css">
a[href|="#"] {
	color: #f0f;  /*属性值 以#开头，或者以 #- 开头*/
}
</style>
</head>
<body>
<a href="#1">attribute</a>
<a href="#2">attribute</a>
<a href="#3">attribute</a>
<a href="#4">attribute</a>
<a href="1#">attribute</a>
<a href="2#">attribute</a>
<a href="3#">attribute</a>
<a href="4#">attribute</a>
<a href="1#1">attribute</a>
<a href="2#2">attribute</a>
<a href="3#3">attribute</a>
<a href="4#4">attribute</a>
<a href="#-1">attribute</a>
<a href="#-2">attribute</a>
<a href="#-3">attribute</a>
<a href="#-4">attribute</a>
</body>
</html>

 

*** CSS3 伪类选择器（新增） ***

  • 动态伪类（锚点伪类、用户行为伪类）


 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态伪类</title>
<style type="text/css">
a{
    text-decoration:none;
}
a:link{
    color:#000;  /*默认链接字体颜色 黑色*/
}
a:hover{
    color:#f00;  /*鼠标经过为 红色*/
}
a:active{
    color:ff0;   /*鼠标按下为 黄色*/
}
a:visited{
    color:#0ff;  /*鼠标松开为 天蓝色*/
}
</style>
</head>
<body>
<a href="#">动态伪类</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态伪类</title>
<style type="text/css">
input{
    width:200px;
    height:30px;
    border:2px red solid;
}
input:focus{
    background:#f00;  /*当光标点击进输入框后，输入框背景色改变为天蓝色；光标移开则没有背景颜色了*/
}
</style>
</head>
<body>
<input type="text>
</body>
</html>

  • UI元素状态 伪类

  

//  :checked  选择器匹配每个已被选中的 input 元素、只用于单选按钮和复选框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UI元素状态伪类</title>
<style type="text/css">
input:enabled{
    width:200px;
    height:30px;
    border:1px red solid;
}
input:disabled{         /*disabled会没有宽和高*/
    background:#abcdef;
    border:1px yellow solid;
}
</style>
</head>
<body>
<input type="text" disabled="disabled">
<input type="text">     <!--默认是 enabled-->
<input type="text">
<input type="text">
</body>
</html>

 

  • CSS3结构类（又称 :nth选择器）

  • :first-child

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-Child</title>
<style type="text/css">
section > div:first-child {   /* section下p标签的的父元素下 第一个div标签元素*/
	color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<div>0-2</div>
<div>0-3</div>
<section>
	<div>1-1</div>
	<div>1-2</div>
	<div>1-3</div>
</section>
<section>
	<div>2-1</div>
	<div>2-2</div>
	<div>2-3</div>
</section>
</body>
</html>

  • :last-child 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last-Child</title>
<style type="text/css">
div:last-child {    
	color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<div>0-2</div>
<div>0-3</div>     /*这个div其父元素body最后一个元素不是div，而是section，所以不匹配*/
<section>
	<div>1-1</div>
	<div>1-2</div>
	<div>1-3</div>  /*这个div父元素section的最后一个元素是div，则变红*/
</section>
<section>
	<div>2-1</div>
	<div>2-2</div>
	<div>2-3</div>  /*这个div父元素section的最后一个元素是div，则变红*/
</section>
</body>
</html>

  • :nth-child(n) 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Child</title>
<style type="text/css">
ul > li:nth-child(3) {    /*第三个li改变背景颜色*/
	background: #f00;
}
div:nth-child(2) {  
	color: #f00;
}
</style>
</head>
<body>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>
<hr>
<div>0-1</div>
<div>0-2</div>  <!-- 这边div标签的父元素body的第二个孩子标签是hr，不是div，所以不会变红 -->
<div>0-3</div>
<section>
	<div>1-1</div>
	<div>1-2</div>  <!-- 这个div标签的父元素section的第二个孩子标签是div，所以会变红 -->
	<div>1-3</div>
</section>
<section>
	<div>2-1</div>
	<div>2-2</div>
	<div>2-3</div>
</section>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Child</title>
<style type="text/css">
ul > li:nth-child(3) {
	background: #f00;
}
div:nth-child(2) {
	color: #f00;
}
/*
ul > li:nth-child(2n) {
	background: #ff0;
}
ul > li:nth-child(2n+1) {
	background: #0f0;
}
ul > li:nth-child(n+4) {
	background: #abcdef;
}*/
ul > li:nth-child(odd) {  /*odd = 2n+1*/
	background: red;
}
ul > li:nth-child(even) {  /*even = 2n*/
	background: blue; 
}

</style>
</head>
<body>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>
<hr>
<div>0-1</div>
<div>0-2</div>
<div>0-3</div>
<section>
	<div>1-1</div>
	<div>1-2</div>
	<div>1-3</div>
</section>
<section>
	<div>2-1</div>
	<div>2-2</div>
	<div>2-3</div>
</section>
<hr>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>
</body>
</html>

  • :nth-last-child(n) 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Child</title>
<style type="text/css">
ul > li:nth-last-child(3) {   
	background: #f00;
}
</style>
</head>
<body>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>
<hr>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>
</body>
</html>

【注意】：无论是nth-child还是nth-last-child，都是从1开始计数（但是很多js中都是从0开始计数）

 

  • :nth-of-type(n)

  nth-child(n)，这个是不区分类型

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-of-type</title>
<style type="text/css">
/*div:nth-child(2) {   <!-- 判断其父元素的第二个元素，如果是div则变色，不是则不变色 -->
	color: #f00; 
}*/
div:nth-of-type(2) {   <!-- 其父元素的第二个div即可 -->
	color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
	<div>1-1</div>
	<div>1-2</div>
	<div>1-3</div>
</section>
<div>0-2</div>    
<div>0-3</div>
<section>
	<div>2-1</div>
	<div>2-2</div>
	<div>2-3</div>
</section>
</body>
</html>

  • :nth-last-of-type(n) 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Last-of-type</title>
<style type="text/css">
/*div:nth-last-child(2) {   /*先判断 父元素body/section的倒数第二个元素 是否是div*/
	color: #f00;
}*/
div:nth-last-of-type(2) {   /*父元素body/section的倒数第二个div即可*/
	color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
	<div>1-1</div>
	<div>1-2</div>
	<div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
	<div>2-1</div>
	<div>2-2</div>
	<div>2-3</div>
</section>
</body>
</html>

  • :first-of-type 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-of-type</title>
<style type="text/css">
div:first-of-type {   /*相当于 nth-of-type(1)，body下边第一个div变红；section下边第一个div变红*/
	color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>   
<section>
	<div>1-1</div>
	<div>1-2</div>
	<div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
	<div>2-1</div>
	<div>2-2</div>
	<div>2-3</div>
</section>
</body>
</html>

  • :last-of-type 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last-of-type</title>
<style type="text/css">
div:last-of-type {  /*section中最后一个div；body最后一个div*/
	color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
	<div>1-1</div>
	<div>1-2</div>
	<div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
	<div>2-1</div>
	<div>2-2</div>
	<div>2-3</div>
</section>
</body>
</html>

  • :only-child 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>only-child</title>
<style type="text/css">
article:only-child {   /*父元素中仅能有一个article元素*/
	background: #f00;
}
</style>
</head>
<body>
<section>
	<article>1</article>
	<article>2</article>
</section>
<section>
	<article>3</article>  /*可以*/
</section>
<section>
	<div>4</div>
	<article>5</article>
	<div>6</div>
</section>
<section>
	<div>7</div>
	<article>8</article>
	<article>9</article>
	<div>10</div>
</section>
</body>
</html>

  • :only-of-type 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>only-of-type</title>
<style type="text/css">
article:only-of-type {   /*父元素中只能有一组article标签（可以有其他的标签），只要指定元素唯一即可*/
	background: #f00;
}
</style>
</head>
<body>
<section>
	<article>1</article>
	<article>2</article>
</section>
<section>
	<article>3</article>
</section>
<section>
	<div>4</div>
	<article>5</article>
	<div>6</div>
</section>
<section>
	<div>7</div>
	<article>8</article>
	<article>9</article>
	<div>10</div>
</section>
</body>
</html>

  • :empty 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>empty</title>
<style type="text/css">
div {
	height: 200px;
	background: #abcdef;
}
div:empty {    /*div标签元素中没有任何子元素 即可*/
	background: #f00;
}
</style>
</head>
<body>
<div></div>
<div>Second</div>
<div></div>
<div>Third</div>
</body>
</html>

 

  • 否定选择器（:not）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>not</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	border: none;
}
a {
	text-decoration: none;
	color: #333;
	font-size: 14px;
	display: block;
	float: left;
	width: 100px;
	height: 30px;
}
nav {
	width: 800px;
	margin: 0 auto;
}
nav > a:not(:last-of-type) {  /*不需要最后一个*/
	border-right: 1px solid red;
}
</style>
</head>
<body>
<nav>
	<a href="#">first</a>
	<a href="#">second</a>
	<a href="#">third</a>
	<a href="#">fourth</a>
	<a href="#">fifth</a>
</nav>
</body>
</html>

 

*** 权重 ***

 

*** css3 伪元素（新增） ***

  • ::first-line

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-Line</title>
<style type="text/css">
div {
	width: 300px;
	margin: 0 auto;
}
div::first-line {  /*该元素的第一行 会改变样式*/
	color: #f00;
	font-weight: bold;
}
</style>
</head>
<body>
<div>大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！</div>
</body>
</html>

  • ::first-letter

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-Letter</title>
<style type="text/css">
div {
	width: 500px;
	margin: 0 auto;
	font-size: 12px;
}
div::first-letter {   /*第一个字符*/
	color: #f00;
	font-size: 24px;
	font-weight: bold;
}
</style>
</head>
<body>
<div>大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！大家好，欢迎来到这里！</div>
</body>
</html>

  • ::before

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>before</title>
<style type="text/css">
div {
	width: 300px;
	height: 100px;
	border: 1px solid #000;
}
div::before {                 /*在元素的前边*/
	content: "我在内容的前面";
}
</style>
</head>
<body>
<div>伪元素</div>
</body>
</html>

    // 可以设置display：block；

 

  • ::after

 // 同样默认为行内元素,也可以通过css控制

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>after</title>
<style type="text/css">
div {
	width: 300px;
	height: 100px;
	border: 1px solid #000;
}
div::after {
	content: "我在内容的后面";
}
</style>
</head>
<body>
<div>伪元素</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear</title>
<style type="text/css">
header {
	background: #abcdef;
}
/*清除浮动方法1：添加div块*/
div{
    clear:both;
}
/*清除浮动方法2：添加after伪元素*/
header::after {
	display: block;
	content: "";  /*必须写content*/
	clear: both;
}
header > article {
	float: left;
	width: 40%;
	height: 30px;
	background: #f00;
}
header > aside {
	float: right;
	width: 40%;
	height: 50px;
	background: #ff0;
}
</style>
</head>
<body>
<header>
	<article></article>
	<aside></aside>
        <div></div>
</header>
</body>
</html>

  • ::selection

  //选中文字时，文字颜色、背景颜色都会改变

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selection</title>
<style type="text/css">
div::selection {
	background: red;
	color: #ff0;
}
</style>
</head>
<body>
<div>SelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelection</div>
</body>
</html>

 

HTML表格（table、tr、td、th、thead、tbody、tfoot标签）
拾Miss~博客
03-12 3万+
目录 HTML表格 table表格属性 ***HTML表格** <!DOCTYPE html> <html> <head> <title>表格</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </hea...
HTML5—新语义元素header、nav、section、article、aside、footer等使用及兼容
热门推荐
生如夏花 炫至茶靡
12-26 3万+
1.新语义元素： HTML5提供了新的语义元素来明确一个Web页面的不同部分。 ：描述了文档的头部区域，于定义内容的介绍展示区域 ：定义导航链接的部分。 ：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，section通常 包含了一组内容及其标题。 ：定义独立的内容。 ：定义页面主区域内容之外的内容（比如侧边栏）。 ：标签规定独立的流内
css选择器选择3和4_注意CSS Level 4选择器
Web design 教程小屋
07-08 492
我们该开始学习一些新CSS了，不是吗？ 我们都习惯于向左右框架引入新功能，但是我们常常忘记，新功能不断以我们每天使用的核心Web语言进行开发。 W3C编辑草稿 1月15日发布的CSS选择器第4级草案概述了CSS功能的重大飞跃。 在开始之前，您应该知道：今天在本文中找到CSS在很大程度上将无法在任何浏览器中运行。 即使是最新的。 原因是草稿正好是草稿。 这是第4级选择器草案的第四版，...
CSS3选择器大全
Shadow_Weirdo
08-16 3万+
1.CSS3选择器 属性选择器 在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。 input[type=&quot;text&quot;] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana...
CSS3选择器（全部）
GreenBark
10-16 9617
CSS3选择器再CSS2.1选择器的基础上增加了属性选择器、伪类选择器、过滤选择器，减少了对HTML类名或ID名的依赖，避免了对HTML结构的干扰，让编写代码更加轻松。 1，基本选择器 （1）标签选择器(类型选择器)             统一定义常用标签的基本样式。 ​ &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;...
CSS3选择器（详细！全！）
FishC的博客
11-17 9656
CSS3选择器（详细！全！）
CSS3 —— 选择器（带你深入了解 CSS3 选择器）
HuoZhiyan 的博客
03-26 8304
css3 选择器。慢慢练习，慢慢理解~
常用的CSS3选择器
fantasy_geek的博客
03-05 3324
常用的CSS选择器 CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。 伪选择器比较特殊，分为伪元素和伪类元素两种。 一、属性选择器 1.E[att^=value]属性选择器 E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配...
CSS的选择器
最新发布
weixin_65317510的博客
07-22 6340
6种选择器：基本选择器、复合选择器、关系选择器、属性选择器、伪类选择器、伪元素选择器。
CSS选择器
weixin_43073401的博客
11-19 3074
例如E:first-child,找的是E元素，E元素必须是他的父元素的第一位元素。​ [attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。后代选择器包含的是其后代的所有元素,所以子元素，子元素的子元素，子元素的…（1）伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树以外的元素。（3）:hover当鼠标悬浮在元素上方时，向元素添加样式（链接或任意元素）（4）:active向被激活的元素添加样式（链接或任意元素）
让IE可以变相支持CSS3选择器
12-10
- **cssQuery**：由Dean Edwards开发的JavaScript库，全面支持CSS选择器，包括CSS3，提供了独立的CSS1、CSS2、CSS3和全集版本。通过cssQuery，可以在IE中动态添加样式名以模拟CSS3选择器的效果。 示例代码： ```...
CSS3 选择器 属性选择器介绍
12-13
从上一节展示的CSS3选择器的图表中，我们可以知道，CSS3的属性选择器主要包括以下几种： E[attr]：只使用属性名，但没有确定任何属性值； E[attr="value"]：指定属性名，并指定了该属性的属性值； E[attr~="value"]...
CSS3 选择器 基本选择器介绍
12-13
那么从现在开始我们先丢开他们版本的区别，从头一起来看看CSS选择器的运用。 CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就...
详解CSS3选择器的使用方法汇总
12-13
一 通用选择器1 *{}通配选择符(CSS2)：适合所有...CSS3新增的通用选择器：同级元素通用选择器：1 通用选择器E~F{}：匹配的是E元素之后的同级F元素匹配E后边所有的F，EF同级。只要F在E的后边，E只是作为一个参考。E~
CSS基础（样式声明、引用（行内样式、内部样式、外部样式、导入样式）、样式优先级）
拾Miss~博客
03-15 7792
目录 什么是CSS 为什么使用css css样式规则 css引用（行内、内部、外部link链入、导入式@import） css三种使用方法的区别 ***网页三大元素*** ***什么是CSS*** ***为什么使用css*** css样式中 不区分大小写 ***css样式规则*** ***css引用（行内、内部...
HTML表单（form、input、select、textarea标签）
拾Miss~博客
03-13 5511
目录 HTML表单 下拉菜单/列表 ***HTML表单** ***<input>标签** <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&g...
css3转换（transform属性---rotate() / translateX() / translateY() / translate(x,y) / scaleX()...）
拾Miss~博客
04-17 4186
目录 Transform（变形）属性 2D转换 rotate() 旋转 translate() 平移 scale() 缩放 skew() 扭曲/斜切 3D转换 rotate3d() translate3d()---增加了z轴方向平移 scale3d()---增加了z轴方向缩放 transform 与 坐标系统 css3矩阵 css3扩展属性 transfo...
css盒子模型、display属性
拾Miss~博客
03-21 1674
目录 高和宽设置 边框设置 内边距设置 外边距设置 盒子的计算 display属性 高和宽设置 【注意】：IE6以下不支持该max-width、min-width属性； 【总结】： 1、当元素的max-width < 外部元素的width，则元素只展示max-width宽度； 2、当元素的max-width > 外部元素的width，则依旧展示外部wi...
CSS3选择器详解与实战
"该资源是关于CSS3基本样式的习题及答案，涵盖了选择器的使用，包括通配符选择器、元素选择器、类选择器、ID选择器、后代选择器、子元素选择器、相邻兄弟元素选择器以及通用兄弟选择器。" 在CSS3中，选择器是定位...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值