CSS_选择器_hehe.employment.over.8.3

8.7 CSS_语法格式

  • 格式:
			选择器 {
				属性名1:属性值1;
				属性名2:属性值2;
				...
			}
  • 选择器 : 筛选具有相似特征的元素。
  • 注意: 每一对属性需要使用“;”隔开,最后一对属性可以不加";"。

8.8 CSS_选择器_基础选择器

  • 基础选择器
    • id选择器: 选择具体的id属性值的元素.建议在一个html页面中id值唯一。
      • 语法: #id属性值{}
    • 元素选择器: 选择具有相同标签名称的元素
      • 语法: 标签名称{}
      • note: id选择器优先级高于元素选择器
    • 类选择器: 选择具有相同的class属性值的元素。
      • 语法: .class属性值{}
      • note: 类选择器选择器优先级高于元素选择器
  • 示例:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器title>
    <style>
        /*id选择器 */
        #id1{
      
            color:red;
        }
        /*元素选择器*/
        div{
      
            color: yellow;
        }
        /* 类选择器*/
        .class1{
      
            color: blue;
        }
    style>
head>
<body>
    <div id="id1">jeediv>

    <div>heediv>

    <div class="class1">eeediv>
body>
html>

8.9 CSS_选择器_扩展选择器


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器title>

    <style>
        /*子选择器*/
        div p{
      
            color:red;
        }
        /*父选择器*/
        div > p {
      
            border: 1px solid;
        }
        /*属性选择器*/
        input[type='text']{
      
            border: 5px solid;
        }
        /*伪类选择器*/
        a:link{
      
            color: pink;
        }

        a:hover{
      
            color: green;
        }

        a:active{
      
            color: yellow;
        }

        a:visited{
      
            color: red;
        }

    style>
head>
<body>

    <div>
        <p>传智播客p>
    div>
    <p>黑马程序员p>
    
    <div>aaadiv>
    
    <input type="text" >
    <input type="password" >
    
    <br>
    
    <a href="#">黑马程序员a>

body>
html>

你可能感兴趣的:(#,间接,over,css,html)