CSS3 选择器——基本选择器

CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器。那么从现在开始我们先丢开他们版本的区别,从头一起来看看CSS选择器的运用。

CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器;第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器,这一部分也是最难理解和掌握的部分,今天我们先来看第一部分——基本选择器。我们先来看一个常用的选择器列表图

下面我们先看看上表中基本的选择器的使用方法和其所起的作用,为了更好的说明问题,先创建一个简单的DOM结构,如下:

			<div class="demo">
				<ul class="clearfix">
					<li id="first" class="first">1</li>
					<li class="active important">2</li>
					<li class="important items">3</li>
					<li class="important">4</li>
					<li class="items">5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
					<li id="last" class="last">10</li>
				</ul>
			</div>
		

给这个demo加上一些样式,让他好看一点

			.demo {
				width: 300px;
				border: 1px solid #ccc;
				padding: 10px;			
			}

 			li {
				float: left;
				height: 20px;
				line-height: 20px;
				width: 20px;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
				text-align: center;
				background: #f36;
				color: green;
				margin-right: 5px;
			}
		

初步效果如下所示:

一、通配符选择器(*)

通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素。如:

			*{
				marigin: 0;
				padding: 0;
			}
		

上面代码大家在reset样式文件中看到的肯定不少,他所表示的是,所有元素的margin和padding都设置为0,另外一种就是选择某个元素下的所有元素:

			.demo * {border:1px solid blue;}
		

效果如下;

从上面的效果图看,只要是div.demo下的元素边框都加上了新的样式。所有浏览器支持通配符选择器。

二、元素选择器(E)

元素选择器,是css选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素,如html,body,p,div等等,比如我们这个demo:中元素包括了div,ul,li等。

			li {background-color: grey;color: orange;}
		

上在表示选择页面的li元素,并设置了背景色和前景色,效果如下:

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/basic-selectors

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部