css选择器

最新推荐文章于 2024-08-18 23:31:20 发布

计科2 黄和平

最新推荐文章于 2024-08-18 23:31:20 发布

阅读量33

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/huangheping0803/article/details/131652471

版权

本文介绍了CSS选择器的基本结构和不同类型，包括标签选择器、ID和类选择器、通配符选择器，以及子代、复合、属性、伪类和结构伪类选择器。此外，还涉及了伪元素选择器的应用，如在内容前后添加字符或表单提示词等。

摘要由CSDN通过智能技术生成

选择器基本结构

<head>

</head>

1.基本选择器

a. 标签选择器：       标签{...}
b. id选择器（id="box1"）：   #box1{...}
c. 类选择器（class="box2"）：   .box2{...}
d. 通配符选择器：*{...}

2.子代选择器   .a>li{...} //对1
后代选择器   .a li{...} //对1和2
<ul class="a">
   <li>1</li>
   <ul >
       <li>2</li>
   </ul>
</ul>

3.复合选择器：
例如; div,
p,
   span{
   color：red;
   }       //将三个（div,p,span）公用

4.属性选择器：
标签[属性="属性值"]{......}   //如果省略属性值，将包括所有含有属性的此标签
标签[属性^"te"]{...}       //属性值以te开头
标签[属性$="te"]{..}       //属性值以te结尾
标签[属性*="te"]{...}       //属性中包含有te

5.伪类选择器：
   <style>
       标签: xx 标签{color:pink}
   </style>

6.结构伪类选择器
   <style>
       ul li:first-child{...}       //对<ul>标签下的第一个<li>操作...........其中ul是父元素，li是子元素
       ul li:nth-child(N){...}       //对<ul>标签下的第N个子元素操作
       ul li:nth-of-type(N){...}   //对<ul>标签下的第N个<li>子元素操作
    </style>

7.伪元素选择器;
   <style>
       ul li::before{content:"任意字符"}       //对<ui>下的所有<li></li> 中间内容的前面加任意字符
       ul li::after{content:"任意字符"}       //对<ui>下的所有<li></li> 中间内容的后面加任意字符
       input::placeholder{..........}        //表单提示词
       ul li:nth-child(N): : selection{....}       //选中时
   </style>

计科2 黄和平

关注

0
点赞
踩
0

收藏

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

操作...........其中ul是父元素，li是子元素。ul li::before{content:"任意字符"} //对<ui>下的所有<li></li> 中间内容的前面加任意字符。ul li::after{content:"任意字符"} //对<ui>下的所有<li>去百度
复制链接

扫一扫