8、css语法、选择器

最新推荐文章于 2023-08-04 11:11:48 发布

五仁卤鸡翅

最新推荐文章于 2023-08-04 11:11:48 发布

阅读量185

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/MoonNight608/article/details/106843746

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
CSS基本语法
选择器
复合选择器
关系选择器
属性选择器
伪类选择器
a元素的伪类
伪元素选择器

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

CSS基本语法

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
  /*
    
  */  css注释
  
  css基本语法：
      1、 选择器  选择页面指定元素
       2、声明块  通过声明块指定为元素设置的样式
 
p{
    color:red;
} 
</style>
<body>                    
</body>
</html>

选择器


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
1、元素选择器  p、div..
2、id选择器
    根据元素id属性值，选中一个元素
    语法 #id
3、类选择器
     作用 根据元素的class 属性值选中一组元素
     语法  .class   

4、通配选择器
    选择页面中所有元素
     语法 *
</style>
<body>                    
</body>
</html>

复合选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
class 为red的设为红色
.red{
    color:red
}
class 为red 且div字体设置为30px

1、交集选择器
    作用，选中同时符合多个条件的元素
    语法，选择器1选择器2.。。
    注意，交集选择器中有元素选择器，必须元素选择器开头

div.red{
    font-size:30px
}

.a.b.c{
    color:blue
}


2、选择器分组（并集选择器）
    作用，同时选择多个选择器对应的有元素

h1,span{
    color:red
}
#b1,.p1,h1,span{
    
}
</style>
<body>
<div class="red">我是div</div>
<p class="red">我是p元素</p>
                     
</body>
</html>

关系选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
 给div子元素span设置一个字体颜色红色
  （为div直接包含的span设置一个字体颜色）
  
1、子元素选择器  
     -作用，选中指定父元素的指定子元素
     -语法，父元素>子元素

div > span{
    color:orange
}

2、后代选择器
    选中指定元素内的所有后代
    语法：祖先 后代(祖先和后代中有空格)
div span{
    color:red
} 

div>p>span{
    color:red
}

3、兄弟元素选择器(选中下一个兄弟)
   语法：前一个+下一个
   
   p + span{
       color:red
   }
   
4、选择下边所有的兄弟
     语法：前一个~后边
   p ~ span{
       color:red
   }  
</style>
<body>
<div>
  我是一个div
  <p>我是div中的p元素
    <span>我是p元素中span</span>
  </p>
  <span>我是div中的span</span>
</div>

                     
</body>
</html>

属性选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
1、[属性名] 含有指定属性的元素
 p[title]{
     color:red
 }
2、[属性名=属性值] 含有指定属性名和属性值的元素
p[title=abc]{
    color:red
}
3、[属性名^=属性值] 选择属性值以指定值开头的元素
p[title^=abc]{
    color:orange
}
4、[属性名$=属性值] 选择属性值以指定值结尾的元素
p[title$=abc]{
    
}
5、[属性名*=属性值] 选择属性值中含有某值的元素的元素
p[title*=abc]{
    color:green
    
}
</style>
<body>
<p title="abc">test</p>
<p title="abcef">test</p>
<p title="hello">test</p>   
<p >test</p>                      
</body>
</html>

伪类选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
// 把ul的第一个元素设置为红色

伪类：不存在的类或特殊的类
    描述一个元素的特殊状态
    比如，第一个子元素，被点击的元素，比如鼠标移入的元素
  伪类一般情况下使用 ： 开头
     :first-child 第一个元素   
     :last-child  最后一个子元素
     :nth-child() 选中第n个子元素
       特殊值：
           括号写n ,表示n的范围，表示0到正无穷
           2n 或 even ,表示选中偶数位的元素
           2n+1 或 odd,表示选中奇数位的元素
      -以上这些伪类都是根据所有子元素进行排序
    
    下述几个元素跟上述几个元素作用类似，只是是寻找同类型的
     :first-of-type
     :last-of-type
     :nth-of-type   
     
    - :not 否定伪类
       将某些符合条件的元素，从选择器中去除
       
   // 如下，设置除了第三个元素颜色
   ul>li:not(nth-child(3)){
       color:yellowgreen
   }    
       
       
   ul>li:nth-child(even){
       color:red
   }
   
   ul>li:first-child{
       color:red
   }   

</style>
<body>
<ul>
  <li>第一个</li>
  <li>第一个</li>
  <li>第一个</li>
</ul>                    
</body>
</html>

a元素的伪类

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
超链接的状态
    1、没有访问过的链接
    2、访问过的链接

:link 表示没访问过的 链接
a:link{
    color:red
}  

:visited 表示访问过的链接
  由于隐私的原因 ，:visited伪类只能修改颜色
a:visited{
    color:red
}

:hover 用于表示鼠标移入的状态
a:hover{
    color:red;
    font-size:50px
}

:active 鼠标点击状态
a:active{
    color:yellowgreen
}

</style>
<body>
<a href="https:www.baidu.com">访问过的链接</a>
<a href="https:www.baidu.com">没访问过的的链接</a>                  
</body>
</html>

伪元素选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
 伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）
        伪元素使用 :: 开头
          ::first-letter 表示第一个字母
          ::first-line 表示第一行
          ::selection 表示选中的内容
          ::before 元素的开始位置
          ::after 元素的最后
              -使用before after 必须结合content属性使用
               直接通过css向htmL添加内容
        
 p::first-letter{
     font-size:50px;
 }
 p::first-line{
     background-color:yellow
 }
 p::selection{
     background-color:greenyellow
 }
 div::before{
     content:'abc',
     color:red
 }
 div::after{
     content:'abc',
     color:yellow
 }

</style>
<body>
<div>
  Hello hello how are you
</div>
<p> lllllll </p>               
</body>
</html>

五仁卤鸡翅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
8、css语法、选择器

文章目录介绍CSS基本语法选择器复合选择器介绍本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记CSS基本语法<html lang="en"><head> <meta charset="UTF-8"> <title>meta</title></head><style> /* */ css注释 css基本语法： 1、选择器选择页面指定元
复制链接

扫一扫