Можно ли подключить css стиль к определенной section?

Question

[NikitosPRO]

У меня такой вопрос. Скопировал 3 секции с другого сайта. Хочу их поставить на свой, при подключении файла css перебиваются мои стили. Так вот можно ли как-нибудь подключить стиль именно к определенной section? Или может есть другие варианты. Два дня уже голову ломаю, стили перебиваются и все, ничего сделать не могу... Заранее спасибо за ответы.

Comments

[2cha.headz]

а вытащить из стороннего файла стили только этих секций, в чем проблема?

[Andrew]

2 дня голову над "подключением" стилей к отдельному блоку?
Может бросите, пока не поздно?

Answer 1

[Алексей Ярков]

можно ли как-нибудь подключить стиль именно к определенной section?

Два дня уже голову ломаю

А указать нужному элементу id нельзя? И в стилях указать его же.

Comments

[NikitosPRO]

А как понять, где именно идет конфликт с моими стилями, чтобы поставить к этим стилям id? Сорри за тупые вопросы, в разработке недавно.

[Алексей Ярков]

NikitosPRO,

А как понять, где именно идет конфликт с моими стилями

<section id="mysection"></section>

#mysection /*селектор, если надо*/ {
  /*стили*/
}

[NikitosPRO]

Сделал как вы написали, этот каскад не оборачивается id mysection. Что я делаю не так?(
Алексей Ярков,

#mysection {

section{display: block;
}

a
{
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

img
{
  border-style: none;
}

*,*:before,*:after
{
  box-sizing: inherit;
}

.row:after
{
  content: "";
  display: table;
  clear: both;
}

.h3
{
  font-size: 2.25rem;
  margin: 1.2rem auto;
}

p
{
  margin: 1rem auto;
  line-height: 1.5;
}

h6
{
  font-size: 1.25rem;
  margin: 1rem auto;
  font-weight: normal;
}

a
{
  text-decoration: none;
  outline: none;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
}

a:hover
{
  text-decoration: none;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
}

a.link
{
  color: #2e2e2e;
  text-decoration: underline;
}

.text-center
{
  text-align: center;
}

.col
{
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  min-height: 1px;
}

.col.x5
{
  width: 20%;
}

.container
{
  margin: 0 auto;
  max-width: 1190px;
}

.title
{
  text-transform: uppercase;
  font-weight: bold;
}

.row
{
  margin: 20px auto;
}

section
{
  min-height: 200px;
  padding: 50px 0;
}

section.why
{
  margin-bottom: 100px;
  padding: 0;
}

section.why .h3
{
  margin-bottom: 100px;
}

section.why .why-icons .why-icon .line
{
  border: 2px #ffcf01 solid;
  width: 50%;
  margin: 0 auto 1rem;
}

section.why .why-icons .why-icon .why-icon-desc
{
  padding: 0 1.5rem;
}

section.why .more
{
  display: none;
  text-align: left;
  margin-left: 82px;
}
} 

@media only screen and (max-width: 1190px)
{
  .container
  {
    max-width: 1000px;
  }

  section.why
  {
    margin-bottom: 0;
  }

  section.why .why-icons .why-icon .title
  {
    width: 145px;
  }
}

@media only screen and (max-width: 1023px)
{
  section
  {
    padding: 10px 0 20px;
    background-attachment: scroll!important;
  }

  .h3
  {
    font-size: 1.875rem;
  }

  .container
  {
    max-width: 620px;
  }

  section.why .h3
  {
    margin-bottom: 50px;
  }

  section.why .why-icons .why-icon
  {
    width: 50%;
    height: 260px;
  }

  section.why .why-icons .why-icon:last-child
  {
    width: 100%;
  }

  section.why .why-icons .why-icon:last-child .line
  {
    width: 155px;
  }

  section.why .why-icons .why-icon:last-child .why-icon-desc
  {
    width: 310px;
  }
}

@media screen and (max-width: 639px)
{
  .container
  {
    max-width: 90%;
  }

  section.why .container .row .row .why-icon img
  {
    width: 58px;
    float: left;
  }

  section.why .container .row .row .why-icon h6
  {
    margin-left: 77px;
    font-size: 1.1rem;
    width: 205px;
    text-align: left;
  }

  section.why .container .row .row .why-icon .line
  {
    margin-left: 78px;
    width: 80px;
  }

  section.why .container .row .row .why-icon .why-icon-desc
  {
    margin-left: 77px;
    width: 193px;
    text-align: left;
    padding: 0;
  }

  section.why .container .row .row
  {
    margin: 20px 5px;
  }

  section.why .container .row .row .why-icon:nth-child(3)
  {
    display: none;
  }

  section.why .container .row .row .why-icon:nth-child(4)
  {
    display: none;
  }

  section.why .container .row .row .why-icon:nth-child(5)
  {
    display: none;
  }

  section.why .more
  {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  section.why .container .row .row .why-icon.col.x5
  {
    float: none;
    width: 50%;
    height: auto;
    margin: auto;
  }
}

@media screen and (max-width: 500px)
{
  section.why .container .row .row .why-icon.col.x5
  {
    width: 100%;
  }
}

[Алексей Ярков]

NikitosPRO,

этот каскад не оборачивается

Вам совсем лень погуглить, да? В CSS вложенность селекторов в таком виде не работает. Юзайте какой-то препроцессор или ручками #mysection приписывайте в начало каждого селектора ))

[NikitosPRO]

Алексей Ярков, Плохо гуглил, видимо, спасибо большое, буду пробовать

Answer 2

[Maksimka]

!important