CSS学习笔记（一）

时间 2019-11-18

标签 css 学习笔记栏目 CSS 繁體版

原文原文链接

一. CSS3的关系选择器html

① E~F --> 名称：兄弟选择符解释：CSS3 选择E元素全部兄弟元素F。java

<!doctype html>
<head>
 <meta charset="utf-8" />
 <title>无标题文档</title>
    <style>
     span~p{color:red;}
    </style>
</head>
<body>
    <div>
     <span>锄禾</span>
        <p>锄禾日当午</p>
        <p>汗滴禾下土</p>
    </div>
</body>
</html>

效果 : spa

二. 伪类选择器code

①. 结构性伪类选择器htm

用法都差很少，挑一个写了，对象

写的是E:nth-child(n)---->n指的是父元素的第n个子元素E游戏

 <!doctype html>
<head>
 <meta charset="utf-8" />
 <title>无标题文档</title>
    <style>
     p:nth-child(2){ font-size:16px;color:red;}
    </style>
</head>
<body>
    <div>
     <span>锄禾</span>
        <p>锄禾日当午,</p>
        <p>汗滴禾下土。</p>
        <p>谁知盘中餐，</p>
        <p>粒粒皆辛苦。</p>    
    </div>
</body>
</html>

效果：utf-8

②. UI元素状态伪类选择器文档

先说说E:disabled吧！disabled是使标签处于禁用状态input

 <!doctype html>
<head>
 <meta charset="utf-8" />
 <title>无标题文档</title>
    <style>
     input:disabled{background:gray;}
    </style>
</head>
<body>
    <div>
     ID:&nbsp;&nbsp;&nbsp;<input type="text" value="12" disabled /><br/><br/>
        Name：<input type="text" name="name" />
    </div>
</body>
</html>

效果：

而enabled是让标签处于可用状态，默认就是enabled:

 <!doctype html>
<head>
 <meta charset="utf-8" />
 <title>无标题文档</title>
    <style>
     input:enabled{background:gray;}
    </style>
</head>
<body>
    <div>
     ID:&nbsp;&nbsp;&nbsp;<input type="text" value="12" enabled /><br/><br/>
        Name：<input type="text" name="name" />
    </div>
</body>
</html>

效果：

还有E:checked属性

 <!doctype html>
<head>
 <meta charset="utf-8" />
 <title>无标题文档</title>
    <style>
     input:checked+span{background:pink}
    </style>
</head>
<body>
    <div>
     <h2>单选复选按钮</h2>
     <input type="radio" name="man" value="0" /><span>女</span>
        <input type="radio" name="man" value="1" /><span>男</span>
        <hr />
        <p>喜欢的活动</p>
        <input type="checkbox" name="game" checked><span>玩游戏</span>
        <input type="checkbox" name="game" /><span>画画</span>
        <input type="checkbox" name="game" checked/><span>游泳</span>
        <input type="checkbox" name="game" /><span>唱歌</span>
    </div>
</body>
</html>

效果图：

三. 属性选择器

四. 伪对象选择器

代码效果部分