CSS3起步 02-------css3选择器

最新推荐文章于 2024-03-09 13:40:17 发布
最新推荐文章于 2024-03-09 13:40:17 发布
阅读量302 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h1234561234561/article/details/85854623
版权

基本选择器：
css3选择器中存在着九种基本选择器，通配符选择器；元素选择器；类选择器；id选择器；后代选择器；子代选择器；相邻兄弟选择器；通用兄弟选择器和群组选择器。现在一一记录…

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,inital-scale=1.0,minimun-scale=1.0,maximun-scale=1.0" />
		<title>css3选择器-----基本选择器</title>
		<style>
			
			/* 通配符选择器 */
			*{
				margin: 0px;
				padding: 0px;
			}
			
			/* 元素选择器 */
			ul{
				list-style: none;
			}
			
			li{
				width: 30px;
				height: 30px;
				color: brown;
				display: inline-block;
				border-radius: 100%;
				-webkit-border-radius: 100%;
				background-color: #FFE4C4;
			}
			
			/* 类选择器 */
			.demo{
				width: 500px;
				margin: 200px auto;
				border: 2px solid #A52A2A;
			}
			
			.firstli{
				color: #FF0000;
				background-color: aqua;
			}
			
			/* id选择器 */
			#seconodli{
				color: white;
				background-color: black;
			}
			
			/* 后代选择器 */
			.demo i{
				width: 30px;
				height: 30px;
				color: sandybrown;
				display: inline-block;
				border-radius: 100%;
				-webkit-border-radius: 100%;
				background-color: green;
			}
			
			/* 子代选择器 */
			.demo>i{
				width: 30px;
				height: 30px;
				color: white;
				border-radius: 100%;
				-webkit-border-radius: 100%;
				background-color: black;
			}
			
			/* 相邻兄弟选择器 */
			#seconodli + li{
				width: 30px;
				height:30px;
				color: white;
				border-radius: 100%;
				-webkit-border-radius: 100%;
				background-color: black;
			}
			
			/* 通用兄弟选择器 */
			.eighthli ~ li{
				width: 30px;
				height: 30px;
				color: white;
				border-radius: 100%;
				-webkit-border-radius: 100%;
				background-color: blue;
			}
			
			/* 群组选择器 */
			.sixthli,.seventhli{
				width: 30px;
				height: 30px;
				color: red;
				border-radius: 100%;
				-webkit-border-radius: 100%;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<ul>
				<li class="firstli">1</li>
				<li id="seconodli">2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li class="sixthli">6</li>
				<li class="seventhli">7</li>
				<li class="eighthli">8</li>
				<li>9</li>
				<i>10</i>
			</ul>
			<i>1</i>
			<i>2</i>
			<i>3</i>
		</div>
	</body>

</html>

运行截图：
在这里插入图片描述
1，通配符选择器：选择所有元素，，也可以选择某个元素下的所有元素。
2，元素选择器：选择html中的所有相同元素(包括JavaScript)，这里是ul和li
3，类选择器：通过.class选择所属元素
4，id选择器：通过#id选择所属元素
5，后代选择器：选择某父类下所以后代，儿子，孙子，曾孙子等等等这里是.demo下的所有i元素
6，子代选择器：选择某父类下所有的儿子这里是是.demo下的所有儿子i元素
7，相邻兄弟选择器：选择某元素最大的弟弟，处于同一父类中，这里是#seconodli + li
8，通用兄弟选择器：选择某元素所有的弟弟处于同一父类中，这里是.eighthli ~ li
9，群组选择器：同时选用多个selectors，这里是.sixthli,.seventhli注意一定要逗号。

属性选择器
伪类选择器
适用于链接，遵循爱恨准则Link--visited--hover--active如果顺序错乱，则失效。
菜鸟爬行中…

燃情雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css后代选择器和子选择器的区别介绍
09-25
css后代选择器和子选择器的区别:用法不同,兼容性,所达到的效果不同等等，需要了解的朋友可以参考下
神通广大的CSS3选择器
weixin_30932215的博客
05-13 162
每个前端工程师可能每天都会写一些css，其中选择器是很主要的一部分。但是，大家可能每天写的大多是#id,.class这样的选择器，这并不稀奇，但是如果我们了解并且熟用css3为我们提供的强大并且优雅的选择器，就可以简化我们的代码。 我在学习和整理css3的选择器的时候都不会去考虑它的浏览器的支持程度，如果有需要，可以在这里查看它的浏览器支持情况：「caniuse.com」。 文章目录： ...
CSS中的常见选择器
最新发布
Java 技术专栏，从入门到精通，熟悉企业级开发
03-09 2027
本文介绍了CSS中的常见选择器，选择器的出现可以让我们实现对具体的元素标签进行定制，因此我们要掌握好各类选择器的使用。
css3选择器
katsuki_chan的博客
03-29 484
css3选择器、选择器权重
CSS3选择器——基本选择器
anze0204的博客
11-24 194
CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。我把CSS选择器分开成三部分，第一部分是我们常用的部分，我把他叫做基本选择器；第二部分我把他称作是属性选择器，第三部分我把他称作伪类选...
CSS3之选择器
m0_57752092的博客
04-28 1459
一、层级选择器 <style> /* +当前元素后面的第一个兄弟*/ .child+li{ background-color: aqua; } /* ~当前元素后面的所有兄弟 */ .child~li{ background-color: antiquewhite; }
CSS3的first-child选择器实战攻略
09-24
主要介绍了CSS3的first-child选择器实战攻略,包括first-child和:first-of-child的区别以及针对IE兼容问题的讲解,需要的朋友可以参考下
详解CSS3中border-image的使用
09-25
主要介绍了详解CSS3中border-image的使用,是CSS3入门学习中的基础知识,需要的朋友可以参考下
EWN-8822CSS3AH
11-15
EWN-8822CSS3AH
CSS3 伪类选择器 nth-child()说明
09-25
CSS3标准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，今天我们就来“前瞻”一下CSS3的一个伪类选择器“nth-child()”。
CSS3使用border-radius属性制作圆角
09-25
主要介绍了CSS3使用border-radius属性制作圆角，并附上示例代码，推荐给有相同需求的小伙伴。
css3 选择器
weixin_46383294的博客
03-01 165
css3增加了很多内容，其中增加的选择器就分为属性选择器、结构性伪类选择器、层级选择器。 一、属性选择器： 1、选择符[属性名]{ } 只要带有当前属性名的都会被选中。 2、选择符[属性名=”属性值”] 不仅指定属性名，还指定了属性值，只有都符合时才会被选中。 3、选择器[属性名~=”属性值”] 属性值为一个词列表，只要有当前属性名就可以选中。 4、选择器[属性名^=”属性值”] 属...
CSS简介与选择器
wwh71430的博客
08-31 234
CSS简介与选择器 1.CSS简介 什么是CSS CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。 HTML和CSS之间的关系？ HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 HT
css3中常见的30个选择器
大董的博客
12-30 3315
1 *：通用选择器 * { margin:0; padding:0; } *选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除浏览器默认样式的方法。 *选择器也可以应用到子选择器中，例如下面的代码： #container * { border:1px solid black; } 这样ID
CSS的选择器
2302_76643111的博客
05-16 3796
总结CSS中常见的选择器
CSS 选择器
m0_37623485的博客
03-24 512
CSS选择器用于选择你想要的样式作用于哪些元素CSS选择器分为：1、类别选择器根据类名来选择，以 . 开头例：&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="Ed
css选择器
weixin_52474204的博客
04-19 316
css选择器 选择器具有以下几个要素: 层叠性、在同一权重值之下同一元素的代码，后面的样式会覆盖前面的样式。 继承性：给父元素设置样式时，子元素也会有相关的样式。 优先级:比较权重值（！important>行内样式>id选择器（100）>class选择器(10)>标签选择器（1） 取id或者class类名可以是英文数字下划线的组合，但是不可以用数字开头! 通配符选择器： *{ margin: 0; /* 给页面所有的元素加上这个样式，包括html*/ padding: 0; }
css选择器nth-last-child
08-11
:nth-last-child() 是一个 CSS 伪类选择器，用于选择父元素下的倒数第 n 个子元素。它的语法如下： ```css :nth-last-child(n) ``` 其中，n 是一个整数，表示要选择的倒数第几个子元素。 举个例子，如果我们有一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值