CSS篇.day01-样式,选择器_在样式表中有以下样式设置a{text-decoration:no是什么选择器-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
 <title>01</title>
  <!-- 样式生效优先级: 就近原则 行内样式 > 内部样式 > 外部样式 > (内外优先级与引入位置有关)  -->
  <!--  外部样式(外联)  外部css样式文件中写样式,再引入-->
  <link rel="stylesheet" href="./day1-01-css语法.css">
  <!--  内部样式(内嵌) 结构与样式相分离  type说明使用哪种样式表 -->
  <style type="text/css">
    /* 样式设置   声明 {属性: 值 }*/
    p{
      /* 背景颜色 */
      background-color: beige;

      /* 字体设置 */
      color: aqua;        /* 字体颜色 */
      font-size: 10px;      /* 字体大小 */
      font-weight: 700;     /* 字体粗细 */
      font-family: '宋体';  /* 字体系列 */

      /* 文本 */
      line-height: 30px;   /*  行高    */
      text-align: center;  /* 文本对齐方式  center, left, right*/
      vertical-align: center; /*垂直对齐方式, 针对块元素或内联块(行内块)  需设置高度height以及行高line-hight*/
      
      /* 链接  */
      text-decoration: none; /* 文本修饰  下划线 */
    }
  </style>
</head>
<body>
  <!--  行内样式 -->
  <p style="color: aqua;">111</p>
  <p>222</p>
</body>
</html>

4.选择器

基本选择器(标签选择器, id选择器, 类选择器 (class)
子代选择器(空格)
伪类选择器(常用:hover, :focus,等)
属性选择器( [属性] )
兄弟选择器( +, ~)
通用选择器( *, 常用于清除样式 )

基础选择器生效优先级: id选择器 > 类选择器 > 标签选择器

组合写法(中间不加空格): 标签选择器#id选择器 , 标签选择器.类选择器

5.伪元素

::before/ ::after 结合content属性生效, 常用于清除浮动影响

<!DOCTYPE html>
<html lang="en">
<head>
 <title>01</title>
 <style type="text/css">
    /* 选择器 */
    /* 基本选择器  
        优先级:  id选择器 > 类选择器 > 标签选择器
        组合写法(中间不加空格): 标签选择器#id选择器 , 标签选择器.类选择器 
    */
    /* 标签选择器  标签名作为选择器名  选中所有该标签*/
    p{
      color: rgb(204, 178, 144);
      font-size: 23px;
    }

    /* id选择器   设置id  id名须唯一 */
    #ha{
      color: blueviolet;
    }

    /* 类选择器  设置class类名  可针对不同的标签分类,一个标签可以有多个类名(空格隔开) */
    .hli2{
      color:rgb(98, 56, 189);
    }

    /* 通用选择器*   用于清除样式 */
    *{
      margin: 0;
      padding: 0;
    }

    /* 高级选择器 */
    /* 子选择器  父子间空格隔开*/
    ul li a{
      color: brown;  /**/
    }

    /* 伪类选择器  
        :hover 鼠标悬停时,改变样式设置
        :link  未被访问时的样式
        :visited  访问后的样式
        :active  鼠标点击时(鼠标按下时)的样式
        :checked 被选中的元素样式
        :disabled 被禁用的元素的样式
        :first-child / :last-child  首个/最后一个子元素
        :nth-child(n) 选某个元素, n可为数字,公式  odd奇数  even偶数
        :nth-of-type(num) 选择某类型的元素的第几个
        :not(p)  选择p以外的元素
        :focus  获取焦点
        :before / :after  在某元素之前/后插入内容(内联元素)   
    */
    a:hover{}

    /* 属性选择器 
      [属性]            带有属性的元素设置样式
      [属性]='属性值'   某属性,值为某字符串的元素
      [属性]^='aa'  某字符串开头的属性值
      [属性]&='aa'  某字符串结尾的属性值
    */
    ul li[class]{}

    /* 兄弟选择器  (往下找,不往上找)
        + 选择紧挨着的下一个兄弟元素
        ~ 选择下边的所有的兄弟
    */
    div.div span.two+span{}  /*选中的是.three*/
    div.div span.two~span{}  /*选中的是.three和.four*/

    /* 伪元素   需写content才生效, 用于清除浮动
      ::after 
      ::before
    */
    div::after{
      content: '';
    }
    
    /* ,逗号的使用  选择器之间可使用,隔开, 实现代码的复用 */

  
  </style>
</head>
<body>
  <p style="color: aqua;">111</p>
  <p>222</p>
  <ul id="ha">
    <li>哈哈哈哈1</li>
    <li class="hli2">哈哈哈哈1</li>
  </ul>
  <ul>
    <li>哈哈哈哈2</li>
    <li><a href="#">哈哈哈哈哈哈3</a></li>
  </ul>
  <div class="div">
    <a href="">11111</a>
    <span class="one"></span>
    <span class="two"></span>
    <span class="three"></span>
    <span class="four"></span>
  </div>
</body>
</html>

优快云