HTML——8.css -> basic基础 & selector选择器

1.基本模式

2.多个标签设定相同样式

3.派生选择器

4.属性选择器 [ ]

5.选择器的使用

以上练习代码：

1.基本模式

selector{ property：value; }

2.多个标签设定相同样式

继承，如设定body-color body中未设定style的标签继承body's color

3.派生选择器：

包含后代选择器，子选择器，相邻兄弟选择器

3.1后代选择器 " "

其实就是一个精细选择的过程

如 p span{}

就是+空格
只要是在标签里面的标签无论几代都可以，
因为其为“后代”选择器，里面的都是它“后代”

CSS:

li strong {
    font-style: italic;
    font-weight: normal;
    }

HTML:

<p>
   <strong>
    我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用
   </strong>
</p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

结果：

我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用

我是斜体字。这是因为 strong 元素位于 li 元素内。
我是正常的字体。

派生selector与id、class同时使用
I'm blue
I'm red

3.2 子代选择器 > “大于号”

相对于后代选择器，其只能作用于自己的子代，而不是孙代

要达到上述效果，需要两个 >

CSS：

div>p>span{
        color: green;
    }

HTML：

<div>
    <p>
        <span>我是绿色的</span>
    </p>
</div>

还有相邻兄弟选择器使用较少，注意一下就好。

4.属性选择器 [ ]

例子：[href]{color:red} 可以把href内容写明细,也可与其他结合、连缀

CSS:

[title="use"]{
        color: darkblue;
}

HTML:

 <p title="use">
        I'm darkblue
 </p>

还有就是 ~ 符号的使用

使用实例：

[title~="value"]{ }

~表示包含关系，可以理解为约等于。

属性值中含有value的就满足条件（value空格隔开）

属性也可以是href、contenteditable ........

CSS:

[title~="yue"]{
        color: blue;
    }

HTML:

<li title="yue yue2">
         我是蓝色的            
</li>

5.选择器的使用

5.1多类选择器 --->标签可拥有多个类

CSS:

.class1{
        color: blue;
    }
.class2{
        font-style: italic;
    }

HTML:

<p class="class1 class2">
        我有两个类，同时具有class1与class2的属性，
        class1: blue font、
        class2: italic
</p>

结果：

我有两个类，同时具有class1与class2的属性， class1: blue font、 class2: italic

其他比如 * 、 h1,h2 与都已经了解

注意： ID 选择器不能结合使用，

因为 ID 属性不允许有以空格分隔的词列表。

以上练习代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css1->selector base</title>
    <style>
    p,h3{
        color: cornflowerblue;
    }
    li strong {
    font-style: italic;
    font-weight: normal;
    }
    #try p{
        color: red;
    }
    #try{
        color: blue;
    }
    .github a{
        text-decoration: none;
        color: cadetblue;
    }
    [title="use"]{
        color: darkblue;
    }

    </style>
</head>
<body>
    <section>
    <h5>1.基本模式</h5>
    <p>selector{
           property：value; 
        }
    </p>
    <hr/>
    </section>
    <h5>2.多个标签设定相同样式</h5>
    <p>
        继承，如设定body-color body中未设定style的标签继承body's color
    </p>
    <hr/>
    <h5>3.派生选择器</h5>
    <ul>
      <li>      
          <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
          <ol>
          <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
          <li>我是正常的字体。</li>
          </ol>
      </li>  
      <li>
          <p>派生selector与id、class同时使用</p>
          <div id="try">
          I'm blue<p>I'm red</p>
          </div>
          <div class="github">
            <a href="github.com" >github,color:catedblue</a>
          </div>
      </li>
    </ul>
    <hr/>
    <h5>4.属性选择器</h5>
    <ul>
        <li title="use">
            例子：[href]{color:red}
            可以把href内容写明细,也可与其他结合、连缀
            <br/>I'm darkblue
        </li>
    </ul>
    

</body>
</html>

来源：CSDN

作者：only_tao

链接：https://blog.csdn.net/only_tao/article/details/104221734

标签

css选择器

html代码

HTML——8.css -> basic基础 & selector选择器

1.基本模式

2.多个标签设定相同样式

3.派生选择器 ：

4.属性选择器 [ ]

5.选择器的使用

以上练习代码：

3.派生选择器：