• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

css子选择器继承父选择器，CSS中有哪些常用选择器_CSS学习

当前位置：网站建设 > 技术支持

1、css子选择器继承父选择器，CSS中有哪些常用选择器？

一、CSS选择器有哪些

CSS中的选择器很多，比如：ID选择器，类选择器，通配符选择器，伪类选择器等等，接下来主要介绍常用的几个。

1.标签选择器

语法：标签名{}，eg：h1{}//为所有的h1元素设置样式。

2.ID选择器

语法：#id名{}//id值唯一不能重复,eg:#top{}//为id为top的元素设置样式。

3.类选择器

语法：.class{},eg：.box{}//为所有的class值为box的元素设置样式。

4.组选择器

语法：选择器1，选择器2，选择器N{},eg:#box1,.box2,p{}//为id为box1，class为box2和p的元素共同设置样式。

5、通配符选择器

语法：*{}，eg：*{font-size：16px}//将整个页面字体大小设为16px。

6.后代选择器

语法：选择器1选择器2{}，eg：p.aa{}//选中指定祖先元素p的指定后代.aa。

7.子元素选择器

语法：父元素>子元素{},eg：p>.box{}//选中父元素p的指定子元素.box。注意与后代元素选择器的区别

8.伪类选择器

伪类可以用来表示一些特殊的状态,如：

：link-未访问过的超链接。

：visited-已访问过的超链接。

：hover-鼠标经过的元素。

：active-正在点击的元素。

eg：a:hover{color:red}//鼠标经过a标签时，颜色变为红色。

二、CSS选择器的优先级顺序

当同一属性的不同值都作用到了同一个元素时，如果定义的属性之间有冲突，那么应该用谁的值的，这个时候就涉及到CSS的优先级顺序了。

1.在属性后面使用!important会覆盖页面内任何位置定义的元素样式。

2.作为style属性写在元素内的内部样式

3.id选择器

4.类选择器

5.标签选择器

6.通配符选择器

7.浏览器自定义或继承的

2、四路选择器功能表？

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

HTML页面中的元素就是通过CSS选择器进行控制的。

1.1 类别选择器

类选择器根据类名来选择

前面以”.”来标志，如：

.demoDiv{

color:#FF0000;

}

在HTML中，元素可以定义一个class的属性。

如：

<div class="demoDiv">

这个区域字体颜色为红色

</div>

同时，我们可以再定义一个元素：

<p class="demoDiv">

这个段落字体颜色为红色

</p>

最后，用浏览器浏览，我们可以发现所有class为demoDiv的元素都应用了这个样式。包括了页面中的div元素和p元素。

上例我们给两个元素都定义了class，但如果有很多个元素都会应用这个元素，那得一个个的定义元素，就会造成页面重复的代码太多，这种现象称为“多类症”。

我们可以改成这样来定义。

<div class="demoDiv">

<div>

这个区域字体颜色为红色

</div>

同时，我们可以再定义一个元素：

<p>

这个段落字体颜色为红色

</p>

</div>

这样，我们就只是定义了一个类，同时把样式应用到了所有的元素当中。

1.2 标签选择器

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签

采用相应的CSS样式，(在大环境中你可能出于不同的位置，但是不管怎么样，你总

是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里

都是这身衣服)比如，在style.css文件中对p标签样式的声明如下：

p{

font-size:12px;

background:#900;

color:090;

}

复制代码则页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色)

，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改

background属性就可以了，就这么容易！

1.3 ID选择器

根据元素ID来选择元素，具有唯一性。

前面以”#”号来标志，在样式里面可以这样定义：

#demoDiv{

color:#FF0000;

}

这里代表id为demoDiv的元素的设置它的字体颜色为红色。

我们在页面上定义一个元素把它的ID定义为demoDiv，如：

<div id="demoDiv">

这个区域字体颜色为红色

</div>

用浏览器浏览，我们可以看到因为区域内的颜色变成了红色

再定义一个区域

<div>

这个区域没有定义颜色

</div>

用浏览器浏览，与预期的一样，区域没有应用样式，所以区域中的字体颜色还是默认的颜色黑色。

1.4 后代选择器

后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，后代选择器用两个常用选择器，中间加一个空格表示。其中前面的常用选择器选择父元素，后面的常用选择器选择子元素，样式最终会应用于子元素中。

如：

<style>

.father.child{

color:#0000CC;

}

</style>

<p class="father">

黑色

<label class="child">蓝色

<b>也是蓝色</b>

</label>

</p>

这里我们定义了所有class属性为father的元素下面的class属性为child的颜色为蓝色。

后代选择器是一种很有用的选择器，使用后代选择器可以更加精确的定位元素。

3、father在css中是父元素吗？

father表示父亲，它是父元素。

4、子类中能不能继承父类的私有变量和方法吗吗？

子类可以继承父类的私有成员变量，但不可以直接访问私有成员。

子类是可以继承父类所有可见性成员的。

对于java而言，java官方文档对这一方面的解释是子类不能继承父类的私有属性，但是如果子类中的公有方法影响到了父类的私有属性，那么私有属性是能够被子类使用的。

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。