HTML5权威指南读书笔记08（第16,17章）--css选择器-CSDN博客

本文链接：https://blog.csdn.net/weixin_43745804/article/details/109997624

1、css盒模型选择器简明参考

在这里插入图片描述

2、属性简明参考–边框和背景

在这里插入图片描述

3、属性简明参考–盒模型属性

在这里插入图片描述

4、属性简明参考–布局属性

在这里插入图片描述

5、属性简明参考–文本属性

在这里插入图片描述

6、属性简明参考–过渡、动画和变换属性

在这里插入图片描述

7、属性简明参考–其他属性

在这里插入图片描述

8、CSS基本选择器–*通用选择器

*{
margin:0;
padding:0;
}

9、类型（标签）选择器

<style type="text/css">
        a{color: red;}
    </style>

10、类选择器

<style type="text/css">
        .myclass{color: red;}
    </style>

同时匹配两个类

<head>
    <style type="text/css">
    .class1{ color: red;}
    .class2{ font-weight: bold;}
    </style>    
</head>
<body>
    <div class="class1 class2">here is two kind of class </div>
</body>

标签+类

<head>
    <style type="text/css">
    .class1{ color: red;}
    .class2{ font-weight: bold;}
    span.class3{color: blue;font-size: 3em; font-weight: bold;}
    </style>    
</head>
<body>
    <div class="class1 class2">here is two kind of class </div>
    <div><span class="class3">here is span class</span></div>
</body>

11、ID选择器

<style type="text/css">
        #myid{color: red;}
    </style>

12、属性选择器

<head>
    <style type="text/css">
    [href]{color:red; font-weight: bold;}
    </style>    
</head>
<body>
    <div ><a href="#">hello</a></div>
    <div ><a >world</a></div>
</body>

在这里插入图片描述

<head>
    <style type="text/css">
    [href="#"]{color:blue; font-weight: bold;}
    [href^="hello"]{color:red; font-weight: bold;}
    [href$="world"]{color:green; font-weight: bold;}
    [href*="my"]{color:pink; font-weight: bold;}

    </style>    
</head>
<body>
    <div ><a href="#">hello</a></div>
    <div ><a href="helloworldhello" >world</a></div>
    <div ><a href="helloworld" >world</a></div>
    <div ><a href="hemywo" >world</a></div>
</body>

13、逗号并集选择器

<head>
    <style type="text/css">
    .myclass1,.myclass2{color: red;}
    </style>    
</head>
<body>
    <div class="myclass1">myclass1</div>
    <div class="myclass2">myclass2</div>
</body>

14、后代选择器（空格）

匹配所有的后代

<head>
    <style type="text/css">
    div span{color: red;}
    </style>    
</head>
<body>
    <div><span>span1</span><span>span2</span><span>span3</span></div>
</body>

匹配所有后代，即便包含后代

<head>
    <style type="text/css">
    div span{color: red;}
    </style>    
</head>
<body>
    <div><p><span>myspan</span></p><span>myspan</span</div>
</body>

15、子代选择器（>大于号）

选择直接后代（儿子），但不选择孙子元素

<head>
    <style type="text/css">
    div>span{color: red;}
    </style>    
</head>
<body>
    <div><p><span>myspan</span></p><span>myspan</span</div>
</body>

16、兄弟选择器（+号）

紧跟着自己的选择器，隔着的不算兄弟

<head>
    <style type="text/css">
    .mycla1+div{color: red; font-weight: bold;}
    </style>    
</head>
<body>
    <div class="mycla1">myclass1</div>
    <div >myclass2</div>
    <div >myclass3</div>
</body>

16、普通兄弟选择器（~号）

所有是兄弟，但不一定是直接兄弟的选择器

<head>
    <style type="text/css">
    .mycla1~div{color: red; font-weight: bold;}
    </style>    
</head>
<body>
    <div class="mycla1">myclass1</div>
    <div >myclass2</div>
    <div >myclass3</div>
    <p>hello world</p>
    <div>myclass4</div>
</body>

17、：：first-line伪选择器

首行设置，注意是以br标签作为换行

<head>
    <style type="text/css">
    ::first-line{color: red;}
    </style>    
</head>
<body>
    <p>here is first line<br/>here is seconde line<br/>here is third line</p>
</body>

18、：：first-letter伪选择器

<head>
    <style type="text/css">
    ::first-letter{color: red;}
    </style>    
</head>
<body>
    <p>here is first line<br/>here is seconde line<br/>here is third line</p>
</body>

19、：before，：after 选择器

<head>
    <style type="text/css">
    .myclass{color: red;}
    .myclass:before{content:"insert befor"}
    .myclass:after{content:"insert after"}

    </style>    
</head>
<body>
    <div class="myclass">myclass</div>
</body>