CSS总结2-选择器

通配符选择器

找到页面中所有的标签，设置样式

语法

*{
    属性名:属性值
}

代码

 * {
        margin:0；
   }

####

复合选择器

后代选择器

后面的选择器是前面选择器的后代，选择器之间用空格隔开

.out .inner p {
  color: palevioletred;
}
<div class="out">
      <div>
        <div class="inner">
          <p>段落标记</p>
        </div>
      </div>
    </div>

子代选择器

后面选择器是前面选择器的儿子，选择器之间用 > 隔开

.out > .one > .inner {
  width: 100px;
  height: 100px;
  
}
   <div class="out">
      <div class="one">
        <div class="inner">
          <p>段落标记</p>
        </div>
      </div>
      <p>段落标记</p>
      <div class="inner">inner</div>
    </div>

群集选择器

<style>
      /* .one {
        color: red;
      }
      .two {
        color: red;
      }
      和下面的是等价的
      
      */
​
      .one,
      .two {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="one">sssssss</div>
    <div class="two">two</div>
  </body>

交集选择器

选择器之间紧挨着

交集选择器中有标签选择器，标签选择器必须放在最前面

作用:选中页面中同时满足多个选择器的标签

既被选择器1选中又被选择器2选中的标签

选择器1选择器2{}

代码

 <style>
      p {
        font: bold 30px/46px '楷体';
      }
      /* 选中的是p标签中class="active"的标签 */
      p.active {
        color: blueviolet;
      }
    </style>
  </head>
  <body>
    <p>段落标记</p>
    <p>段落标记</p>
    <p class="active">段落标记</p>
    <p>段落标记</p>
  </body>

 

伪类选择器

用来描述一个元素的特殊状态;比如第一个元素，某个元素的子元素，鼠标点击的元素

静态伪类

只能用于超链接的样式

:link  超链接点击之前
:visited 链接被访问过之后
​

动态伪类

所有标签都适用

：hover  鼠标悬浮在超链接上
:active  被激活  鼠标点击 不松手
：focus  标签获得焦点 （常用语表单中）

代码

<style>
      /* 鼠标悬浮在h3上 */
      h3:hover {
        
        color: brown;
      }
      /* 鼠标点击 不松开 */
      h3:active {
        color: chartreuse;
      }
      /* 了解 */
      input:focus {
        
      }
    </style>
  </head>
  <body>
    <h3>三级标题</h3>
    <h3>三级标题</h3>
    <h3>三级标题</h3>
    <h3>三级标题</h3>
    <h3>三级标题</h3>
​
    <input type="text" />
  </body>

伪类应用于超链接[重点]

<style>
      /* 链接点击之前 */
      a:link {
        color: blue;
      }
​
      /* 链接访问之后 */
      a:visited {
        color: aqua;
      }
      /* 鼠标放到标签上时 */
      a:hover {
        color: brown;
      }
      /* 被激活  鼠标点击 不松手 */
      a:active {
        color: chartreuse;
      }
​
      /* 
       4个伪类同时应用于a标签时要注意顺序问题
​
       hover要放到link 和visited的后面
       active要放到hover的后面
      */
    </style>
  </head>
  <body>
    <a href="http://www.baidu.com">超链接</a>
  </body>

其它伪类

nth-child

nth-of-type

<style>
      h3:first-child {
        
      }
      h3:nth-child(2n-1) {
        
      }
​
      /* 主要针对的是定位的元素里有好多不同类型的元素 */
      /* 指定元素的奇数行 */
      /* p:nth-of-type(even) {
        
      } */
      /* p:first-of-type {
        color: brown;
        font-weight: bold;
      } */
      /* 指定元素的最后一个 */
      /* p:last-of-type {
        
      } */
​
      /* 从第三个开始，包含第三个 到最后 */
      /* h3:nth-of-type(n + 3) {
        
      } */
      /* 前3个  包含第3个 */
      /* h3:nth-of-type(-n + 3) {
        
      } */
​
      /* h3:nth-child(n + 3) {
        
      } */
​
      /* h3:nth-child(-n + 3) {
        
      } */
​
      /* 
      
      E:nth-child 对父元素里所有孩子排序选择，先找到第n个孩子,然后看看是否和E元素匹配
      E:nth-of-type 对父元素里指定的子元素进行排序选择，先去匹配E，在根据E找到第n个孩子
      */
    </style>
  </head>
  <body>
    <h3>三级标题1</h3>
    <h3>三级标题2</h3>
    <h3>三级标题3</h3>
    <p>段落标记</p>
    <p>段落标记</p>
    <h3>三级标题4</h3>
    <h3>三级标题5</h3>
    <p>段落标记</p>
    <h4>四级标题</h4>
    <p>段落标记</p>
    <h4>四级标题</h4>
    <h4>四级标题</h4>
    <h3>三级标题1</h3>
    <h3>三级标题2</h3>
    <h3>三级标题3</h3>
  </body>

伪元素选择器

::before
::after

代码

  .box {
      }
​
      /* 在元素的内容的前面添加内容*/
      .box::before {
        content: 'width';
        color: red;
        font-size: 40px;
      }
      /* 在元素的内容的后面添加内容*/
      .box::after {
        content: 'word';
        color: blue;
      }

属性选择器

通过元素上的HTML属性来选择元素，常用于选择input标签

E[attr]  选择具有attr属性的E元素
E[attr="val"]  选择具有attr属性并且属性值等于val的E元素
 

posted on 2022-07-27 16:00  7891asdf156  阅读(52)  评论(0)    收藏  举报

导航