css 样式用法的累积

分手后的思念是犯贱 2022-08-13 14:41 166阅读 0赞

我们直接看例子然后在来解释用法。

<!DOCTYPE html>  
<html>  
<head>  
<style>  
input\[type="checkbox"\]+p:before\{   
content:"台词：";  
\}  
</style>  
</head>  
  
<body>  
  
<input type="checkbox"/><p>我是唐老鸭。</p>  
<p>我住在 Duckburg。</p>  
  
<p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>  
  
</body>  
</html>

页面效果显示如下：

![Center][]

我们来解释一下下面这个css写法的用途

input\[type="checkbox"\]+p:before\{  
content:"台词：";  
\}

它只会在checkbox 紧接着的第一个标签为p的段落加上“台词” 这两个字

这里有个 + 和：before的用法，+ 这里理解为and的意思，即input\[type="checkbox"\] 且 第一个p 才会加上样式

第二个例子

![Center 1][]

看样式写法。

.dataTables\_wrapper .row:first-child \{   
padding: 12px 0px 4px;  
margin: 0px 0px;  
background-color: \#eff3f8;  
\}  
这个样式只会对第一个th 起作用，第二个th是不起作用的，同时 最后一个可以这样写.dataTables\_wrapper .row:last-child

第三个例子。

用css样式画一个圆

div  
\{  
background-color: \#000;  
color: \#fff;  
border: 2px solid \#fff;  
border-radius: 32px;  
height: 24px;  
width: 24px;  
\}

[Center]: /images/20220810/64c2e6d8583649e9a15a30f12bc10681.png
[Center 1]: /images/20220810/587b72695baf4304b06f66cdc6fceaab.png

发表评论取消回复

表情：

评论列表（有 0 条评论，166人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS常用样式

文章目录字体样式文本样式颜色 color 对齐方式 text-alogn 下划线、上划线、删除线

╰半橙微兮°/ 2023年10月12日 17:02/ 0 赞/ 24 阅读

相关 CSS-列表样式属性的用法，表格样式属性border-collapse的使用

CSS列表属性 list-style-type `list-style-type: disc;` 用于设置列表项的标记 <table> <thead>

傷城~/ 2023年06月01日 05:53/ 0 赞/ 14 阅读

相关 css 常用样式

1.菜单变灰 / 灰的字体 / .font-gray{ color: ddd; } / 不能操作的 / .font-dis

た入场券/ 2023年02月18日 15:21/ 0 赞/ 10 阅读

相关 css 元素累积点滴

(1).padding是内边距的意思，是内容区到边框之间的距离，一个框架有4各部分，由内到外依次是：内容区，内边距（padding）,边框(border),外边距(margin

ゝ一世哀愁。/ 2022年09月17日 11:18/ 0 赞/ 200 阅读

相关 js 针对html 元素 css样式操作等累积

1.。 ![SouthEast][] var totalPanels= $(".scrollContainer").children().size(); alert(tot

曾经终败给现在/ 2022年08月25日 09:22/ 0 赞/ 179 阅读

相关 css 样式用法的累积

我们直接看例子然后在来解释用法。 <!DOCTYPE html> <html> <head> <style> input\[type="checkbox"\]

分手后的思念是犯贱/ 2022年08月13日 14:41/ 0 赞/ 167 阅读

相关 Bootstrap前端框架----css样式的一些用法（排版）

1.内联子标题如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 <small>，或者添加 .small class，这样子您就能得到一个字号更小的颜色更

た入场券/ 2022年05月30日 08:09/ 0 赞/ 156 阅读

相关 CSS常用样式

图片垂直居中 .img-box { height: 130px; line-height:130px; } im

墨蓝/ 2022年04月08日 08:59/ 0 赞/ 317 阅读

相关 react样式的用法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Myth丶恋晨/ 2021年12月14日 05:41/ 0 赞/ 307 阅读

相关 CSS常用样式

文字： /*字体加粗*/ font-weight: bold; /*字体大小*/ font-size: 28px; /*修改字体*/ font-family: "隶书",...

朱雀/ 2021年05月03日 16:03/ 0 赞/ 666 阅读