CSS3修养

最新推荐文章于 2024-08-12 16:19:20 发布

想吃烧烤

最新推荐文章于 2024-08-12 16:19:20 发布

阅读量324

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_48722471/article/details/122314239

版权

1.selector

1.E + F

下一个满足条件的兄弟元素节点**

<head>
<style>
    div +p{
           background-color: red;
        }
</style>
</head>
<body>
    <div>div</div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</body>

在这里插入图片描述

2. E ~ F

同一级所有满足条件的兄弟元素节点**

<head>
<style>
    div ~p{
           background-color: green;
        }
</style>
</head>
<body>
    <div>div</div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</body>

在这里插入图片描述

3.E[attr~=value] 要包含这个value单词**


<head>
<style>
     div[data~='a']{
            background-color: red;
        }
</style>
</head>
<body>
    <div data='a'>1</div>
    <div data='b'>2</div>
    <div data='a b'>3</div>
    <div data='aa b c'>4</div>
</body>

在这里插入图片描述

4.E[attr|=value] 以这个value 或 value-

<head>
    <style>
        div[class|='a']{
            background-color: red;
        }
       
    </style>
</head>
<body>
    <div class='a'>1</div>
    <div class='a-test'>2</div>
    <div class='b-test'>3</div>

</body>

在这里插入图片描述

5.E[attr^=value] 以value为开头

6.E[attr$=value] 以value为结尾

7.E[attr=value] 只要包含这个字符串就行了

8.E :nth-of-type(n)

只能设置三个属性

<head>
    <style>
        div:nth-of-type(1){
            color: red;
            background-color: seagreen;
            text-shadow:3px 5px black ;
        }
       
    </style>
</head>
<body>
    <div class='a'>1</div>
    <div class='a-test'>2</div>
    <div class='b-test'>3</div>

</body>

在这里插入图片描述

9.：not()

不包含选择的

<head>
    <style>
         div:not(.test){
             background-color: red;
         }
         div:not(class){//4
             background-color: red;
         }
         div:not(last-of-type){
             background-color: red;
         }
    </style>
</head>
<body>
    <div class='demo'>1</div>
    <div class='demo'>2</div>
    <div class='test'>3</div>
    <div>4</div>
</body>

在这里插入图片描述

10.target 目标伪类

选取当前活动的目标元素

<head>
    <style>
         div:target{
             border: 1px solid red;
         }
         div[id]:not(:target) {
             display:none;
         }
    </style>
</head>
<body>
    <a href="#box1">box1</a>
    <a href="#box2">box2</a>
    <div id='box1'>1</div>
    <div id='box2'>2</div>

</body>

在这里插入图片描述

11. :first-child

<head>
    <style>
         p:first-child{
             background-color: red;
         }
       
    </style>
</head>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <p>4</p>

</body>

在这里插入图片描述

12 :last-child

选中最后一个

13. :only-child

14. :nth-child(n)

<head>
    <style>
         p:nth-child(2n+1){ //奇数 1 3 5 7
             background-color: red;
         }
    </style>
</head>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>
</body>

在这里插入图片描述

<head>
    <style>
         p:nth-child(2n){ //偶数 0 2 4 6
             background-color: red;
         }
    </style>
</head>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>
</body>

在这里插入图片描述

15.:nth-of-type()

16.:empty

选中空内容的属性

<head>
    <style>
         p:empty{
             border: 1px solid red;
             height: 10px;
         }
    </style>
</head>
<body>
    <div>
        <span>0</span>
        <p></p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p><!-- 5 --></p> //注释也算空
    </div>
</body>

在这里插入图片描述

17. :checked

点击后改变格式

2.border

1.border-radius

border-radius的数值有三种表示方法：px、%、em，对于border-radius的值的设置，我们常用的有三种写法：
　1）仅设置一个值
　第一种方法，应该是我们最常用的一种情况了，常用来给button加圆角边框，或者画一个圆形按钮，仅需设置一个数值，即可给元素的四个边角设置统一的圆角弧度，例如：

#test1 {
     border: 3px solid red;
     height: 100px;
     width: 200px;
     border-radius: 30px;
 }

在这里插入图片描述
　　（2）设置四个方向的值
　　　border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式，因此，border-radius : 30px;，其实等价于border-radius : 30px 30px 30px 30px;（ps：与padding和margin一样，各个数字之间用空格隔开）。

这里要注意四个数值的书写顺序，不同于padding和margin的“上、右、下、左”的顺序，border-radius采用的是左上角、右上角、右下角、左下角的顺序，如下图所示：
　在这里插入图片描述

#test1 {
     border: 3px solid red;
     height: 100px;
     width: 200px;
     border-radius: 30px;
 }

（3）省略部分值

与padding和margin一样，border-radius同样可以省略部分值，省略时同样是采用对角线相等的原则，例如：

#test3 {
     border: 3px solid red;
     height: 100px;
     width: 200px;
     border-radius: 50px 0px;
 }

在这里插入图片描述

想吃烧烤

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3修养

1.selector**1.E + F下一个满足条件的兄弟元素节点**<head><style> div +p{ background-color: red; }</style></head><body> <div>div</div> <p>1</p> <p>2</p> <p&g
复制链接

扫一扫