CSS选择器以及CSS级联、CSS外边距合并问题

CSS选择器day01

一、

标签选择器

又称为元素选择器,文档的元素就是最基本的选择器。
如:
P{ border:1px solid red; }

类选择器

以点’’."开头,后面紧跟类名。类名不允许有空格,与元素中class属性的值保持一致。
.one{ border:1px solid red; }

ID选择器

以#开头,后面紧跟一个ID名,ID不能重复,在选择唯一的元素的时候比较有用。
#two{ border:2px dashed blue; }

普遍选择器

使用"*"来表示普遍选择器,表示选择所有元素,通常用在组合选择器中。
*{ margin:0; padding:0; }

层次选择器
1、后代选择器

使用" "空格来隔开两个选择器,可包括子元素的子元素

2、子代选择器

使用">"来隔开两个选择器。只包括子元素。

3、相邻同胞选择器

使用 “+” 隔开两个选择器。例如 ".one+*"表示选择class为"one"元素的下一个兄弟元素。

4、一般同胞选择器

使用 “~” 隔开两个选择器。例如 ".one~*"表示选择class为"one"元素之后的所有兄弟 元素。

多选择器

使用","隔开
例如 “div,.one,#tt” 表示选择div元素,class为one的元素以及id为tt的元素

嵌套选择器

多个选择器嵌套使用。例如 “div.one” 表示class为one的div元素。

属性选择器
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        margin: 10px;
      }
      /* [title]选中有title属性的元素 
      [title=one]选中有title属性并且属性值为one的元素
      [title^=t]选中有title属性并且属性值为以t开头的元素
      [title$=e] 选中有title属性并且属性值为以e结尾的元素
      title*="o"] 选中有title属性并且属性值包含o的元素
      */
      /* div[title*="one"] {
        background-color: pink;
      } */
      /* class~="one"] 选中有class属性并且属性值中有一个是one的元素 */
      div[class~="one"] {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="one" title="one"></div>
    <div class="two" title="two"></div>
    <div class="one two" title="three"></div>
    <div></div>
  </body>
伪类选择器
1、子代元素相关的伪类元素选择器
:only-child  选择作为别人独生子的元素
:first-child 选择作为别人第一个孩子的元素
:last-child 选择作为比尔最后一个孩子的元素
:nth-child(n) 选择作为别人第n个孩子的元素
:nth-last-child(n) 选择作为别人倒数第n个孩子的元素
:first-of-type 选择作为别人每种类型中的第一个孩子 
:last-of-type 选择作为别人每种类型的倒数第一个孩子
:nth-of-type(n) 选择作为别人每种类型中的第n个孩子
:nth-last-of-type(n) 选择作为别人每种类型中的倒数第n个孩子
2、元素状态相关伪类元素选择器
 :link   未被访问的状态,a标签
 :visited    已访问过的状态,a标签
 :hover	鼠标悬停的状态,a标签,其他标签也可用
 :active	活动的状态, a标签,其他标签也可用
 
  /* 必须按照顺序 lvha */
  /* 设定a标签未被访问的时候的样式 */
  a:link {
    color: gray;
  }
  /* a标签访问过后的样式 */
  a:visited {
    color: burlywood;
  }
  /* a标签悬停状态的样式 */
  a:hover {
    color: chartreuse;
  }
  /* a标签点击、活动状态 */
  a:active {
    color: darkorange;
  }


 :focus	聚焦的状态 
 :checked	用户选中的单选按钮和复选按钮
 :default	默认选中的单选按钮和复选按钮
 :enabled、 :disabled 可用的表单控件、禁用的表单控件 l :valid 、:invalid 通过验证的、不通过验证的
 :required、:optional 必填的和选填的
 :in-range 、:out-of-range 在范围内的、在范围外的
:checked
/* 选中默认选中的单选按钮或者复选按钮,设置外边线outline */
  input[type="radio"]:default {
    outline: 2px solid red;
  }
  /* 选中用户选中的单选按钮或者复选按钮,设置外边线outline */
  input[type="radio"]:checked {
    /* border边框占据屏幕空间
      outline外边线不占据屏幕空间 */
    outline: 2px solid cornflowerblue;
  }
  <body>
   <form action="#">
  <input type="radio" checked name="gender" />男
  <input type="radio" name="gender" />女<br />
  <input type="number" name="" id="" max="100" min="0" step="10" />
</form>
</body>
伪元素选择器

伪元素以"::"开头,用在选择器后,用于选择指定的元素。

::after	选中之后的不存在的节点,可配合content属性进行内容填充
::before	选中之前的不存在的节点,可配合content属性进行内容填充
::first-letter 	选中第一个文本字符
::first-line	选中第一行文本
::selection		选中用户在选择的时候的文本
优先级
就近原则
错误:行内样式表>内部样式表>外部样式表

CSS级联(CSS样式谁生效)

1.!important 修饰的最优先
2.选择器特性值大的优先
    行内样式表特性值 1000
    ID选择器特性值   100
    类选择器、属性选择器、伪类选择器特性值    10
    标签选择器、伪元素选择器特性值   1
    空格、>、+、~、* 都是0
3.特性值如果一样,那么采取就近原则

CSS外边距合并问题

块级元素垂直方向合并
毗邻元素外边距合并问题
兄弟元素之间上下外边距区域如果发生了重叠,谁大用谁的
父子元素之间,父有上边距,子有上边距,上边距合并,谁大用谁的
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值