美文网首页
常见选择器、子元素和后代子元素选择器

常见选择器、子元素和后代子元素选择器

作者: 栀心_d553 | 来源:发表于2020-01-13 12:59 被阅读0次

1、元素选择器


图片.png

2、id选择器


QQ截图.png
3、类选择器(可以同时设置两个class,中间用空格隔开 )
<div  class =  " aa   abc " >我是一个盒子</div> 可以有两个class标签
QQ截图11.png

4、选择器分组(并集选择器)


QQ截图2.png

5、通配选择器(一般在消除浏览器自身样式时使用)


QQ截图3.png
QQ截图a.png
  消除浏览器自带样式
  *{
    margin: 0;
    padding: 0;
}

6、复合选择器


qq1.png

子元素和后代子元素选择器

子元素:指的是子元素的后代
后代子元素:直接子元素(第一个子元素)
兄弟元素:拥有同一个父元素的元素


元素.png

后代子元素如何选择?

后代选择器.png
效果.png

后代子元素如果重复怎么选择?

后.png

如何给直接儿子(子元素)设置样式?

QQ截图20200117120103.png

效果

QQ截图20200117120300.png

相关文章

  • 常见选择器、子元素和后代子元素选择器

    1、元素选择器 2、id选择器 4、选择器分组(并集选择器) 5、通配选择器(一般在消除浏览器自身样式时使用) 6...

  • html 子选择器

    一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。

  • CSS的子选择器与后代选择器的区别

    子选择器: 一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中...

  • CSS3选择器

    一、基本选择器 子元素选择器 概念:子元素选择器只能选择某元素的子元素语法格式:父元素 > 子元素 (Father...

  • 后代选择器和子元素选择器的区别

    原文 博客原文 大纲 1、后代选择器和子元素选择器的相关概念2、后代选择器和子元素选择器的区别 1、后代选择器和子...

  • CSS选择器详解

    元素选择器 类选择器 ID选择器 属性选择器 派生选择器 1. 元素选择器 最常见css选择器当属元素选择器,在H...

  • css选择器详解

    元素选择器 类选择器 ID选择器 属性选择器 派生选择器 元素选择器 最常见的css选择器当属元素选择器了,在HT...

  • 2020-01-12

    css选择器 子代选择器:空格、> 空格:选择父元素内所有子元素 >:选择直属父元素的子元素 兄弟选择器:+、~ ...

  • react 开发实战

    CSS:选择器用法:.类名 //类选择器 id名 //id 选择器 .类名 元素名 //后代选择器,包含子元素和子...

  • 四类选择器的区别:后代、子选择器、相邻兄弟、后代兄弟

    后代选择器与子选择的关系:后代选择器>子选择器。 后代选择器:包括父元素的子元素以及孙子元素(代表符合:空格) 子...

网友评论

      本文标题:常见选择器、子元素和后代子元素选择器

      本文链接:https://www.haomeiwen.com/subject/brvgactx.html