CSS基础选择器

来源：互联网发布：linux中没有yum命令编辑：程序博客网时间：2024/05/01 22:37

本文根据实验楼文档而记录的学习笔记，以便复习。

基础选择器

一、派生选择器
派生选择器通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。

li strong{      color: red;      }

<p><strong>我是黑色，因为我不在列表当中，所以这个规则对我不起作用</strong></p><u1>    <li><strong>我是红色。这是因为 strong 元素位于 li 元素内。</li></u1>

二、id选择器
1.id 选择器： id 选择器可以为标有 id 的 HTML 元素指定特定的样式 id 选择器以“#”来定义
2.id 选择器和派生选择器：目前比较常用的方式是 id 选择器常常用于建立派生选择器

<!doctype html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link  href="MyCss.css" type="text/css" rel="stylesheet">    </head>    <body>        <p id="pid">hello css<a href="www.shiyanlou.com">shiyanlou</a></p>        <div id="divid">this is a div</div>    </body></html>

MyCss.css #divid{}就是一个独立的 id 选择器，而#pid a{}就是我们前文提到的 id 选择器用于建立派生选择器,相当于是一个嵌套。

#pid a{    color:#00755f;}#divid {    color: red;    }

三、类选择器
1、在CSS中，类选择器以一个点号显示：

.divclass {    color: red;}

在下面的 html 代码中，div 元素含有 divclass 类，意味着它要遵守.divclass的规则。

<div class="divclass">    hello div</div>

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
2、和id一样，class也可以被用作派生选择器：

.pclass a{    color: green;}

四、属性选择器
对带有指定属性的 HTML 元素设置样式。
(1)下面的例子为带有 title 属性的所有元素设置样式：

[title]{    color:red;}

2)属性和值选择器
下面的例子为 title=”te” 的所有元素设置样式：

[title=te]{    color: red;}

代码举例：

<!doctype html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            [title]{                color: #00ff14;            }            [title=te]{                color: red;            }        </style>        </head>    <body>       <p title=>属性选择器</p>        <p title="te">属性和值选择器</p>    </body></html>

运行效果
这里写图片描述

0 0