CSS入门(二)CSS选择器

版权声明:程序猴jwang版权所有 https://blog.csdn.net/qq_21046965/article/details/83757831

前言

       至于为什么要讲这个!后面学习JQuery的时候是肯定需要的!我还不如在这里先给大家打个基础!

方法

1.基本选择器

我们知道,当我们为HTML标签添加样式的时候,首先想到的是我要往哪个地方加啊!如果有多个相同的标签我该怎么办啊!这些都要靠JS选择器来进行实现!

1)标签选择器
    标签名{样式名1:样式值1;……}
    作用:会将当前网页内的所有该标签增加相同的样式

/*声明一个段落p样式,所有p标签均适用*/
p {
	color: red;
}

2)id选择器:
    #标签的id属性值{样式名1:样式值1;……}
    作用:给某个指定的标签添加指定的样式

例如:HTML标签中有一个id为test的p标签

<p id="test">我的段落</p>

则使用id选择器添加该标签样式为:(特别的:html中的id唯一表示一个标签,原则上不可以指定多个;若多个则均添加该样式)

#test {
	color: red;
}

3)类选择器:
    .类选择器名{样式名1:样式值1;……}
    作用:给不同的标签添加相同的样式

例如:HTML标签有一个class属性为test的p标签和b标签

<p class="test">我的段落</p>
<b class="test">加粗</b>

则使用类选择器添加样式为:

.test {
	color: red;
}

以上三种为最基本的选择器:

标签选择器一般用于一类标签的样式;id选择器一般用于一个标签的样式;类选择器用于一类标签的样式(即使它们的标签是不同的)

2.其他选择器

1)同时定义多个选择器样式,使用逗号分隔

例如:定义P标签、类属性为test的标签样式

.test,p {
	color: red;
}

2)定义子标签样式

语法:父标签  子标签 {样式内容}

例如:div标签下的p标签添加样式

<div><p>我的段落</p></div>
div p {
	color: red;
}

3)属性选择器

我们知道,有些时候我们需要标签元素的属性来定义该元素,如name属性

语法:标签名[属性名=属性值]

例如:name属性为test的div标签添加样式

<div name="test">我的段落</div>
div[name="test"] {
	color: red;
}

另外,还有其他特殊的选择器没有说明,我这里只是列举其中一些常用的选择器,初期使用足够了!

其他特殊的选择器我们讲解JQuery的时候在详细说明!

写后感:

其实,说白了CSS选择器的核心就是定位HTML中的元素位置,这一点尤为重要,尤其是在JQuery中将更加明显!

猜你喜欢

转载自blog.csdn.net/qq_21046965/article/details/83757831