CSS选择器

helloses

已于 2022-03-24 18:41:12 修改

阅读量288

点赞数

分类专栏： CSS 前端文章标签：前端 css3 css

于 2022-03-22 10:14:29 首次发布

本文链接：https://blog.csdn.net/lm12032015/article/details/123652705

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

选择器按照权重,从前到后执行

权重相同时,后面的会覆盖前面的

选择器:选择HTML(DOM树)上的某一个元素

基本选择器

标签选择器,选择器可以组合使用

/*
	*是全选所有内容(一般初始化页面的内外边距:浏览器默认有8px的margin)
*/
*,ul,li{
          margin: 0px;
          padding: 0px;
          font-size: 12px;
          list-style: none;
      }

margin
我们可以在浏览器控制台事先修改好数值,再直接粘贴到代码中

2. 类选择器和id选择器:给标签分类,提高复用
id是#,类是.
id应保证全局唯一

#nav{
    width: 100%;
    height: 36px;
    background: rgba(245,245,245,0.5);
}
.nav{
    width: 100%;
    height: 36px;
    background: rgba(245,245,245,0.5);
}

层次选择器

看到代码时脑子里就有结构图

<body>

  <ul></ul>
  <dl></dl>
  <ul>
    <li></li>
    <li></li>
  </ul>

</body>

后代选择器:父子{ 作用于所有的子类上,比如爷爷下面的所有儿子,爸爸和孙子都可以作用 }

body ul{
 	width: 100px;
    height: 100px;
    background: #33c900;
 }

<ul>yes</ul>

<ul id="ul">host,yes</ul>

<ul>yes</ul>
<dl>
  <ul>yes</ul>
</dl>

<ul>yes</ul>
<ul>yes</ul>

后代直接选择器:父 + 子{ 必须是父类下面的第一个子类,只能作用于儿子 }

body > ul{
     width: 100px;
     height: 100px;
     background: #33c900;
 }
<ul>yes</ul>

<ul id="ul">host,yes</ul>

<ul>yes</ul>
<dl>
  <ul>no</ul>
</dl>

<ul>yes</ul>
<ul>yes</ul>

相邻兄弟选择器:子 + 兄:对下不对上(只往下找,不往上找),且只找一个

#ul + ul{
        width: 100px;
        height: 100px;
        background: #33c900;
    }
<ul></ul>

<ul id="ul"></ul>

<ul>只有这一行作用</ul>
<ul>
  <ul></ul>
</ul>

通用兄弟选择器:子 ~ 兄:向下所有的,兄弟级(同级别 )元素

#ul ~ ul{
	width: 100px;
	height: 100px;
	background: #33c900;
}

<ul>无效</ul>

<ul id="ul">主,但无效</ul>

<ul>只有这一行作用</ul>
<dl>
  <ul>无效</ul>
</dl>

<ul>有效</ul>
<ul>有效</ul>

结构伪类选择器:带:号的都是伪类选择器

按位置查找:ul:nth-child(2):

先找到ul的父级,再往下找,第二个出现的,且必须是ul元素
first-child和last-child同理,一个是第一个,和最后一个

ul:nth-child(2){
  width: 100px;
   height: 100px;
   background: #33c900;
}

<body>

  <ul>1</ul>

  <ul id="ul">只有这个作用</ul>

  <ul>u2</ul>
  <dl>
    <ul>这个是父级dl的第一个,所有没有作用</ul>
  </dl>

  <ul>u4</ul>

  <ul>u5</ul>

</body>

按元素查找:ul:nth-of-type(2)

先找到ul的父级,再往下找
找到第二个出现的ul标签

ul:nth-of-type(2){
 width: 100px;
  height: 100px;
  background: #33c900;
}

<ul id="ul">1</ul>

<ul>有作用</ul>

<ul>u4</ul>

<ul>u5</ul>

id+css=属性选择器

class可以有多个
除了标签名外都可以当属性
属性值可以写正则表达式
font组合写时,字体大小后面就是行高

class属性值只要包含4就可以

ul[class*="4"]{
  width: 100px;
  height: 100px;
  background: #33c900;

  /*字体,粗细,大小/行高*/
  font:italic bold 12px/25px none;
}
<ul class="ul1 ul2 ul3">1</ul>

<ul class="ul4 ul1">有作用</ul>

<ul>u4</ul>

<ul class="ul4">有作用</ul>

^=“ul”(以ul开头),$=“4”(以4结尾)

ul[class$="4"]{
 width: 100px;
  height: 100px;
  background: #33c900;

  /*字体,粗细,大小/行高*/
  font:italic bold 12px/25px none;
}
<ul class="ul1 ul2 ul3">1</ul>

<ul class="ul4 ul1">没有作用</ul>

<ul>u4</ul>

<ul class="ul4">有作用</ul>