css入门学习day02笔记

最新推荐文章于 2024-07-15 15:13:08 发布

Perryc

最新推荐文章于 2024-07-15 15:13:08 发布

阅读量304

点赞数 2

分类专栏： HTML基础文章标签： css css选择器 html html入门前端入门

本文链接：https://blog.csdn.net/Perryc/article/details/98474230

版权

HTML基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

各种选择器的详解

一、标签选择器

如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-标签选择器</title>
    <style>
        

        p{
            color: red;
        }
        h1{
            color: blue;
        }
    </style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<ul>
    <li>
        <ul>
            <li>
                <ul>
                    <li>
                        <p>我是段落</p>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<h1>我是标题</h1>
</body>
</html>

1.什么是标签选择器?
作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
格式:

 标签名称
 {
   	 属性:值; 
 }

注意点:
1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
2.标签选择器无论标签藏得多深都能选中
3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…)

二、id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-id选择器</title>
    <style>
        #identity1{
            color: red;
        }
        #identity2{
            color: green;
        }
        #identity3{
            color: blue;
        }
        #identity4{
            color: yellow;
        }
    </style>
</head>
<body>

<p id="identity1">迟到毁一生</p>
<p id="identity2">早退穷三代</p>
<p id="identity3">按时上下班</p>
<p id="identity4">必成高富帅</p>
</body>
</html>

1.什么是id选择器?
作用: 根据指定的id名称找到对应的标签, 然后设置属性

格式:

  #id名称
  {
        属性:值;
  }

注意点:
1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
2.在同一个界面中id的名称是不可以重复的
3.在编写id选择器时一定要在id名称前面加上#
4.id的名称是有一定的规范的
4.1id的名称只能由字母/数字/下划线
a-z 0-9 _
4.2id名称不能以数字开头
4.3id名称不能是HTML标签的名称
不能是a h1 img input …
5.在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的

id选择器

三、类选择器

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-类选择器</title>
    <style>
        .pp{
            color: red;
        }
        .ppp{
            color: green;
        }
        .pppp{
            color: blue;
        }
        .ppppp{
            color: yellow;
        }
        .para1{
            font-size: 100px;
        }
        .para2{
            font-style: italic;
        }
    </style>
</head>
<body>

<p class="pp">迟到毁一生</p>
<p class="ppp">早退穷三代</p>
<p class="pppp">按时上下班</p>
<p class="ppppp">必成高富帅</p>

<p class="para1 para2">我是段落</p>
<p class="para1 para2">我是段落</p>

</body>
</html>

1.什么是类选择器?
作用: 根据指定的类名称找到对应的标签, 然后设置属性

格式:

类名
{
     属性:值;
}

注意点:
1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
2.在同一个界面中class的名称是可以重复的
3.在编写class选择器时一定要在class名称前面加上.
4.类名的命名规范和id名称的命名规范一样
5.类名就是专门用来给CSS设置样式的
6.在HTML中每个标签可以同时绑定多个类名
格式:
<标签名称 class=“类名1 类名2 …”>
错误的写法:

类选择器

四、逗号选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-并集选择器(逗号选择器)</title>
    <style>
        /*
        .ht{
            color: red;
        }
        .para{
            color: red;
        }
        */
        .ht,.para{
            color: red;
        }
    </style>
</head>
<body>

<h1 class="ht">我是标题</h1>
<p class="para">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>

1.什么是并集选择器?
作用: 给所有选择器选中的标签设置属性

格式:

选择器1,选择器2
{
    属性:值;
}

注意点:
1.并集选择器必须使用,来连接
2.选择器可以使用标签名称/id名称/class名称

逗号选择器

五、组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-交集选择器(组合选择器)</title>
    <style>
        /*
        p.para1{
            color: red;
        }
        */
        .para1#identity{
            color: blue;
        }
    </style>
</head>
<body>

<p>我是段落</p>
<p>我是段落</p>
<p class="para1" id="identity">我是段落</p>
<p class="para1">我是段落</p>
<p>我是段落</p>
</body>
</html>

1.什么是交集选择器?
作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性

格式:

选择器1选择器2
{
    属性: 值;
}

注意点:
1.选择器和选择器之间没有任何的连接符号
2.选择器可以使用标签名称/id名称/class名称
3.交集选择器仅仅作为了解, 企业开发中用的并不多

组合选择器

六、通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-通配符选择器</title>
    <style>
        /*
        .cc{
            color: red;
        }
        */
        *{
            color: red;
        }
    </style>
</head>
<body>

<!--
<h1 class="cc">我是标题</h1>
<p class="cc">我是段落</p>
<a href="#" class="cc">我是超链接</a>
-->
<h1>我是标题</h1>
<p>我是段落</p>
<a href="#">我是超链接</a>

</body>
</html>

1.什么是通配符选择器?
作用: 给当前界面上所有的标签设置属性

格式:

*
{
    属性:值;
}

注意点:
由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器

通配符选择器

七、子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-子元素选择器</title>
    <style>
        /*
        div>p{
            color: red;
        }
        */
        /*
        #identity>p{
            color: blue;
        }
        */
        /*div>ul>li>p{
            color: purple;
        }*/
        div>p{
            color:red;
        }
    </style>
</head>
<body>

<!--div>ul>li>p-->
<p>我是段落</p>
<div id="identity">
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li><p>我是段落</p></li>
    </ul>
</div>
<p>我是段落</p>
</body>
</html>

1.什么是子元素选择器?
作用: 找到指定标签中所有特定的直接子元素, 然后设置属性

格式:

标签名称1>标签名称2
{
    属性:值;
}

先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

注意点:
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去

子元素选择器

八、后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-后代选择器</title>
    <style>
        /*
        div p{
            color: red;
        }
        */
        /*
        #identity p{
            color: red;
        }
        */
        /*
        .para p{
            color: blue;
        }
        */
        /*
        #identity #iii{
            color: skyblue;
        }
        */
        /*
        #identity .ccc{
            color: purple;
        }
        */
        div ul li p{
            color: red;
        }
    </style>
</head>
<body>

<!--div ul li p-->
<p>我是段落</p>
<div id="identity" class="para">
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li>
            <!--<p id="iii" class="ccc">我是段落</p>-->
            <p>我是段落</p>
        </li>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
</div>
<p>我是段落</p>
</body>
</html>

1.什么是后代选择器?
作用: 找到指定标签的所有特定的后代标签, 设置属性

格式:

标签名称1 标签名称2
{
    属性:值;
}

先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性
div p{}

注意点:
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.后代选择器可以通过空格一直延续下去

后代选择器

九、兄弟选择器

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-兄弟选择器</title>
    <style>
        /*
        h1+p{
            color: red;
        }
        */
        h1~p{
            color: green;
        }
    </style>
</head>
<body>

<!--
<h1>我是标题</h1>
<a href="#">我是超链接</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
-->
<h1>我是标题</h1>
<a href="#">我是超链接</a>
<p>我是段落</p>
<p>我是段落</p>
<a href="#">我是超链接</a>
<p>我是段落</p>

<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>

1.相邻兄弟选择器 CSS2
作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性

格式:

选择器1+选择器2
{
    属性:值;
}

注意点:
1.相邻兄弟选择器必须通过+连接
2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

2.通用兄弟选择器 CSS3
作用: 给指定选择器后面的所有选择器选中的所有标签设置属性

格式:
选择器1~选择器2{
属性:值;
}

注意点:
1.通用兄弟选择器必须用~连接
2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

兄弟选择器

十、子孙选择器

1.后代选择器和子元素选择器之间的区别?

1.1
后代选择器使用空格作为连接符号
子元素选择器使用>作为连接符号
1.2
后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子…, 只要是被放到指定标签中的特定标签都会被选中
子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签

2.后代选择器和子元素选择器之间的共同点

2.1
后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
2.2
后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
选择器1>选择器2>选择器3>选择器4{}

3.在企业开发中如何选择

如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

十一、属性选择器（上）


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-属性选择器上</title>
    <style>
        /*
        p[id]{
            color: red;
        }
        */
        p[class=cc]{
            color: blue;
        }
    </style>
</head>
<body>
1.什么是属性选择器?
作用: 根据指定的属性名称找到对应的标签, 然后设置属性

格式:
[attribute]
作用:根据指定的属性名称找到对应的标签, 然后设置属性

[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性
<--input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
-->
<p id="identity1">我是段落1</p>
<p id="identity2" class="cc">我是段落2</p>
<p class="cc">我是段落3</p>
<p id="identity3" class="para">我是段落4</p>
<p>我是段落5</p>

</body>
</html>

1.什么是属性选择器?
作用: 根据指定的属性名称找到对应的标签, 然后设置属性

格式:

[attribute]

作用:根据指定的属性名称找到对应的标签, 然后设置属性

[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性

属性选择器

十二、属性选择器（下）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-属性选择器下</title>
    <style>
        /*
        img[alt^=abc]{
            color: red;
        }
        */
        /*
        img[alt|=abc]{
            color: red;
        }
        img[alt$=abc]{
            color: blue;
        }
        */
        /*
        img[alt*=abc]{
            color: red;
        }
        */
        img[alt~=abc]{
            color: red;
        }
    </style>
</head>
<body>
<!--
<img src="" alt="abcdef">
<img src="" alt="abc-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
<img src="" alt="qq">
<img src="" alt="yy">
-->

<img src="" alt="abcwwwmmm">
<img src="" alt="wwwmmmabc">
<img src="" alt="wwwabcmmm">
<img src="" alt="www-abc-mmm">
<img src="" alt="www abc mmm">
<img src="" alt="qq">

</body>
</html>

1.属性的取值是以什么开头的
[attribute|=value] CSS2
[attribute^=value] CSS3
两者之间的区别:
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开

2.属性的取值是以什么结尾的
[attribute$=value] CSS3

3.属性的取值是否包含某个特定的值得
[attribute~=value] CSS2
[attribute*=value] CSS3
两者之间的区别:
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到

属性选择器2

十三、序选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-序选择器</title>
    <style>
        .para:only-of-type {
            color: red;
        }
    </style>
</head>
<body>

<!--
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
    <p>我是段落5</p>
    <p>我是段落6</p>
    <p>我是段落7</p>
    <p>我是段落8</p>
</div>
-->
<p class="para">我是段落1</p>
<div>
    <p class="para">我是段落2</p>
    <p class="para">我是段落2</p>
    <h1>我是标题</h1>
</div>
</body>
</html>

CSS3中新增的选择器最具代表性的就是序选择器

1.同级别的第几个

:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签

注意点: 不区分类型

2.同类型的第几个

:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签

序选择器

十四、伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>15-伪类选择器</title>
		<style type="text/css">
			/*
			 * 伪类专门用来表示元素的一种的特殊的状态，
			 * 	比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框
			 * 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
			 */
			
			/*
			 * 为没访问过的链接设置一个颜色为绿色
			 * 	:link
			 * 		- 表示普通的链接（没访问过的链接）
			 */
			a:link{
				color: yellowgreen;
			}
			
			/*
			 * 为访问过的链接设置一个颜色为红色
			 * 	:visited
			 * 		- 表示访问过的链接
			 * 
			 * 浏览器是通过历史记录来判断一个链接是否访问过,
			 * 	由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
			 * 
			 */
			a:visited{
				color: red;
			}
			
			/*
			 * :hover伪类表示鼠标移入的状态
			 */
			a:hover{
				color: skyblue;
			}
			
			/*
			 * :active表示的是超链接被点击的状态
			 */
			a:active{
				color: black;
			}
			/*
			 * :hover和:active也可以为其他元素设置
			 */
			/*p:hover{
				background-color: yellow;
			}
			
			p:active{
				background-color: orange;
			}*/
			/*
			 * 文本框获取焦点以后，修改背景颜色为黄色
			 */
			input:focus{
				background-color: yellow;
			}	
			/**
			 * 为p标签中选中的内容使用样式
			 * 	可以使用::selection为类
			 * 	注意：这个伪类在火狐中需要采用另一种方式编写::-moz-selection
			 */
			/**
			 * 兼容火狐的
			 */
			p::-moz-selection{
				background-color: orange;
			}
			/**
			 * 兼容大部分浏览器的
			 */
			p::selection{
				background-color: orange;
			}
			
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">访问过的链接</a>
		<br /><br />
		<a href="http://www.baidu123456.com">没访问过的链接</a>
		<p>我是一个段落</p>
		<!-- 使用input可以创建一个文本输入框 -->
		<input type="text" />	
	</body>
</html>

注释对应代码
伪类选择器

十五、伪元素选择器

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>16-伪元素</title>
		<style type="text/css">
			/*
			 * 使用伪元素来表示元素中的一些特殊的位置
			 */
			/*
			 * 为p中第一个字符来设置一个特殊的样式
			 */
			
			/* p::first-letter {
				color: red;
				font-size: 20px;
			} */
			/*
			 * 为p中的第一行设置一个背景颜色为黄色
			 */
			
			/* p::first-line {
				background-color: yellow;
			} */
			
			/*
			 * ::before表示元素最前边的部分
			 * 	一般before都需要结合content这个样式一起使用，
			 * 	通过content可以向before或after的位置添加一些内容
			 * 
			 * ::after表示元素的最后边的部分
			 */
			p::before{
				content: "我会出现在整个段落的最前边";
				color: red;
			}
			
			p::after{
				content: "我会出现在整个段落的最后边";
				color: orange;
			}
			p::selection{
				color: blue;
			}
		</style>
	</head>

	<body>
		<p>
			在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。
		</p>
	</body>

</html>

伪元素选择器